コードを色をつけて奇麗に表示 - 「highlight.js」

コード部分の色付け

• Markdownの中では、コードを「```」で書きます
• 「marked.js」でMarkdownをパースすると、コードと認識しブロック表示します
• ただ、ブロック表示のみで、言語に沿った色付けなどを行う機能はありません
• そこでKnowledgeでは、「highlight.js」というライブラリでコードに色づけして見やすくしています

ライブラリの取得

• bowerで取得します

"highlightjs": "8.3.0"

bower install

• ライブラリのウェブサイトは以下になります

ライブラリの利用の指定

• bowerで取得したライブラリを読み込む

<link rel="stylesheet" href="bower/highlightjs/styles/default.css" />

<script type="text/javascript" src="bower/highlightjs/highlight.pack.js"></script>

ハイライト表示

• 画面表示の際に、hljs.initHighlightingOnLoad()を実行します

• すると<code>タグの部分がハイライトされて表示されます

• サンプルソース（Javascript）

$(document).ready(function(){
    hljs.initHighlightingOnLoad();
});

• サンプルソース（HTML）

<pre><code>
  public class Test {
    public static void main(String[] args) {
      System.out.println( "test;" );
    }
  }
</code></pre>

ハイライト表示のスタイル変更

• 現在はdefaultを使っています
• 読み込むスタイルを変更すると、ハイライト表示の部分が切り替わります
  • zenburn.css とか良い感じかも

<!-- これをやめて
<link rel="stylesheet" href="bower/highlightjs/styles/default.css" />
-->
<!-- こっちにする -->
<link rel="stylesheet" href="bower/highlightjs/styles/zenburn.css" />

以上です。