ソースコードを行番号付きで、きれいに表示する「SyntaxHighlighter」の導入と使い方

ソースコードをきれいに色分けしてくれる「SyntaxHighlighter」の導入と使い方です。
JavaScriptをサーバにアップロードする必要はありません。
JavaScriptが置いてあるリンク先を示すことで、簡単に導入できます。

実際に、このBloggerの「gogoToRoTAN」ブログに導入しました。
表示したソースコードの一部を強調させることも可能です。

「SyntaxHighlighter」は、エディタの色分けのように、きれいに表示してくれるスクリプトです。
対応コードは、以下のように、ほとんどのソースに対応しています。

ActionScript3
Bash
shell
ColdFusion
C#
C
C++
CSS
Delphi
Pascal
Diff
Erlang
Groovy
JavaScript
Jscript
Java
JavaFX
Perl
PHP
Plain
Text
PowerShell
Python
Ruby
Scala
Rails
SQL
Visual Basic
XML
HTML
XHTML
XSLT

また、表示するデザインも色々選べます。
もし、ソースコードを公開しているブログやWebサイトをお持ちでしたら、ぜひ導入をおすすめします。
ひとつ難点を上げれば、JavaScriptなので、表示が若干遅いことですね。

導入の方法（Bloggerの場合）

下記のコードを、テンプレートのHEAD部に挿入します。つまり<head>と</head>の間です。

<!-- SyntaxHighlighter start -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css" rel="stylesheet" type="text/css"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEmacs.css" rel="stylesheet" type="text/css"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js" type="text/javascript"></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter end -->

これだけで導入は終わりです。

上記の場合、デザイン(CSS)は、Emasc風のものを選択しています。
たくさんのテーマがあるので、お気に入りのテーマを選んで差し替えてください。

ソースコードの種類も、私がこれから使うであろうものしか導入していません。
ここも、使いたいソースコードのスクリプトを追加したり削除したりしてください。

Bloggerに導入する場合は、

SyntaxHighlighter.config.bloggerMode = true;

を忘れずに。

また、日本語表示対応や、行番号を途中から付けたい場合、Class名を変えたい場合などは、
config設定や、defaults設定を変更することで可能になります。
マウスオーバーで表示されるガイド（日本語対応したい部分）は、
うまく表示されないようです。バグ？？
本来なら、ソースコードにマウスを乗せると、印刷やコピーのアイコンが表示されると思います。

使い方

使い方は簡単です。下記のように、<pre>で囲み、ソースコードに対応したclassを指定します。

1	`<pre` `class="brush: ruby;"> pp "Hello World" </pre>`

"<" → <
"&" → &
">" → >

ある行を強調（ハイライト）したい場合は、下記のように、
行を指定（例：2行目と4行目）するだけです。

1	`<pre` `class="brush: plain; highlight: [2,4]">`

ちなみに、上記初めのコード例では、17行目を強調しています。

簡単ですね。ぜひ「SyntaxHighlighter」の導入をおすすめします。
いいですよ！

2011/03/27

HP作成支援ブログ

導入の方法（Bloggerの場合）

使い方

関連記事