こちらの記事を書いたとき、 Syntaxhighlighter V4 に YAML のブラシがないことに気づきました。 なので、YAMLのブラシを追加できないか調べてみた顛末をまとめておきます。
なお、はてなブログで Syntaxhighlighter v4 を使う話は、以前下記にまとめてますので、ご参考までに。
YAML ブラシ
SyntaxHgihlighter に Brushes and Themes というページがあり、そこに公式・非公式のブラシ一覧が載ってます。 ここを見ると、非公式としてですが YAML のブラシがあるようです。
GitHub - ErikWegner/brush-yaml
ということで、まずは、これを使ってみようと思います。
YAML ブラシのビルド
YAML ブラシのページを見ると SyntaxHighlighter のビルドの方法に従って、ビルドしてくれとあります。
Building · syntaxhighlighter/syntaxhighlighter Wiki · GitHub
なので、以前 SyntaxHighlighter V4 をビルドしたのと同じように試してみます。
mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d$ git clone https://github.com/ErikWegner/brush-yaml.git mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d$ cd syntaxhighlighter mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter$ ./node_modules/gulp/bin/gulp.js build --brushes=../brush-yaml/brush.js --theme=default [14:32:21] Failed to load external module @babel/register [14:32:21] Requiring external module babel-register [14:32:21] Using gulpfile ~/work/syntaxhighlighter.d/syntaxhighlighter/gulpfile.babel.js [14:32:21] Starting 'build'... [14:32:21] Unknown brush "../brush-yaml/brush.js". mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter$
うまくいきません。 ちなみに --build=all の場合は問題なくビルドできます。
指定方法を変えてみます。絶対パス
mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter$ ./node_modules/gulp/bin/gulp.js build --brushes=/home/mor/work/syntaxhighlighter.d/brush-yaml/brush.js --theme=default [14:34:07] Failed to load external module @babel/register [14:34:07] Requiring external module babel-register [14:34:08] Using gulpfile ~/work/syntaxhighlighter.d/syntaxhighlighter/gulpfile.babel.js [14:34:08] Starting 'build'... [14:34:08] Unknown brush "/home/mor/work/syntaxhighlighter.d/brush-yaml/brush.js". mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter$
うまくいきません。 公式のブラシは repos ディレクトリ以下にあるようなので、リンクを貼って
mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter$ cd repos/ mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter/repos$ ln -s ../../brush-yaml . mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter/repos$ cd .. mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter$ ./node_modules/gulp/bin/gulp.js build --brushes=repos/brush-yaml/brush.js --theme=default [14:36:18] Failed to load external module @babel/register [14:36:18] Requiring external module babel-register [14:36:19] Using gulpfile ~/work/syntaxhighlighter.d/syntaxhighlighter/gulpfile.babel.js [14:36:19] Starting 'build'... [14:36:19] Unknown brush "repos/brush-yaml/brush.js". mor@DESKTOP-RLA4CF1:~/work/syntaxhighlighter.d/syntaxhighlighter$
やっぱりうまくいきません。
docker で syntaxhighlighter V4 をコンパイル
困ったなと思っていたら、ブラシの生成一式を docker にまとめてくれている方がいらっしゃいました。
（以前の記事を書いた際に参考にした issues に docker のことを追記してくれてました。）
なので、これを試してみます。
[~/tmp] # docker pull crazymax/syntaxhighlighter [~/tmp] # mkdir syntax [~/tmp] # docker run -it --rm -v "$(pwd)/syntax:/syntaxhighlighter/dist" crazymax/syntaxhighlighter:latest
~/tmp/syntax というのがローカル側のディレクトリで、コンテナの /syntaxhighlighter/dist にマウントしています。
で、実行させると、
[~/tmp] # ls -l syntax/ total 880 -rw-r--r-- 1 admin administrators 94034 2018-08-24 12:10 index.html -rw-r--r-- 1 admin administrators 285507 2018-08-24 12:10 syntaxhighlighter.js -rw-r--r-- 1 admin administrators 407571 2018-08-24 12:10 syntaxhighlighter.js.map -rw-r--r-- 1 admin administrators 9094 2018-08-24 12:09 theme-default.css -rw-r--r-- 1 admin administrators 9264 2018-08-24 12:09 theme-django.css -rw-r--r-- 1 admin administrators 9474 2018-08-24 12:09 theme-eclipse.css -rw-r--r-- 1 admin administrators 9120 2018-08-24 12:09 theme-emacs.css -rw-r--r-- 1 admin administrators 9197 2018-08-24 12:09 theme-fadetogrey.css -rw-r--r-- 1 admin administrators 9118 2018-08-24 12:10 theme-mdultra.css -rw-r--r-- 1 admin administrators 9141 2018-08-24 12:10 theme-midnight.css -rw-r--r-- 1 admin administrators 9135 2018-08-24 12:10 theme-rdark.css -rw-r--r-- 1 admin administrators 10151 2018-08-24 12:10 theme-swift.css [~/tmp] #
のように、syntaxhighlighter のファイルが生成されています。docker実行中の画面を見ると、yamlのブラシも指定されているのが分かります。
[03:10:40] Starting 'build'... [03:10:50] Brushes: applescript, as3, base, bash, coldfusion, cpp, csharp, css, delphi, diff, erlang, groovy, haxe, java, javafx, javascript, perl, php, plain, powershell, python, ruby, sass, scala, sql, swift, tap, typescript, vb, xml, repos/brush-halcon/brush.js, repos/brush-IEC61131/brush.js, repos/brush-kotlin/brush.js, repos/brush-latex/brush.js, repos/brush-Makefile/brush.js, repos/brush-mel/brush.js, repos/brush-objective-c/brush.js, repos/brush-yaml/brush.js [03:10:50] Hash: 6ed82d7c6ef7b999f01e
なんで自分で試したときはうまくいかなかったのだろうか？
はてなブログに反映
作成した js ファイルを差し替えます。 はてな側では syntaxhighlighter の指定で
<pre class="brush: yaml">
と書くと、
のように無事に、YAMLもハイライト表示されるようになりました。
