言語毎のJSファイルと使用するテーマのCSSファイルを読み込む

広告

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

1.JavaScriptファイルの読み込み
2.CSSファイルの読み込み
3.SyntaxHighlighter.all()の実行
4.必要な記述まとめ

JavaScriptファイルは必須である shCore.js ファイルと、利用するプログラミング言語に対応したJavaScriptファイルを読み込みます。どの言語の時にどのファイルを読み込むのかは下記を参照して下さい。

Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.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サーバなどにアップロードしておいて下さい。

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

p2-1

CSSファイルには「shCore○○○.css」と「shTheme○○○.css」の2種類ファイルがありますが、「shCore○○○.css」は必須である「shCore.css」と「shTheme○○○.css」を合わせたファイルです。例えばDefaultテーマを読み込みたい場合は shCore.css と shThemeDefault.css の両方を読み込むか、shCoreDefault.css だけを読む込むことになります。

複数のテーマを読み込んで切り替えて利用したい場合を除けば「shCore○○○.css」のファイルを1つ読み込んで下さい。実際の記述方法は次のようになります。

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

CSSファイルについても読み込むファイルはご自身で使用されているWebサーバなどにアップロードしておいて下さい。

必要なファイルを読み込んだら「SyntaxHighlighter.all()」を一度実行する必要があります。

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

ダウンロードしたファイルに含まれるサンプルコードを参照すると、<head></head>の中で実行しているようです。

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

<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>

これで準備は完了です。なお各ファイルへのパスはアップロードしたファイルの場所に合わせて変更して下さい。

( Written by Tatsuo Ikura+ )