本文へ移動

§01-28Data Visualization

diff viewer

2 つのテキストの差分を行単位で並べて示す。

変更前後の文章やコードを並べ、どこが増えどこが消えたかを示す。レビューや履歴の確認で、全文を読み直さずに変更点だけ追いたいときに使う。

実装のポイント

行ごとに追加・削除・文脈の種別を持ち、旧行番号と新行番号を別カラムで表示する。行内の変更箇所は単語単位の差分で追加ハイライトする。

特徴
  • CSS のみ
デモで使っているもの
  • lucide-react