SyntaxHighlighter | SyntaxHighlighterの基本 | 言語別のJSファイルとテーマ適用用CSSファイル

Tags:

SyntaxHighlighterを使用するには、ソースコードを記述するHTMLファイルでいくつかの必要なファイルを読み込む必要がある。ここでは、必要なファイルを読み込む方法について説明する。

JavaScriptファイルの読み込み

JavaScriptファイルは、必須のshCore.jsファイルと、使用するプログラミング言語に応じたJavaScriptファイルを読み込む。どの言語でどのファイルを読み込む必要があるかは、次の表を参照する。

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	csharp, 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

たとえば、PHPのソースコードを記述する場合はshBrushPhp.jsを読み込み、HTMLのソースコードを記述する場合はshBrushXml.jsを読み込む。実際の記述方法は次のとおりである。

<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushPhp.js"></script>

同じHTMLファイルで複数の言語のソースコードを記述する場合は、必須ファイルと必要な数のJavaScriptファイルを読み込む。次はHTMLソースコードとCSSソースコードを記述する場合の例である。

<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushCss.js"></script>
<script src="../scripts/shBrushXml.js"></script>

読み込むファイルは、使用するWebサーバーへ直接アップロードするか、CDNを利用して読み込む。

CSSファイルの読み込み

CSSファイルは、必須のshCore.cssファイルと、使用するテーマに応じたCSSファイルを読み込む。ダウンロードしたファイルのscriptディレクトリに含まれるファイルを見ると、テーマはDefault、Django、Eclipse、Emacs、FadeToGrey、MDUltra、Midnight、RDarkの8種類が用意されている。

Theme name	File name	Coreを含む
Default	shThemeDefault.css	shCoreDefault.css
Django	shThemeDjango.css	shCoreDjango.css
Eclipse	shThemeEclipse.css	shCoreEclipse.css
Emacs	shThemeEmacs.css	shCoreEmacs.css
FadeToGrey	shThemeFadeToGrey.css	shCoreFadeToGrey.css
MDUltra	shThemeMDUltra.css	shCoreMDUltra.css
Midnight	shThemeMidnight.css	shCoreMidnight.css
RDark	shThemeRDark.css	shCoreeRDark.css

CSSファイルにはshCoreXXX.cssとshThemeXXX.cssの2種類がある。shCoreXXX.cssファイルは、必須のshCore.cssと対応するshThemeXXX.cssを結合したファイルである。たとえばDefaultテーマを適用するには、shCore.cssとshThemeDefault.cssの両方を読み込むか、shCoreDefault.cssだけを読み込めばよい。

複数のテーマを適用して切り替える場合を除き、shCoreXXX.cssファイルを1つ読み込む。実際の記述方法は次のとおりである。

<link rel="stylesheet" href="../css/shCoreDefault.css"/>

CSSファイルも、使用するWebサーバーへ直接アップロードするか、CDNを利用して読み込む。

SyntaxHighlighter.all()の実行

必要なファイルを読み込んだ後、SyntaxHighlighter.all()を一度実行する必要がある。

<script type="text/javascript">
  SyntaxHighlighter.all();
</script>

ダウンロードしたファイルに含まれるHTMLサンプルコードでは、<head></head>の中に記述されている。

必要な記述のまとめ

JavaScriptファイルとCSSファイルを読み込み、SyntaxHighlighter.all()を実行するまでの記述をまとめると次のようになる。

<html>
<head>
  <script src="../scripts/shCore.js"></script>
  <script src="../scripts/shBrushPhp.js"></script>
  <link rel="stylesheet" href="../css/shCoreDefault.css" type="text/css" />
  <script type="text/javascript">
    SyntaxHighlighter.all();
  </script>
</head>
<body>
...
</body>
</html>

これで準備は完了である。各ファイルのパスは、アップロードしたファイルの場所に合わせて変更して使用する。