Feel Physics Backyard

HoloLensの出張授業をする会社で、教材を開発しています

090615-ブログでコードを見やすく highlight.jsが手っ取り早い

090615code

ブログでプログラムコードを見やすくするには、highlight.jsというものを使うのが手っ取り早い。具体的には、コードを挿入したい記事の最初に以下のコードを挿入する。

<script type="text/javascript" src="http://your.domain/highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
<link rel="stylesheet" href="http://your.domain/default.css" />

あとは見せたいコードを以下のタグで囲めばよい:

<pre><code>・・・・・</code></pre>

注意点としては、以下の通り:

  • スタイルシートを付けないと色が付かない。スタイルシートはダウンロードしたフォルダの中の「styles」というフォルダにいくつか入っている。どれか1つ選んでアップロードしなければならない。
  • 実際に使うJavaScriptファイルは「highlight.js」ではなくて「highlight.pack.js」である(細かい違いは筆者にもわからない。ちなみに筆者は結果オーライな人間である)。
  • 一般のブログはサブタイトル部分にもコードを挿入できるが、ここに上のコードを入れても、どうもうまく動かない。毎回、記事に入れるしかないようである。これまた、筆者は「動いているから良し」としてしまう性格である。