2013/08/28

ブロガー必見!SyntaxHighlighterを使ってソースコードを読みやすく表示する方法

ブロガー必見!SyntaxHighlighterを使ってソースコードを読みやすく表示する方法

エディタのようにソースコードを読みやすく表示する方法をご紹介します。
「SyntaxHighlighter」というツールがあります。
これはJavascriptとCSSで作られていて、行番号をつけたり、特定の行をハイライトしたりなど、ソースコードを読みやすく表示してくれるツールです。

目次

「SyntaxHighlighter」のダウンロード

まずは下記のサイトから「SyntaxHighlighter」をダウンロードします。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
(今回使用するバージョンは「SyntaxHighlighter 3.0.83」です。)

SyntaxHighlighter_3.0.83.zip 解凍後の中身

SyntaxHighlighter_3.0.83.zip

ファイルのアップロード

以下のファイルをアップロードします。

  • ・shCore.css
  • ・shCoreDefault.css
  • ・shThemeDefault.css
  • ・shCore.js
  • ・shBrushXml.js(←使用する言語のjsファイル※複数可)

必要ファイルの読み込み

<head></head>内に以下のように記述します。

<link type="text/css" rel="stylesheet" href="styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css" />
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css" />
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>(←使用する言語のjsファイル※複数可)
<script type="text/javascript">SyntaxHighlighter.all();</script>

実際の記述方法

<body></body>内に以下のように記述します。

<pre class="brush:識別子;">
ソースコード
</pre>

pre要素内に記述する際、「<」「>」はタグとして解釈されてしまうため、エスケープする必要があります。

<pre class="brush:html;">
&lt;p&gt;
ソースコード
&lt;/p&gt;
</pre>

「<」「>」を使用する場合は上記のような記述になります。

特定の行をハイライト

特定の行をハイライトしたい場合は、highlightを指定します。

<pre class="brush:html; highlight:2;">

2行目を指定しました。

<link type="text/css" rel="stylesheet" href="styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css" />
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css" />
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>(←使用する言語のjsファイル※複数可)
<script type="text/javascript">SyntaxHighlighter.all();</script>

このように、指定した行のハイライト表示を行うことができます。

<pre class="brush:html; highlight:[2,5];">

このように括弧内にカンマで区切って指定することで、複数行の指定もできます。

classに指定する識別子一覧

Brush nameBrush aliasesFile 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

CSSのカスタマイズ

行を互い違いに色分けすることもできます。
「shCoreDefault.css」を開いて、231~236行目を編集します。

.syntaxhighlighter .line.alt1 {
    background-color:#f8f8f8!important;
}
.syntaxhighlighter .line.alt2 {
    background-color:#ffffff!important;
}

と書き換えます。
色は好きな色を指定して構いません。

デフォルトのままだと、全行の背景色は白になっています。
好みで色分けを行ってください。

【変更前】

【変更後】

まとめ

SyntaxHighlighterを使うと、行番号が付加されたり、特定の行をハイライトしたりすることもできます。
ソースコードを解説する際に場所を示しやすくなり、「説明する」という場面でとても役に立ちます。

ソースコードを掲載する際には是非活用してみてはいかがでしょうか?