Webサイト上でテキストのDiffを表示する方法について調べる

目的

• 文章と文章を比較するDiffにおいて、差分を表現するフォーマットにどのようなスタイルがあるのか調べる。
• Diffをキレイに表示するライブラリの入出力を調べる。

diffコマンドの出力フォーマット

標準形式

• フォーマットを指定しないときの出力フォーマット
• --normal というオプションで標準形式での出力を選択できる。特に名前はなさそう。
• オプションで出力フォーマットをかなり変えることができる
• < で削除された行、> で追加された行、変更は --- で区切って両方のファイルの行を表示する

context形式

• -c で指定する
• 両方のファイルで差分とその前後の行が表示される
• - で削除された行、 + で追加された行、 ! で変更された行を表す

unified形式

• -u で指定する
• git のdiffでよく見る形式
• - で削除された行、 + で追加された行、 変更は削除と追加として両方のファイルの行を表示する

git diffコマンドの出力フォーマット

• 前述の通り、diffコマンドのunified形式っぽい（内部的にdiffコマンドを使っているかは分からない）
• フォーマットを変更するオプションはなさそう。

差分表示するライブラリ

Mergely

• 精度が高い
• 見た目も分かりやすい
• デモサイト

jsdiff

• クライアントだけで差分比較してレンダリングできる
• charactar, word, line の3段階の差分比較ができる
• Unified形式で取れるっぽい https://qiita.com/from_kyushu/items/f9f2b7f5fa85cfb695dd
• デモサイト

jsdifflib

• クライアントだけで差分比較してレンダリングできる
• サーバーで差分比較して、差分だけをクライアントに渡してレンダリングできる
• 差分はPython の difflib の SequenceMatcher と互換性がある
• メンテナンスはされてなさそう

GitLabのdiff表示

ドキュメントがある

https://gitlab.com/gitlab-org/gitlab/-/tree/master/doc/development/merge_request_concepts/diffs

概要

• Gitaly（Gitを管理するサービス）から差分を取得する
• Diff ファイルと行のシリアライゼーションは主に DiffFileEntity によって行われる
• Gitlab::Diff::File, Gitlab::Diff::Line でプレゼンテーションする

具体的な処理

• /merge_requests/:id/diffs_batch.json の highlighted_diff_lines に 行ごとのHTMLが返される
• highlighted_diff_lines は Gitlab::Diff::File#diff_lines_for_serializer でシリアライズされる
• diff_lines_for_serializer は diff_lines を Gitlab::Diff::Highlight#highlight でハイライトしたもの
• diff_lines は Gitlab::Diff::Parser で raw_diff を解析して作られたオブジェクトの配列
• raw_diff は git diff の文字列？（未確認）