アド企画 制作部
アド企画 制作部
 

SyntaxHighlighter3の導入

SyntaxHighlighter3の導入

WEBサイトやブログでプログラムなどのコードを紹介する時、JavaScriptを使ってキレイに表示・ストレスのないコピペ作業を実現してくれるものとして、「SyntaxHighlighter」なるものがある。

これがどうもSyntaxHighlighter2と3では、使い勝手が違う様子で少し手間取った。
今回は、SyntaxHighlighter3を導入してみた。

使用するファイルのダウンロード

まず、次のURLから、必要になるファイルをダウンロードして取得する。

http://alexgorbatchev.com/SyntaxHighlighter/

現時点では、最新バージョンが3.0.83だった。

CSSを修正する

表示にそんなにこだわるわけではないので、デフォルトのCSSファイルを使用する。
ダウンロードしたファイルを展開すると、中に「styles」というフォルダがある。
この中に色々な種類のCSSファイルがあって、お好みのモノをチョイスして使うことになる。

とりあえずデフォルトを使ってみる。
ファイル名に「Default」と入っているので、コレに違いない。

syntaxhighlighter_3.0.83\styles\shCoreDefault.css

SyntaxHighlighter_b

SyntaxHighlighter2の時(前に使ってみたの時)は、デフォルトで奇数行と偶数行が色分け表示されていた様な気もするが・・・気のせいかもしれない。このまま使ったのでは、すべてのラインが真っ白になる。
だって、background-color:white !important; ってバッチリ指定されているんだもの。

とりあえず気に入らないので、shCreDeault.cssを修正して、奇数行と偶数行を色分けして見やすくなるように修正する。

このファイルをコピーをとって別名ファイルを修正するのか、コピー(バックアップ)を取っておいて当該ファイルを直接修正するのかはおまかせする。ちなみに、元をコピーして「shCreDefault.css.bk2015mmdd」等としてとっておくのが私のクセである。

shCreDeault.cssの230目あたりの背景色指定部を、次の様に編集しておく。

.syntaxhighlighter .line.alt1 {
	background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
	/* 次の行をコメントアウトして、色指定 */
	/* background-color: white !important;*/
	background-color:#F0F0F0 !important;
}

ファイルをアップロードする

準備したファイルをサーバーにアップロードする。
私の場合はバージョン名も含めてフォルダごとアップロードした。

該当するページにlink・scriptを追加する

SyntaxHighlighterを使用したいページに、jsファイルとcssファイルを読み込むようにする。
読み込ませるjsファイルは、「scripts」というフォルダにズラリと入っている。
とりあえず

syntaxhighlighter_3.0.83\scripts\shCore.js

というファイルは必須で、後はWEBサイトで紹介したいソースコードの言語をチョイスして読み込ませる必要がある。
各言語に対応するファイルは、scriptsフォルダ内のファイル名を見ればだいたいわかる。

SyntaxHighlighter_c
対応言語 キーワード(どれか1つを) 「scripts」内のファイル名
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

例えば、HTMLとCSSのソースコードを表示させたい場合、<head>タグ内に

<html>
	<!-- ~ 略 ~ -->
	<head>
		<script src="http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
		<script src="http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>
		<script src="http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushCss.js"></script>
		<script>
			SyntaxHighlighter.all();
		</script>
		<!-- ~ 略 ~ -->
	</head>
	<body>
		<!-- ~ 略 ~ -->
	</body>
</html>

としておく。
実際にソースコードを記述する場所は、<pre>タグに次のような指定して記述する。


<pre class="brush:html; toolbar:false;">
<h1>サンプル</h1>
<p>サンプル2</p>
<p>サンプル3</p>
</pre>

ちなみに、<pre>タグの中の「<」「>」は、それぞれ「&lt;」「&gt;」と記述するようにする。
<pre>タグのclassに「brush:」に続けてキーワード名で言語を指定する。 (上のサンプルの場合は「html」。言語の種類とキーワードは、上記一覧表を参照)

まとめて全部読み込ませる

「どの言語を使うのか、その時になんなきゃわかんないよぉ」という事で、必要なjsファイルを自動で読ませる方法もある。
その場合、<head>部に次の様に指定をして、

<head>
	<script src="http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
	<script src="http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shAutoloader.js"></script>
	<!-- ~ 略 ~ -->
</head>

さらに、bodyタグを閉じる前に

<!-- ~ 略 ~ -->

<script>
SyntaxHighlighter.autoloader
(
"applescript            http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushAppleScript.js",
"actionscript3 as3      http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushAS3.js",
"bash shell             http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushBash.js",
"coldfusion cf          http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushColdFusion.js",
"cpp c                  http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushCpp.js",
"c# c-sharp csharp      http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushCSharp.js",
"css                    http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushCss.js",
"delphi pascal          http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushDelphi.js",
"diff patch pas         http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushDiff.js",
"erl erlang             http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushErlang.js",
"groovy                 http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushGroovy.js",
"java                   http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushJava.js",
"jfx javafx             http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushJavaFX.js",
"js jscript javascript  http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js",
"perl pl                http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushPerl.js",
"php                    http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushPhp.js",
"text plain             http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushPlain.js",
"py python              http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushPython.js",
"ruby rails ror rb      http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushRuby.js",
"sass scss              http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushSass.js",
"scala                  http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushScala.js",
"sql                    http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushSql.js",
"vb vbnet               http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushVb.js",
"xml xhtml xslt html    http://xxx.com/xxx/syntaxhighlighter_3.0.83/scripts/shBrushXml.js"
);
SyntaxHighlighter.all();
</script>
</body>
</html>

としておく