最近 git diff の結果を GitHub プルリクエストのようなインタフェース (HTML) に変換する必要があった．既にツールがあるだろうと思って調べたところ「diff2html-cli」を使えば git diff の結果を HTML に変換できるとわかった．今回は diff2html-cli を紹介する．

インストール

diff2html-cli は npm で簡単にインストールできる．今回は最新版の v5.1.0 を使う．コマンドは diff2html となる．

$ npm install -g diff2html-cli

$ diff2html --version
5.1.0

今回はサンプルとして，GitHub リポジトリ redash-hands-on の v7.0.0 リリース (Tags) と v8.0.0 リリース (Tags) の差分を使う．

github.com

diff2html-cli を試す

まず，以下のように git diff の結果（標準出力）を diff2html コマンドと --input stdin オプションにパイプする．すると GitHub プルリクエストのような HTML に変換できる．便利！

$ git diff v7.0.0 v8.0.0 | diff2html --input stdin

f:id:kakku22:20200427121105p:plain

スプリットモードにする

diff2html のデフォルトスタイルは line（GitHub だと Unified）となる．--style オプションを使って side（GitHub だと Split）を指定すると，GitHub で個人的によく使う「左右比較スタイル」になる．

$ git diff v7.0.0 v8.0.0 | diff2html --input stdin --style side

f:id:kakku22:20200427121121p:plain

Files changed を初期表示する

他にも --summary open オプションを使うと，デフォルトで閉じている「Files changed」を初期表示できるようになる．GitHub プルリクエストの画面だと「Jump to...」をクリックすると表示される．

$ git diff v7.0.0 v8.0.0 | diff2html --input stdin --summary open

f:id:kakku22:20200427121137p:plain

書き出す HTML ファイルを指定する

Mac で diff2html を実行すると，デフォルトだと /private/var/folders の下に diff.html を書き出す．--file オプションを使うと，任意の場所を指定して HTML ファイルを書き出せるようになる．以下の例だと，カレントディレクトリに redash.html を書き出す．

$ git diff v7.0.0 v8.0.0 | diff2html --input stdin --file redash.html

独自フォーマットを使う

デフォルトだと HTML に Diff to HTML by rtfpessoa という不要な文章も含まれてしまう．「diff2html-cli」を個人的に使うなら無視できるけど，HTML を公開するシナリオだと微妙だなと感じた．調べたところ，独自フォーマットを使うためのオプションとして --htmlWrapperTemplate も実装されていた．使うのは簡単で，以下のように事前に用意したテンプレートを指定する．

$ git diff v7.0.0 v8.0.0 | diff2html --input stdin --style line --file redash.html --htmlWrapperTemplate template.html

README.md を読むと，テンプレートに Git 情報を埋め込むプレースホルダを実装すると書いてあった．プレースホルダの例も README.md に載っている．以下にサンプルとして template.html を載せる． や //diff2html-highlightCode などをプレースホルダとして埋め込んでいる．

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/github.min.css">
    <link rel="stylesheet" href="./template.css">
    <!--diff2html-css-->
    <!--diff2html-js-ui-->
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const targetElement = document.getElementById('diff');
        const diff2htmlUi = new Diff2HtmlUI(targetElement);
        //diff2html-fileListToggle
        //diff2html-synchronisedScroll
        //diff2html-highlightCode
      });
    </script>
  </head>
  <body>
    <div class="header">
      <h1>kakakakakku/redash-hands-on</h1>
      <img src="./images/logo.png">
    </div>
    <div id="diff">
      <!--diff2html-diff-->
    </div>
  </body>
</html>

センタリングをするサンプル CSS template.css も載せる．

.header {
  text-align: center;
}

img {
  width: 200px;
  text-align: center;
}

diff2html を実行すると，独自フォーマットを使えるようになった．

f:id:kakku22:20200427121155p:plain

まとめ

git diff の結果を GitHub プルリクエストのようなインタフェース (HTML) に変換する場合は diff2html-cli が便利！最近まさに diff2html-cli を使う場面があって導入した．HTML を公開するシナリオだと独自フォーマットを使うと良さそう．

github.com