TOP
MEMO
WEB
SyntaxHighlighter 3 設定方法

SyntaxHighlighter 3 設定方法

SyntaxHighlighter とは？
Download
SyntaxHighlighter の設置
SyntaxHighlighter の使い方
Option
SyntaxHighlighter の Style
Google Chromeでの不具合

SyntaxHighlighter とは

　SyntaxHighlighter 3 は、HTMLやCSSなどのソースコードを読みやすく表示してくれるJavaScriptライブラリです。HTMLやCSSはもちろん、PHP / Perl / Ruby / JavaScriptなど、多くの言語の構文強調表示に対応したスクリプトです。
　Version 3 になって、前バージョンと変わった所は、ソースのコピーに Flash を使用していたのを、ダブルクリックでソースを全選択できるようになりました。その他に、Autoloaderを使用して必要な強調表示用のスクリプトのみを読み込ませることが出来るようになりました。

Download

　SyntaxHighlighter の Download のページから「Click here to download.」をクリックしてダウンロードして下さい。
2012年1月21日時点でのバージョンは、3.083 です。

　ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

syntaxhighlighter_3.0.83.zip

index.html

./compass

　config.rb
　_theme_template.scss
　shCore.scss
　shCoreDefault.scss
　shCoreDjango.scss
　shCoreEclipse.scss
　shCoreEmacs.scss
　shCoreFadeToGrey.scss
　shCoreMDUltra.scss
　shCoreMidnight.scss
　shCoreRDark.scss
　shThemeDefault.scss
　shThemeDjango.scss
　shThemeEclipse.scss
　shThemeEmacs.scss
　shThemeFadeToGrey.scss
　shThemeMDUltra.scss
　shThemeMidnight.scss
　shThemeRDark.scss

./scripts

　shAutoloader.js
　shBrushAppleScript.js
　shBrushAS3.js
　shBrushBash.js
　shBrushColdFusion.js
　shBrushCpp.js
　shBrushCSharp.js
　shBrushCss.js
　shBrushDelphi.js
　shBrushDiff.js
　shBrushErlang.js
　shBrushGroovy.js
　shBrushJava.js
　shBrushJavaFX.js
　shBrushJScript.js
　shBrushPerl.js
　shBrushPhp.js
　shBrushPlain.js
　shBrushPowerShell.js
　shBrushPython.js
　shBrushRuby.js
　shBrushSass.js
　shBrushScala.js
　shBrushSql.js
　shBrushVb.js
　shBrushXml.js
　shCore.js
　shLegacy.js

./src

　shAutoloader.js
　shCore.js
　shLegacy.js

./styles

　shCore.css
　shCoreDefault.css
　shCoreDjango.css
　shCoreEclipse.css
　shCoreEmacs.css
　shCoreFadeToGrey.css
　shCoreMDUltra.css
　shCoreMidnight.css
　shCoreRDark.css
　shThemeDefault.css
　shThemeDjango.css
　shThemeEclipse.css
　shThemeEmacs.css
　shThemeFadeToGrey.css
　shThemeMDUltra.css
　shThemeMidnight.css
　shThemeRDark.css

./tests

　brushes_tests.html
　syntaxhighlighter_tests.html
　theme_tests.html
　commonjs_tests.js
　webrick.rb
　.rvmrc
　webrick.sh

　　./brushes

　　　sass.html

　　./cases

　　　001_basic.html
　　　002_brushes.html
　　　003_script_tag.html
　　　004_url_parsing.html
　　　005_no_gutter.html
　　　006_pad_line_numbers.html
　　　007_collapse.html
　　　007_collapse_interaction.html
　　　008_first_line.html
　　　009_class_name.html
　　　010_highlight.html
　　　011_smart_tabs.html
　　　012_server_side.html
　　　013_html_script.html
　　　014_legacy.html

　　./js

　　　qunit.css
　　　jquery-1.4.2.js
　　　qunit.js

　この中で必要になるのは、scripts と style フォルダです。

SyntaxHighlighter の設置

　ダウンロードしてきたファイルを解凍して scripts と style フォルダをアップロードして、下記コードを設定例のように書きます。

<link href="/sh/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="/sh/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>

　上記の設定例では、強調表示用のスクリプトに shBrushXml.js を選択しているので、HTMLやXML、XHTMLの強調表示が可能です。

ソースのコピー方法

　コードをダブルクリックすると SyntaxHighlighter が解除されて、全体が反転します。その状態で Ctrl-C を押してコピーしてください。
　コードの外をクリックして選択を解除すると SyntaxHighlighter が復活します。

SyntaxHighlighter の使い方

　表示したいソースを <pre> ～ </pre>でかこみ、HTMLの表示であれば、
class="brush: html;" を記入します。brush: の次に強調表示をしたい言語を記入します。

<pre class="brush: html;">
<p>　表示したいソースを <em>&lt;pre&gt; ～ &lt;/pre&gt;</em>でかこみ、HTMLの表示であれば、<br />
<em>class=&quot;brush: html;&quot;</em> を記入します。</p>
</pre>

<p>　表示したいソースを <em>&lt;pre&gt; ～ &lt;/pre&gt;</em>でかこみ、HTMLの表示であれば、<br />
<em>class=&quot;brush: html;&quot;</em> を記入します。</p>

　強調表示に必要な記述と File Name は以下の通りです。
使用する言語にあわせて書き換えて下さい。

言語	記述	File Name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.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	xml, xhtml, xslt, html, xhtml	shBrushXml.js

タイトルの設定

　コードにタイトルを付けることが出来ます。<caption>タグを使って表示されています。
記述方法は、

<pre class="brush: html;" title="TITLE">
<html>
    <body>
        <p>Hello, World!</p>
    </body>
</html>
</pre>

<html>
    <body>
        <p>Hello, World!</p>
    </body>
</html>

定義ファイルのオートロード機能

　各言語用のハイライト定義ファイル（ shBrushXXXX.js ）を動的にロードしてくれる機能が加わりました。shAutoloader.js を別途読み込んだ上で、SyntaxHighlighter.autoloader() を呼び出すことで有効になります。

<!-- /ここから/ -->
<link href="/sh/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="/sh/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="/sh/scripts/shAutoloader.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushXml.js"></script>
<!-- /ここまでは head内/ -->

<!-- /ここから/ -->
<script type="text/javascript">
SyntaxHighlighter.autoloader(
     "bash                      /sh/scripts/shBrushBash.js"
     ,"css                      /sh/scripts/shBrushCss.js"
     ,"php                      /sh/scripts/shBrushPhp.js"
     ,"diff                     /sh/scripts/shBrushDiff.js"
     ,"html xml xhtml           /sh/scripts/shBrushXml.js"
     ,"js jscript javascript    /sh/scripts/shBrushJScript.js"
     ,"perl pl                  /sh/scripts/shBrushPerl.js"
     ,"plain                    /sh/scripts/shBrushPlain.js"
     ,"python py                /sh/scripts/shBrushPython.js"
     ,"sql                      /sh/scripts/shBrushSql.js"
     ,"tt tt2                   /sh/scripts/shBrushTT2.js"
     ,"yaml yml                 /sh/scripts/shBrushYAML.js"
);
SyntaxHighlighter.all();
</script>
<!-- /ここまでは bodyuの前/ -->

　このように設定しておくと、各定義ファイルが必要になった時点でロードされるので、余分なファイルを読んでおく必要がありません。
　shBrushXml.js だけは予め別個に読み込んでおかないと html-script オプションが使えません。　また、SyntaxHighlighter.autoloaderの記述は、使用する箇所が全て読み込まれた後でないと、判別することが出来ないので、ページの下部に記述する必要があります。

Option

auto-links

　ソースコードの中にURLを記述したときに、そのURLにリンクを貼るかどうかを設定します。デフォルトは「true」です。オプションを「false」にするとクリックできなくなります。

<pre class="brush: html; auto-links: true;">
http://www.872style.com/
</pre>

<pre class="brush: html; auto-links: false;">
http://www.872style.com/
</pre>

class-name

CSSのクラスを設定することで、ハイライト要素のデザインを変更することができます。class属性は、半角スペースを挟むことで複数指定できます。

<style>
.test_style {
    border: 1px solid #999;
}
</style>

<pre class="brush: html" class-name:'test_style';>
	<strong>Hallo World!</strong>
</pre>

	<strong>Hallo World!</strong>

collapse

　初期状態でソースコードを折りたたむかどうかを指定できます。初期値は「false」で折りたたみません。「true」に設定すると折りたたみます。

<!-- /* SyntaxHighlighter 3 */ -->
<script type="text/javascript">
SyntaxHighlighter.autoloader(
     "bash                      /sh/scripts/shBrushBash.js"
     ,"css                      /sh/scripts/shBrushCss.js"
     ,"php                      /sh/scripts/shBrushPhp.js"
     ,"diff                     /sh/scripts/shBrushDiff.js"
     ,"html xml xhtml           /sh/scripts/shBrushXml.js"
     ,"js jscript javascript    /sh/scripts/shBrushJScript.js"
     ,"perl pl                  /sh/scripts/shBrushPerl.js"
     ,"plain                    /sh/scripts/shBrushPlain.js"
     ,"python py                /sh/scripts/shBrushPython.js"
     ,"sql                      /sh/scripts/shBrushSql.js"
     ,"tt tt2                   /sh/scripts/shBrushTT2.js"
     ,"yaml yml                 /sh/scripts/shBrushYAML.js"
);
SyntaxHighlighter.all();
</script>
<!-- /* END SyntaxHighlighter 3 */ -->

first-line

先頭行の番号を任意の番号に変更します。

<pre class="brush: html; first-line: 10;" title="設置例">
10番からの表示です。
</pre>

gutter

行番号欄の表示・非表示を切り替えることができます。「false」で非表示になります。

<pre class="brush: html; gutter: false;" title="設置例">
行番号を非表示にしています
</pre>

highlight

特定の行をハイライトして強調します。パラメータとして明記するときは、「1, 2, 3]のように配列で指定します。単に1行だけ指定するときは、その行番号を指定します。

<pre class="brush: html; highlight:[2,4,16,19];" title="設置例">
<!-- /* SyntaxHighlighter 3 */ -->
<script type="text/javascript">
SyntaxHighlighter.autoloader(
     "bash                      /sh/scripts/shBrushBash.js"
     ,"css                      /sh/scripts/shBrushCss.js"
     ,"php                      /sh/scripts/shBrushPhp.js"
     ,"diff                     /sh/scripts/shBrushDiff.js"
     ,"html xml xhtml           /sh/scripts/shBrushXml.js"
     ,"js jscript javascript    /sh/scripts/shBrushJScript.js"
     ,"perl pl                  /sh/scripts/shBrushPerl.js"
     ,"plain                    /sh/scripts/shBrushPlain.js"
     ,"python py                /sh/scripts/shBrushPython.js"
     ,"sql                      /sh/scripts/shBrushSql.js"
     ,"tt tt2                   /sh/scripts/shBrushTT2.js"
     ,"yaml yml                 /sh/scripts/shBrushYAML.js"
);
SyntaxHighlighter.all();
</script>
<!-- /* END SyntaxHighlighter 3 */ -->
</pre>

html-script

　htmlやxmlコードもハイライトします。利用するには事前に「shBrushXml.js」を読み込ませる必要があります。html 文中に様々なスクリプトが混在している場合に「true」と設定すればさらに見やすくなります。初期値は「false」です。

<pre class="brush: js; html-script: true;" title="設置例">
<!-- /* SyntaxHighlighter 3 */ -->
<script type="text/javascript">
SyntaxHighlighter.autoloader(
     "bash                      /sh/scripts/shBrushBash.js"
     ,"css                      /sh/scripts/shBrushCss.js"
     ,"php                      /sh/scripts/shBrushPhp.js"
     ,"diff                     /sh/scripts/shBrushDiff.js"
     ,"html xml xhtml           /sh/scripts/shBrushXml.js"
     ,"js jscript javascript    /sh/scripts/shBrushJScript.js"
     ,"perl pl                  /sh/scripts/shBrushPerl.js"
     ,"plain                    /sh/scripts/shBrushPlain.js"
     ,"python py                /sh/scripts/shBrushPython.js"
     ,"sql                      /sh/scripts/shBrushSql.js"
     ,"tt tt2                   /sh/scripts/shBrushTT2.js"
     ,"yaml yml                 /sh/scripts/shBrushYAML.js"
);
SyntaxHighlighter.all();
</script>
<!-- /* END SyntaxHighlighter 3 */ -->
</pre>

smart-tabs

　スマートタブのオンオフを切り替えます。

<pre class="brush: plain; smart-tabs: true;">
  hello there!    ya!
12    hello           ya!
</pre>
 
<pre class="brush: plain; smart-tabs: false;">
  hello there!    ya!
12    hello           ya!
</pre>

	hello there!	ya!
12	hello			ya!

	hello there!	ya!
12	hello			ya!

tab-size

タブサイズを調整、変更することができます。初期値は「4」です。

<pre class="brush: js; tab-size: 4;">
123	123	123
	1	2	3
</pre>
 
<pre class="brush: js; tab-size: 8;">
123	123	123
	1	2	3
</pre>

123	123	123
	1	2	3

123	123	123
	1	2	3

toolbar

ツールバー（Ver3では「？」のみ）を表示するかどうかを設定します。初期値は「true」、非表示にする場合は「false」にします。

<pre class="brush: html; toolbar: true;">
	ツールバーを表示しています。
</pre>
 
<pre class="brush: html; toolbar: false;">
	ツールバーを非表示にしています。
</pre>

    ツールバーを表示しています。

    ツールバーを非表示にしています。

Name	値	説明
auto-links	true	URLを記述した時にリンクを張るかどうか
class-name	''	ハイライト要素のデザイン変更
collapse	false	ソースコードの折りたたみ
first-line	1	行番号の初期値
gutter	true	行番号の表示
highlight	null	行のハイライト
html-script	false	htmlやxmlコードもハイライト
smart-tabs	true	スマートタブのオン・オフ
tab-size	4	タブサイズの変更
toolbar	true	ツールバーの表示・非表示

SyntaxHighlighter の Style

　SyntaxHighlighterでは、shThemeDefault.css を下記のStyleSeatに入れ替えることで、テーマを変えることが出来ます。

shThemeDefault.css
shThemeDjango.css
shThemeEclipse.css
shThemeEmacs.css
shThemeFadeToGrey.css
shThemeMDUltra.css
shThemeMidnight.css
shThemeRDark.css

<link href="/sh/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

Amazon アソシエイトとGoogle Chromeの組み合わせによる不具合

　Google ChromeでのみSyntaxHighlighterがうまく動作しないという不具合があると報告が出ています。
　「Amazon アソシエイト」で使用されているiframe要素（インラインフレーム）とGoogle Chromeという組み合わせではSyntaxHighlighterはうまく動作しないことがあるそうですが、SyntaxHighlighter.autoloader と SyntaxHighlighter.all(); の記述を </body> 前の方へ持って行くことで改善できます。
　これは、SyntaxHighlighterの表示箇所を読み込んでからでないと autoloader が機能しないのではないかと思います。