コードのハイライト表示

 [Home] 投稿日 2015/02/28

google-code-pretty

google-code-pretty は Google 製のコード強調表示用 JavaScript ライブラリで、下記の場所からダウンロードできます。言語は自動的に判別します。
google code pretttify

使い方

 次のようにHTML内でJavaScriptコードとCSSを指定する。
<link href="./google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="./google-code-prettify/prettify.js"></script>
 bodyタグにonload="prettyPrint()"を追加する。
 preタグ内にハイライト表示するソースを書いて、そのタグのクラスをprettyprintにする。
 ソースコードの種類は自動的に判別される。色の設定はCSS(prettify.css)を変更することにより行う。
<body onload="prettyPrint()">
  ...
<pre class="prettyprint">
 ....
 ....
</pre>


表示例
/*****************************************************

    date test (dateTest.c)

 *****************************************************/
#include <sys/time.h>
#include <stdio.h>

int main()
{
  char buf[256];
  time_t t;
  struct tm* tim;

  time(&t);
  tim = localtime(&t);
  strftime(buf, sizeof(buf), "%Y-%m-%d %H:%M:%S", tim);
  puts(buf);
  return  0;
}



SyntaxHighlighter

SyntaxHighlighter は高機能なハイライト表示 JavaScript ライブラリです。言語は自動的に判別しないので、ブラシを言語に合わせて変更する必要があります。対応言語はあまり多くありませんが、見た目がきれいでハイライト表示も正確です。
SyntaxHighlighter

使い方

  1. shCore.js と shCore.cssをページに追加する。
  2. ブラシを追加する (例 JavaScriptならshBrushJScript.js)
  3. shCore.css と shThemeDefault.css をページに追加する。(shThemeDefault.css は他のスタイルでもよい)
  4. 下記のような <pre /> と <script /> を追加する。
  5. Call SyntaxHighlighter.all() JavaScriptメソッドをコールする。

<!-- 必須JSファイルを含める -->
      	<script type="text/javascript" src="js/shCore.js"></script>
      
      	<!-- ブラシをここに追加する。-->
      	<script type="text/javascript" src="css/shBrushJScript.js"></script>
      
      	<!-- 少なくともコアスタイルとデフォルトテーマを含める -->
      	<link href="css/shCore.css" rel="stylesheet" type="text/css" />
      	<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
      
      	<!-- ハイライトしたいコードを追加。この例はJavaScriptであり、brush: ** を変更する必要がある。-->
      	<pre class="brush: js">
      	function foo()
      	{
      	}
      	</pre>
      
      	<!-- 最後にハイライトするためのコードを実行する。 -->
      	<script type="text/javascript">
      		 SyntaxHighlighter.all()
      	</script>

表示例
/*****************************************************

    date test (dateTest.c)

 *****************************************************/
#include <sys/time.h>
#include <stdio.h>

int main()
{
  char buf[256];
  time_t t;
  struct tm* tim;

  time(&t);
  tim = localtime(&t);
  strftime(buf, sizeof(buf), "%Y-%m-%d %H:%M:%S", tim);
  puts(buf);
  return  0;
}


Highlight.js

Highlight.js は多くの言語に対応した JS ハイライト表示ライブラリです。言語は自動的に判別され、112言語に対応しているそうです。

Highlight.js
使い方
  1. 好みのスタイルとhighlight.pack.jsを呼び出す。
  2. onload時に初期化するコードをコールする。
  3. preとcodeで囲む

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

<pre><code>
 <!--  ここにコードを書く -->
</code></pre>


表示例


/*****************************************************

    date test (dateTest.c)

 *****************************************************/
#include <sys/time.h>
#include <stdio.h>

int main()
{
  char buf[256];
  time_t t;
  struct tm* tim;

  time(&t);
  tim = localtime(&t);
  strftime(buf, sizeof(buf), "%Y-%m-%d %H:%M:%S", tim);
  puts(buf);
  return  0;
}