DevAchieve: ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす

導入編：DevAchieve: BloggerにソースコードをハイライトするSyntaxHighlighterを導入する

SyntaxHighlighterを使用してソースをカラフルに表示するには、
以下の二通りの方法で記述することができます。

preタグを使う
scriptタグを使う

preタグを使う

<pre class="brush: alias;">
// ココにソースを記述
</pre>

メリット：後述のscriptタグと違ってハイライトスクリプトが読み込まれなくてもテキストとして表示される。
デメリット：<以降がタグとして認識されるため<と書き換えなければならない。
Bloggerの人気の投稿ウィジェットに表示される記事の前文にpreタグまで含まれると
表示が狂うことがある。(何が原因かわからないけどコレのせいで最初からHTML/CSS組み直した(´Д⊂ヽ)
このせいで記事の公開が遅れました…。とりあえず対策は記事書いてすぐにコードを貼らないこと。

scriptタグを使う

<script class="brush: alias;" type="syntaxhighlighter"><![CDATA[
// ココにソースを記述
]]></script>

メリット：<以降がタグとして誤認されることがない。(</script>タグだけは</script>と記述する必要あり)
デメリット：scriptが読み込まれるまで非表示である。また、AutoPager系の自動ページ読み込みで
読み込まれたページはハイライトスクリプトが動かず、ソースコードが非表示のままになる。
また、RSSやモバイル表示でソースコードが非表示になる。

ということで個人的にpreタグを使いたいのでpreタグで説明していきます。
同様の設定はscriptタグでも出来るので適宜読み替えて下さい。

使用言語の設定

SyntaxHighlighterを使用する際には使用言語を設定する必要があります。
上のどちらの方法でも同じで、一行目の"alias"の部分を使用言語のエイリアスに書き換えます。

Brush name 使用言語	Brush aliases 言語のエイリアス	File name JSファイル名
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

SyntaxHighlighter - Bundled Brushes

例えばHTMLをシンタックスハイライトしたい場合は、以下のようにaliasをhtmlにします。

<pre class="brush: html;">
// ココにソースを記述
</pre>

特定の行を強調表示する

下のやつは1行目が強調表示されているのでブログなどで言及する時に
読者にわかりやすくて便利です。
これは以下のように行番号を指定することによって設定可能です。

<pre class="brush: alias; highlight: [1];">
// ココにソースを記述
</pre>

カンマ区切りで行数を指定することによって複数行を強調表示することも出来ます。

開始行番号の指定

元のソースコードを全て載せるとスペースを取りすぎるので
一部分を抜き出して、対応する行だけ説明したい時に使います。
前の記事で言うと、「縦スクロールバーを消す」あたりで使った機能です。

<pre class="brush: alias; first-line: 10;">
// ココにソースを記述
</pre>

1行目のように指定することによって行番号が10から始まるようになりました。

タイトル設定

<pre class="brush: alias;" title="タイトル設定">
// ココにソースを記述
</pre>

さっきまではclass属性の中に記述していましたが、title属性を使用しているので注意です。
ちなみにtitle属性の属性値を記述しなければタイトルは表示されません。
title=""のままタイトル未記入でも表示には影響されないということです。

その他の設定

ソースコードの折りたたみ・展開、行番号非表示、
ソースコードと同時にＨＴＭＬタグのハイライト表示、
タブサイズの指定、などの設定はコチラに載っています。
今日のPython: ブログ上でプログラムソースを表示する方法②

まとめ

よく使う上の3つのオプションを指定したのがコチラです。

<pre class="brush: alias; first-line: 1; highlight: [,];" title="">
// ココにソースを記述
</pre>

highlightとtitleは未指定でも表示に影響無いのでイチイチ消さなくても良いです。
後はaliasを自分の使用言語のエイリアスに書き換えて単語登録でもしておけばOK！

これであなたもブログでソースコードを綺麗に表示できます！

それでは。

ページ

2012/02/04

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす