2012-11-27

[blog] ソースコード表示を SHJS に乗り換えました

ブログのコードを見やすいように予約語や文字列リテラル、数値リテラルなど文法に沿って色付きにしてくれるスクリプトとして長らく google-code-prettify を使っていましたが、Internet Explorer 10 で改行が消滅して表示がおかしくなっている (2011年6月版で改行が LF のみの場合に変になることを確認) のを発見したので、代わりに SHJS を使ってみることにしました。

SHJS には google-code-prettify と違って言語の自動解析機能が付いていない所が気に入りました。対応言語も一通り揃っていて、付属のカラーテーマも色々あって楽しいです。行番号を付加する機能は付いていません。

使い方本体と言語定義ファイルを読み込み、コードを pre の中に書いて class を言語定義ファイルに合わせて sh_LANGUAGE とするだけです。例えば JavaScript なら sh_javascript とすればよいです。

このブログでは現在カラーテーマは whitengrey になっています。
SHJS を SHJS で表示した例:

/*
SHJS - Syntax Highlighting in JavaScript
Copyright (C) 2007, 2008 gnombat@users.sourceforge.net
License: http://shjs.sourceforge.net/doc/gplv3.html
*/

if (! this.sh_languages) {
  this.sh_languages = {};
}
var sh_requests = {};

function sh_isEmailAddress(url) {
  if (/^mailto:/.test(url)) {
    return false;
  }
  return url.indexOf('@') !== -1;
}

function sh_setHref(tags, numTags, inputString) {
  var url = inputString.substring(tags[numTags - 2].pos, tags[numTags - 1].pos);
  if (url.length >= 2 && url.charAt(0) === '<' && url.charAt(url.length - 1) === '>') {
    url = url.substr(1, url.length - 2);
  }
  if (sh_isEmailAddress(url)) {
    url = 'mailto:' + url;
  }
  tags[numTags - 2].node.href = url;
}

SHJS - Syntax Highlighting in JavaScript

2014/08/10 追記
さらに Highlight.js に乗り換えました。