hnakamur’s blog

ものすごい勢いで忘れる私のために未整理でもいいからとりあえずメモ

2011-12-03

google-code-prettifyの設置

16 Free Javascript Code Syntax Highlighters For Better Programmingで見つけたgoogle-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hostingを設置してみました。これを選択した理由は単に正規表現でキーワードをマッチさせる方式より高度な判定を行っているからです。

Javascript code prettifierを参考に設定します。
htmlの</head>の前に以下の2行を追加します。
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
そして、<body>onload="prettyPrint()"を追加します。Bloggerの場合は管理画面の[Template]の[Backup/Restore]でテンプレートのXMLをダウンロード、編集、アップロードします。

使い方は<pre><code>class="prettyprint"を追加します。Javascript code prettifierからリンクされている4.6.11 The code element — HTML5: Edition for Web Authorsでは<pre><code class="language-html">という書き方が紹介してあるので、<pre>内で言語を指定する場合は<pre class="prettyprint"><code class="language-html">という書き方にしようと思います。

ブログ アーカイブ