§01-28Data Visualization
diff viewer
2 つのテキストの差分を行単位で並べて示す。
変更前後の文章やコードを並べ、どこが増えどこが消えたかを示す。レビューや履歴の確認で、全文を読み直さずに変更点だけ追いたいときに使う。
実装のポイント
行ごとに追加・削除・文脈の種別を持ち、旧行番号と新行番号を別カラムで表示する。行内の変更箇所は単語単位の差分で追加ハイライトする。
- 特徴
- CSS のみ
- デモで使っているもの
- lucide-react
§01-28Data Visualization
2 つのテキストの差分を行単位で並べて示す。
変更前後の文章やコードを並べ、どこが増えどこが消えたかを示す。レビューや履歴の確認で、全文を読み直さずに変更点だけ追いたいときに使う。
行ごとに追加・削除・文脈の種別を持ち、旧行番号と新行番号を別カラムで表示する。行内の変更箇所は単語単位の差分で追加ハイライトする。