ソースコードを綺麗に表示できるプラグインSyntaxHighlighterの使用方法

2013年12月24日 00時31分

201312240031HCSW00.png

はじめに

ウエブ上で、CSS/HTML/Bash/Perlなどのソースコードを表示する時に以前は、preタグを使ったCSSで装飾するのが一般的でした。今回は、ソースコードの装飾に特化したSyntaxHighlighterの使用法を解説します。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエアバージョン
OSWindows 7 Ultimate 32bit
CygwinSetup Version 2.831

SyntaxHighlighterの設置方法

  1. 環境設定

    高速スライダーのJQueryプラグインFlexSlider2の使用方法と同じ要領でダウンロードします。 

    $ cd /tmp/demo
$ wget -q http://alexgorbatchev.com/SyntaxHighlighter/download/syntaxhighlighter_3.0.83.zip
$ unzip -q syntaxhighlighter_3.0.83.zip
$ rm -f syntaxhighlighter_3.0.83.zip
$ mv syntaxhighlighter_3.0.83 syntaxhighlighter
  2. 適用スタイルの指定

    SyntaxHighlighterには、デフォルトスタイルを含め、８種類のスタイルシートが用意されていますので、使用するスタイルシートを決めます。

    スタイル選択 

    テキスト1
テキスト2
テキスト3

    #!/bin/sh
echo "テキスト1"
echo "テキスト2"
echo "テキスト3"

    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="syntaxhighlighter/styles/shCore.css" rel="stylesheet">

    .syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  3. HTMLの作成

    使用するスタイルを決めたら、HTMLを作成します。
    ここでは、shThemeEmacs.cssを使用します。 

    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>017-1</title>
    <link href="syntaxhighlighter/styles/shCore.css" rel="stylesheet">
    <link href="syntaxhighlighter/styles/shThemeEmacs.css" rel="stylesheet">
  </head>

  <body style="width: 720px;">
    <pre class="brush:text">
    テキスト1
    テキスト2
    テキスト3
    </pre>
    <script src="syntaxhighlighter/scripts/shCore.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushAppleScript.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushAS3.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushBash.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushColdFusion.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushCss.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushDelphi.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushDiff.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushErlang.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushGroovy.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushJavaFX.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPerl.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPlain.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPowerShell.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushPython.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushRuby.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushSass.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushScala.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushSql.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushVb.js"></script>
    <script src="syntaxhighlighter/scripts/shBrushXml.js"></script>
    <script type='text/javascript'>SyntaxHighlighter.all();</script>
  </body>
</html>

    6～7行目では、スタイルシートを指定しています。なお、shBrushCore.cssは必ず指定する必要があります。

    16～41行目では、書式ごとのjsファイルを指定します。ここでは、全てのjsファイルを指定していますので、SyntaxHighlighterがサポートする全ての言語の装飾を行うことができます。

    42行目では、指定された書式をロードしますので、忘れずに実行します。

    201312240031HCSW01.png
    デモは、017-1.htmlからご覧頂けます。
  4. Bootstrapと併用した際のズレ対応

    ここまでは、Bootstrapを用いないため不具合が発生していませんが、SyntaxHighlighterを使用する場合、多くの場合Bootstrapと併用すると思います。その場合、どのブラウザでページを表示しても、行と行番号にズレが生じることがあります。

    さきほど作成したHTMLに、BootstrapのCSSを追加して見ると、ズレが確認できます。 

    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>017-2</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="syntaxhighlighter/styles/shCore.css" rel="stylesheet">
    <link href="syntaxhighlighter/styles/shThemeEmacs.css" rel="stylesheet">
  </head>


      <body style="width: 720px;">
    <pre class="brush:text">
    テキスト1
    テキスト2
    テキスト3
    </pre>
    <script src="bootstrap.min.js"></script>
    <script src="syntaxhighlighter/scripts/shCore.js"></script>
    201312240031HCSW02.png
    ズレが発生する理由は、BootstrapとSyntaxHighlighterが使用しているcontainerクラスが競合しているためですので、SyntaxHighlighterのshCore.cssおよび、shCore.jsを下記のとおり修正します。 
    $ cd syntaxhighlighter/styles
$ cp -p shCore.css shCore.css.orig
$ vi shCore.css

    .syntaxhighlighter table td.code {
  width: 100% !important;
}
.syntaxhighlighter table td.code .shcontainer {
  position: relative !important;
}
.syntaxhighlighter table td.code .shcontainer textarea {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;

    .syntaxhighlighter table td.code .line {
  padding: 0 1em !important;
}
.syntaxhighlighter.nogutter td.code .shcontainer textarea, .syntaxhighlighter.nogutter td.code .line {
  padding-left: 0em !important;
}

    $ diff shCore.css.orig shCore.css

    84c84
< .syntaxhighlighter table td.code .container {
---
> .syntaxhighlighter table td.code .shcontainer {
87c87
< .syntaxhighlighter table td.code .container textarea {
---
> .syntaxhighlighter table td.code .shcontainer textarea {
107c107
< .syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
---
> .syntaxhighlighter.nogutter td.code .shcontainer textarea, .syntaxhighlighter.nogutter td.code .line {

    $ cd syntaxhighlighter/scripts
$ cp -p shCore.js shCore.js.orig
$ sed -i -e "s|container|shcontainer|g" shCore.js

    編集後、ページをリロードするとズレの解消を確認できます。

    201312240031HCSW03.png
    デモは、017-2.htmlからご覧頂けます。
    ファイルは、017.zipからダウンロードできます。

対応言語

SyntaxHighlighterが対応する言語は、 対応言語を参照して下さい。

SyntaxHighlighterを使用する際には、下記の書式で使用するエイリアスを指定します。 

<pre class="brush:エイリアス">
..
</pre>

オプション

SyntaxHighlighterを使用する際に、さまざまなオプションを指定できます。 オプションの詳細は、SyntaxHighlighter.defaultsに書かれていますが、ここでは、よく使うオプションについて解説します。

オプション概要使用例
auto-linksコードに含まれるURLをリンクとして表示します。 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <pre class="brush:html; auto-links:false;">
    <a href="http://xx.yy.zz/">XYZ</a>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
    </pre>
  </body>
</html>
collapseコードを折りたたんで表示します。 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <pre class="brush:html; collapse:true;"
    title="クリックして表示">
    <a href="http://xx.yy.zz/">XYZ</a>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
    </pre>
  </body>
</html>
first-lineコードの先頭行番号を指定する。 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <pre class="brush:html; first-line:10;">
    <a href="http://xx.yy.zz/">XYZ</a>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
    </pre>
  </body>
</html>
gutter行番号の表示・非表示を指定する。 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <pre class="brush:html; gutter:false;">
    <a href="http://xx.yy.zz/">XYZ</a>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
    </pre>
  </body>
</html>
highlight行をハイライト表示する。 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <pre class="brush:html; highlight:[2,3];">
    <a href="http://xx.yy.zz/">XYZ</a>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
    </pre>
  </body>
</html>
titleタイトルを表示する。 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <pre class="brush:html;" title="サンプル">
    <a href="http://xx.yy.zz/">XYZ</a>
    <p>テキスト1</p>
    <p>テキスト2</p>
    <p>テキスト3</p>
    </pre>
  </body>
</html>

▲