2つのJSONの差分を動的に表示する。シンタックスハイライトもする。powered by shiki

２つのJSON文字列の差分をシンタックスハイライト付きで表示したいケースがありました。 Zennでも同じ差分かつシンタックスハイライトができますね。下のようなコードブロックがそうです。 Zennでは行頭に+や-をつけることで差分としてハイライトされるようになっています。 このようなシンタックスハイライトかつ差分ハイライトを、2つのJSON文字列の差分に対して行いたいと思いました。つまり、差分を表示したい箇所に明示的かつ静的にマークしていくのではなく、2つのテキストから動的に差分を計算して差分ハイライトを表示してくれる機能です。 この記事ではその方法を紹介します。 なお、僕がJSONの差分を表示したかったのでJSONで例を出しますが、好きな言語で、なんならプレーンテキストでも応用可能です。好きなだけdiff表示してください。 先出し結論 jsdiffでJSONの差分トークンを取得し、shik

[tmatsuu]

記事の最後の方にあるリアルタイムに差分表示するサイト、めちゃ体験がいいな。Vimのdiff機能にこういう3ペインモードがほしい。あるだろうか。