ブログの SyntaxHighlight (シンタックスハイライト) を変更しました。

WordPress のプラグインである WP SyntaxHighlighter を使っていましたが、どうもハイライトする迄の時間がかかり過ぎてしばらく pre タグがそのまま表示されてダサいんですよね。

その為より良いものを導入するべく調べると、
highlight.js という便利なものを見かけました。

現在対応している言語の数が非常に多く、golang の様な決してメジャーであるとは言え無い言語でも対応しているのでそうそう対応言語で困る事は無さそうです。

そして格好良いスタイルが多く、SublimeText なスタイルもある為そういうのを探している人も安心です。Emacs のスタイルが見当らないのが少し不満なくらいです。

もちろん、導入も簡単です。

hilight.js の導入

導入したものは highlight.js というものですが、JS と CSS のみで構成されているので静的なページとかでも導入できますし、WordPress に導入する時もプラグインも要りません。

導入方法は、Crayonを捨てた。Syntax Highlightするならhighlight.jsが良さそう という記事を参照すると良いと思います。非常に丁寧に説明されているので分かり易いです。

悩んだ事

この Syntax Highlighter の問題では無く以前の Highlighter から症状が出てたのですが、
コードをタグで囲んだ時に空白行が消しとんでしまう問題が出ていました。

これが今使用しているマークダウン用のプラグインである Markdown on Save Improved の問題なのかなんなのか良く分からないので取りあえずで対処する方法を探しました。

実行結果を見ると、コードはキーワード毎に span タグを付けていたので
空の span タグで改行されると睨み、空白行と置き変えて対処しました。

適当なコード
<span></span>
適当なコード

こんな感じに書くと下記の様な感じになりました。

適当なコード

適当なコード

これで実際に対処は出来たので良いのですが、もっと良い方法がある様な気もするのでもやもやは残ります。

まとめ

レンダリングの邪魔をして欲しくないので、script タグと Highlight の実行行を /body 直前に置いたので少し色が付く迄の隙間時間にチラっと pre タグのスタイルが見えるのも気になります。

こういう微妙な所は、近い内にでも調べておこうと思います。