エンジニアブログを始めてみたのはいいんですが、技術系の記事を書いてみてmuragonにはシンタックスハイライトの機能がないことに気づきました。

シンタックスハイライトは、コードをのせる場合にこんな感じで見やすくなります。

<script>
  alert('Hello!');
</script>

使用するライブラリはhighlight.jsにしてみました。ライセンスはBSDライセンスです。

highlight.jsを組み込むためには、cssとjsファイルを読み込む必要があります。
176種類の言語対応版はjsファイルサイズが400KB近くあったので、Commonのみ選択(46KB)してダウンロードしました。

スタイルは79種類もあるみたいなんですが、好みでoceanを選択。
※ファイルパスはmuragonに実装したままとなっていますので読みかえてください。

<link rel="stylesheet" href="/vendor/highlightjs/styles/ocean.css">

今回はレンダリングがブロックされないようscriptタグにasyncを指定し、windowのloadイベントでハイライトするよう実装しました。

<script src="/vendor/highlightjs/highlight.pack.js" async></script>
<script>
$(window).on('load', function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});
</script>

記事を書く際はpreとcodeタグで囲んでやることで、

<pre>
  <code class="html"><!--classの言語指定は省略可能です-->
&lt;script&gt;
  alert('Hello!');
&lt;/script&gt;
  </code>
</pre>

※HTMLの中にコードを書くので、HTMLエスケープが必要になるので注意です。

こんな感じで表示されます。

<script>
  alert('Hello!');
</script>

現在は当ブログでしかシンタックスハイライトを利用できませんが、ユーザーさんのニーズがあれば正式リリースしていきたいと思います。

補足

muragonのPC版エディタに難があり、現状では改行する場合はbrタグ、インデントする場合は を使用しないといけない状態です。orz

<pre>
  <code class="html">
&lt;script&gt;<br><!--エディタ保存時、brで改行しないと改行が消えてしまう-->
&nbsp;&nbsp;alert('Hello!');<br><!--brを使用した場合、先頭のスペースを&nbsp;にしないとスペースが無視されてしまう-->
&lt;/script&gt;
  </code>
</pre>

2017/11/27 追記 この問題は解消されました。