2012年10月08日

シンタックスハイライト機能をカスタムJSで追加

シンタックスハイライトとは、コードを記述したときに色付けなどハイライトしてくれる事。ここlivedoorブログでもgoogle-code-prettifyというGoogle謹製のシンタックスハイライト機能が提供されているとの事なので、「DesignTemplate/CommonFile - livedoor Blog まとめサイト - livedoor Wiki(ウィキ)」と「Javascript code prettifier」を読みながら、そのJavaScriptコードをデザインテンプレート内のカスタムJSに貼付した。

カスタムJS(head内)部

<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/prettify.js"></script>

カスタムJS(body内)部

<script type="text/javascript">
  function init(event) {
    prettyPrint();
  }
  if (window.addEventListener) {
    window.addEventListener('load',init, false);
  } else if (window.attachEvent) {
    window.attachEvent('onload', init);
  } else {
    window.onload = init;
  }
</script>

デザインHTML部

<head>
....
<$HeadSectionCommon$>
<link rel="stylesheet" type="text/css" href="http://parts.blog.livedoor.jp/css/prettify.css" />
....
</head>

これでpre要素等にクラス名prettyprintを指定すれば、当該要素の中身がシンタックスハイライトされる。なお、Google本家ではクラス名lang-hogehogeは言語名)及びlinenums(行番号)も使えるのだが、livedoor提供の共通ファイルには、そこまでないっぽい。

5
m_hiro at 14:17 :Comments(0),TrackBack(0)
Categories : 日記/一般コンピュータ
このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

コメントする

このブログにコメントするにはログインが必要です。