Node.js上のPrismでdiff-highlightを使う方法

Prismのdiff-highlightプラグインをNode.js上で使う方法です。

diff-highlightプラグインとは？

Prismのdiff言語では、行頭の+``-記号で差分のシンタックスハイライトがされます。diff-highlightプラグインはJavaScriptなどの任意の言語をハイライトしながなら差分のハイライトも同時行えるものです。

• Diff Highlight ▲ Prism plugins

Node.jsでdiff-highlightを使うには？

まず、diff言語をロードしておく必要があり、その上でprismjs/plugins/diff-highlight/prism-diff-highlightをロードするとプラグインが有効になります。

import loadLanguages from "prismjs/components/index";

loadLanguages("diff");
require("prismjs/plugins/diff-highlight/prism-diff-highlight");

JavaScriptの任意の言語をハイライトするには、Prism.highlightメソッドの第2引数をdiff言語に、第3引数をdiff-${言語名}にします。

import Prism from "prismjs";

const code = ` const a = 1;
-console.log(a);
+console.log(a + 1);`;
const html = Prism.highlight(code, Prism.languages.diff, "diff-js");

上のhtmlの値は次のように、行ごとにunchanged, deleted, insertedなどのクラスがつき、これが差分情報になります。Javascriptのトークンもそれごとにクラスがついているのが分かります。

<span class="token unchanged language-js"
  ><span class="token prefix unchanged"> </span
  ><span class="token keyword">const</span> a
  <span class="token operator">=</span> <span class="token number">1</span
  ><span class="token punctuation">;</span> </span
><span class="token deleted-sign deleted language-js"
  ><span class="token prefix deleted">-</span>console<span
    class="token punctuation"
    >.</span
  ><span class="token function">log</span
  ><span class="token punctuation">(</span>a<span class="token punctuation"
    >)</span
  ><span class="token punctuation">;</span> </span
><span class="token inserted-sign inserted language-js"
  ><span class="token prefix inserted">+</span>console<span
    class="token punctuation"
    >.</span
  ><span class="token function">log</span
  ><span class="token punctuation">(</span>a
  <span class="token operator">+</span> <span class="token number">1</span
  ><span class="token punctuation">)</span
  ><span class="token punctuation">;</span></span
>

スタイルを適用すると追加行と削除行に背景色がついているのが分かります:

See the Pen Prism diff-highlight by suin (@suin) on CodePen.

ちなみに上で使ったCSSは次の2つです:

• https://prismjs.com/themes/prism-okaidia.css
• https://prismjs.com/plugins/diff-highlight/prism-diff-highlight.css

注意点: 変更なしの行は半角スペースが必要

ハイライトするコードですが、変更なしの行は行頭にスペースを入れるのを忘れないようにしてください。次の例は、1〜2行目が正しくハイライトされないどころか、改行も失われてしまうので注意です。

const a = 1;
const b = 1;
+console.log(a + b);

正しくは、次のように1~2行目のconstの前にひとつ半角スペースを入れます。

 const a = 1;
 const b = 1;
+console.log(a + b);