ソースコードやテキストファイルの種類に応じてテキストがハイライト表示

ブログに掲載する、技術的な内容はおもにコードが多いので
プログラムなどのコードをハイライトにする「google-code-prettify」を
紹介したいと思います。

google-code-prettifyの使い方

ヘッダでgoogle-code-prettifyのJavaScriptファイルを指定する

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&amp;skin=sons-of-obsidian"></script>

ハイライトのやり方

<pre class="prettyprint">
<?php
phpinfo();
?>
</pre>

コードは<pre>タグで囲んで、HTML編集で該当するコンテンツ部分に追加します。また、ハイライトするコードは変換が必要です

言語を指定してハイライトをする

基本的に「class="prettyprint"」を指定するだけで、自動的に言語に合わせた色づけをしてくれます。もし言語を指定したい場合はclass属性を以下のように変更してください。

<pre class="prettyprint lang-php">
<?php
phpinfo();
?>
</pre>

見ての通り、class属性を「prettyprint lang-○○」と指定することで言語指定ができます。指定できる言語は以下の通りです。

lang-c
lang-java
lang-python
lang-bash
lang-sql
lang-html
lang-xml
lang-css
lang-js
lang-ruby
lang-php
lang-perl

行番号付き

<pre class="prettyprint linenums">
<?php
phpinfo();
echo 'Hello World';
?>
</pre>

コード記述注意点

一点だけ注意する必要があるのは「<」と「>」だ。「<」と「>」はそのまま解釈されるので、HTML文書にコピーしたあとで「<」と「>」に変換しておく必要がある。たとえばXML文書を掲載する場合は、リスト7のように「<」「>」を「<」「>」に変換しておく。