ハピタス経由で、エクスペディア4.2% じゃらん2% 楽天1% DELL3%などなど、通常ポイントとダブルゲット! ここから登録で30ptプレゼント!

ソースコードを行番号付きで、きれいに表示する「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='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/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を指定します。

<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」の導入をおすすめします。
いいですよ!






0 Comments: