highlight.jsとは

highlight.jsはソースコードをきれいにシンタックスハイライトしてくれるJavaScriptライブラリだ。しかもCrayon Syntax HighlighterのようにPHPではなくJavaScriptで動作するので、サーバー側に負荷がかからず高速に動作する。

しかし、このhighlight.jsは基本的にブロック要素（初期設定では<pre><code></code></pre>という2重タグ）を前提に考えられているため、この<code>のようにインラインのソースコードに適用できない。

どうせならインラインタグもシンタックスハイライトして表示したいので、やってみた。

JavaScript

通常、highlight.jsを利用するときは

<script>hljs.initHighlightingOnLoad();</script>

のように記述するが、これだと<pre><code>にのみ適用されてしまうので、これをすべての<code>がハイライトされるよう、下記のように修正する（要jQuery）。

<script>
$(document).ready(function() {
 $('code').each(function(i, block) { hljs.highlightBlock(block); });
});
</script>

これですべての<code>がハイライトされるが、<code>タグに自動で追加される.hljsクラスにdisplay:block;が含まれており、すべてがブロック要素として表示されてしまうので、これをCSSで打ち消してやる必要がある。

CSS

<style>
 code.hljs { display: inline; margin: 0 2px; padding: 1px 3px; }
 pre code.hljs { display: block; margin: 0; padding: .5em; }
</style>

code.hljsだけならdisplay:inline;、preの中のcode.hljsならdisplay:block;とした。marginやpaddingもそのままだと気持ち悪いので調整した。

都合によってfont-familyやfont-size、line-heightを調整するといい。

こんな感じで無事、すべての<code>タグがハイライトされるようになった。