【Google Blogger】ソースコードをきれいに表示するSyntaxHighlighterの記述方法やオプション設定について

ソースコードをきれいに表示してくれる「SyntaxHighlighter」の指定の仕方についてです。preタグやscriptタグを使って記述するとか、ソースコードのハイライト表示やタイトルを設定するなどのオプションの設定について記しておきます。

Bloggerブログでソースコードを記入

「ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve」に詳しい解説が載っています。ここではわたしなりに理解した内容を書き記しておきます。

1. ソースの記述方法
●preタグを使って記述
preタグを使った場合の記述例です。preタグの間の行（2行目）に表示したいコードを埋め込めば、表示したいコードが表示されます。


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

メリット：後述のscriptタグと違ってハイライトスクリプトが読み込まれなくてもテキストとして表示される。
デメリット：<以降がタグとして認識されるため&lt;と書き換えなければならない。
ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve

preタグを使うメリットとデメリットは上記のとおりです。表示するコード入力した文字列内の&、"、<、>を実体参照に変換する必要があります。上記のコードの表示部分を実態参照に変換したものを以下に表示するとこんな感じです。


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

ソースの実態参照変換分（文字列内の&、"、<、>）を変換するには、秋田さんこと「akiyan」さんのブログサイト「HTML実体参照変換」を使わせていただくと簡単に実態参照変換できます。すごく便利なので、ぜひお試しください！

●scriptタグを使って記述
scriptタグを使った記述例です。preタグと同様、2行目に表示したいコードを埋め込めば、表示したいコードが表示されます。


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

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



2. Brush nameの選択

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

SyntaxHighlighterを使用するには使用言語を設定する必要があるので、上記ソースコード表示の1行目<pre class="brush: c-sharp;">の「alias」部分を使用する言語形式に合わせて下記該当Brush aliases名に変更します。



Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	coldfusion	shBrushColdFusion.js
C++	cpp, c	shBrushCpp.js
C#	c-sharp, csharp	shBrushCSharp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
JavaScript	js, jscript, javascript	shBrushJScript.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	html, xhtml, xml, xslt	shBrushXml.js

SyntaxHighlighter - Bundled Brushes


3. オプションの設定
下記ソースコード表示の「class」に各種指定を行なうことで行番号の最初の番号指定やタイトル設定等を行なうことができます。


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



• 表示行番号の開始値を指定 → first-line: 3;
クラス属性に「first-line: 3;」を指定すると指定した値から行番号が振られます。左の例では行番号が3から始まるようになります。


• 特定の行をハイライト表示 → highlight:[1];
クラス属性に「highlight:[1];」を追加すると数値指定した行をハイライト表示することができます。カンマ区切りで[1,2,3]というように複数行を指定することができます。


• ソースコードにタイトルを付ける → title=""
class属性ではなく、title属性を使用してタイトルを設定することができます。

その他にもオプションが用意されています。詳しくは、「今日のPython: ブログ上でプログラムソースを表示する方法②」をご覧ください。

News Source Site

• SyntaxHighlighter
• Syntax Highlighter Scripts Generator ‹ Blogger Widgets | Tips | Tricks | Templates : Way2Blogging
• SyntaxHighlighter - Eclipse theme
• BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve
• ソースコードを美しく公開する方法 - 「SyntaxHighlighter」の使い方 | Stainless Note
• 今日のPython: ブログ上でプログラムソースを表示する方法②