gogoToRoTAN

ソースコードを行番号付きで、きれいに表示する「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 -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<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を指定します。 

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

<script> タグを使った書き方もありますが、こちらの<pre>を使った方が簡単です。
ただ、"<", "&", ">"などは、面倒ですが、&lt;等にエスケープ（置き換え）する必要があります。

  • "<" → &lt;
  • "&" → &amp;
  • ">" → &gt;

 

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

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

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

 

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

2011/03/27
HP作成支援 ブログ