SyntaxHighlighter | SyntaxHighlighter基本 | SyntaxHighlighterのダウンロード

SyntaxHighlighterを使用するには、必要なJavaScriptファイルとスタイルシートが定義されたファイルをダウンロードし、適用したいWebサーバーにアップロードする必要がある。ここでは、SyntaxHighlighterで使用するファイルをダウンロードする方法について説明する。

SyntaxHighlighterのダウンロード

SyntaxHighlighterの公式サイトは次のとおりである。

http://alexgorbatchev.com/SyntaxHighlighter/

2019年12月時点で、最新バージョンはSyntaxHighlighter 3.0.83とされている。ダウンロードするには、画面右上に表示されている"download"と書かれたリンクをクリックする。

GitHub画面が表示される。

ここでreleasesと書かれた場所をクリックする。GitHubのリリース画面へ移動する。

公式サイトでは最新バージョンが3.0.83となっているが、ここでは3.0.90が最新になっている。内容を読むとセキュリティパッチのようだが、ダウンロードしてみるとリリースファイルではなく開発版のコードが入っている。正式にリリースされたものではなさそうである。

少し下へスクロールすると3.0.83が見えるので、このバージョンをダウンロードする。

ダウンロードは、下部のSource codeリンクをクリックすると"syntaxhighlighter_3.0.83.zip"ファイルが取得できる。

ダウンロードしたファイル一覧

ダウンロードしたファイルを展開すると、次のようなファイルが含まれている。

$ ls -al
total 41
drwxr-xr-x 1 kimkc 197121  0 12월 13 00:17 ./
drwxr-xr-x 1 kimkc 197121  0 12월 13 00:17 ../
-rw-r--r-- 1 kimkc 197121 72  7월  2  2010 .hgignore
drwxr-xr-x 1 kimkc 197121  0 12월 13 00:17 build/
drwxr-xr-x 1 kimkc 197121  0 12월 13 00:17 compass/
drwxr-xr-x 1 kimkc 197121  0 12월 13 00:17 demos/
drwxr-xr-x 1 kimkc 197121  0 12월 13 00:17 scripts/
drwxr-xr-x 1 kimkc 197121  0 12월 13 00:17 styles/
drwxr-xr-x 1 kimkc 197121  0 12월 13 00:17 tests/
$

実際に必要なのは、“scripts"ディレクトリと"styles"ディレクトリの中にあるファイルである。

“scripts"ディレクトリには、プログラミング言語ごとのJavaScriptファイルが入っている。

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

“styles"ディレクトリには、ソースコードをどの色で表示するかというテーマが定義されたスタイルシートファイルが入っている。さまざまなテーマが用意されているので、好みのテーマを選んで使用できる。テーマはプログラミング言語ごとに共通である。

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

別のページで詳しく説明するが、この中から必要なファイルだけをHTMLファイルで読み込んで使用すればよい。

そのほか、“test"ディレクトリには簡単な例が入っている。別途設定しないと実行されないが、どのように書くかの参考にはなる。

$ ls -al
total 35
drwxr-xr-x 1 kimkc 197121    0 12월 13 00:17 ./
drwxr-xr-x 1 kimkc 197121    0 12월 13 00:17 ../
-rw-r--r-- 1 kimkc 197121   23  7월  2  2010 .rvmrc
drwxr-xr-x 1 kimkc 197121    0 12월 13 00:17 brushes/
-rw-r--r-- 1 kimkc 197121 4048  7월  2  2010 brushes_tests.html
drwxr-xr-x 1 kimkc 197121    0 12월 13 00:17 cases/
-rw-r--r-- 1 kimkc 197121  820  7월  2  2010 commonjs_tests.js
drwxr-xr-x 1 kimkc 197121    0 12월 13 00:17 js/
-rw-r--r-- 1 kimkc 197121 6597  7월  2  2010 syntaxhighlighter_tests.html
-rw-r--r-- 1 kimkc 197121 3755  7월  2  2010 theme_tests.html
-rw-r--r-- 1 kimkc 197121  276  7월  2  2010 webrick.rb
-rwxr-xr-x 1 kimkc 197121   26  7월  2  2010 webrick.sh*