kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

git diff の結果を HTML に変換する「diff2html-cli」

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

github.com

インストール

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

$ npm install -g diff2html-cli

$ diff2html --version
5.1.0

今回はサンプルとして,GitHub リポジトリ redash-hands-onv7.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-css-->//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