サーバー不要でコードをハイライトする「code-prettify」

コードをハイライトするスクリプトには、GitHub - gadicc/meteor-SyntaxHighlighter: Alex Gorbatchev SyntaxHighlighter, *client-side*を利用していた。関連ファイルは、レンタルサーバーに置いていたワケであるが、このサーバーを解約することにした。よって、サーバーを必要としないGitHub - google/code-prettify: Automatically exported from code.google.com/p/google-code-prettifyに乗り換えることにした。

使用方法は簡単である。

[<head>] ~ [</head>] の間に、以下のコードを挿入する。

[<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'></script>]

Prettify Themes Gallery

スキンは上から選択する。[skin=xxxxxx] で定義すればよい。

そして、ハイライトしたいコードを
[<pre class="prettyprint linenums">] ソースコード [</pre>] で括るだけ。

表示例
function prepZooms() {
 if (! document.getElementsByTagName) {
  return;
 }
 var links = document.getElementsByTagName("a");
 for (i = 0; i < links.length; i++) {
  if (links[i].getAttribute("href")) {
   if (links[i].getAttribute("href").search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) {
    if (links[i].getAttribute("rel") != "nozoom") {
     links[i].onclick = function (event) { return zoomClick(this, event); };
     links[i].onmouseover = function () { zoomPreload(this); };
    }
   }
  }
 }
}

コードの種類は自動判定されるので、便利である。
最終更新日: