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

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

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

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

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

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

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

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

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

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

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

補足

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

  
<script>

  alert('Hello!');

</script>
  

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