SyntaxHighlighter3の導入

2015-02-16 14:30:53

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

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フォルダ内のファイル名を見ればだいたいわかる。

対応言語	キーワード(どれか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>サンプル２</p>
<p>サンプル３</p>
</pre>

ちなみに、<pre>タグの中の「<」「>」は、それぞれ「<」「>」と記述するようにする。
<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>

としておく

共有:

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

CSSを修正する

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

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

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

共有: