highlight.jsの使い方

概要

highlight.jsはHTML、JavaScript、C++、C#、Java、Ruby、Python等のコードを、IDEのように色分けして表示する、JavaScriptのライブラリです。
BSD licenseのようです。

ダウンロード

ここから落とせます
http://softwaremaniacs.org/soft/highlight/en/

必要ファイル・ディレクトリ

以下のファイルを使用します

・languagesディレクトリ
・stylesディレクトリ
・highlight.pack.js

※うちの環境では、highlight.jsを呼んだら動かなくてハマった。packなら普通に動いた。。。

使い方

以下の3ステップです
1, CSSとJSを読み込む
2, initHighlightingOnLoadを呼ぶ
3, <pre><code></code></pre> で囲んだ部分にコードを書く


<head>
  <!-- stylesの中から好みにあったCSSを選んで、 -->
  <!-- 1, CSS、JavaScriptファイルを呼び出す -->
  <link rel="stylesheet" href="styles/default.css">
  <script type="text/javascript" src="highlight.pack.js"></script>

  <!-- 2, onLoad時にinitしてくれる機能を呼び出す -->
  <script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</head>

<body>
  <!-- 3, preとcodeで囲む -->
  <pre><code>
    <!--  ここにコードを書く -->
    <b>色分けして表示してくれる</b>
  </code></pre>
</body>

スタイルごとの表示例

クリックするとスタイルが変わります ascetic.css
dark.css
default.css
far.css
idea.css
magula.css
sunburst.css
vs.css
zenburn.css

表示例 (Python)


  print "Hello, world!"

表示例 (Java)


  import java.Math;
  class Test {
    public static void main(String[] args) {
      System.out.println( "Hello world;" );
    }
  }