github風のdiff表示

2つのファイル間の差異をグラフィカルに示したいと思ったとき、Windows環境ならWinMergeを使えばいいし、Linux環境ならvimdiffを使えばいいという話になります。

がしかし、環境に依存せずにどのようなOSを使っていてもどのような端末を使っていても差異を単純明快に示す方法はないものだろうか、と考えていたところgithubみたいにhtmlベースで表示すればいいじゃないかという話になりました。

手軽にdiff(差分ファイル)をhtmlに変換してくれるツールはないだろうかと探したところありました。diff2htmlというパッケージです。

https://diff2html.rtfpessoa.xyz/

少し詳しく見てみたところ、これはnodejs上で動作するWebのフレームワークっぽい感じがします。これを応用してコマンドラインからhtmlファイルを生成するツールってのがありました。diff2html-cliというパッケージです。

https://github.com/rtfpessoa/diff2html-cli

これもnpmを使ってインストールするので、nodejsやnpmがインストールさていることが使うための前提条件になりそうです。

tuttitan.hatenablog.com

 

diff2html-cliのインストール方法を使い方を以下に示します。

 

[インストール]

  1. $ sudo npm install -g diff2html-cli
    一応、which diff2htmlでパスが通っていることを確認して下さい。

[使い方]

  1. 2つのファイルのdiffをunified形式でとる
    $ diff -u file1.txt file2.txt > file12.diff
  2. diff2htmlコマンドで差分ファイルをHTML化する
    $ diff2html -i file -F file12_diff.html -- file12.diff
  3. 出力されたファイルfile12.diff.htmlをブラウザで確認する

 

参考HP