読者です 読者をやめる 読者になる 読者になる

Knowledge

オープンソースで情報共有のサービス「Knowledge」を作っています。ブログでは、サービスの説明や開発で得た情報などを書いていきます。https://support-project.org/knowledge_info/index

コードを色をつけて奇麗に表示 - 「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();
});
<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" />

以上です。