SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript

ソースコードをブログなどでそのまま記述すると、非常に見にくくなってしまったという経験はないでしょうか。

SyntaxHighlighter(シンタックスハイライト)は、ブログ上で読みにくくなってしまうソースコードを色付き(ハイライト)や行番号で分かりやすく表示するためのJavaScriptです。

この記事では、SyntaxHighlighterの導入方法と使い方、日本語化などのカスタマイズ方法を紹介します。

※当ブログではVer 2.x系のSyntaxHighlighterを導入したのでVer 2.x系の解説になります。


SyntaxHighlighterについて

SyntaxHighlighter

○SyntaxHighlighter(最新版)
http://alexgorbatchev.com/SyntaxHighlighter/

○SyntaxHighlighter(Ver 2.x系)
http://alexgorbatchev.com/SyntaxHighlighter/download/

○SyntaxHighlighter(Ver 1.5.1)
http://code.google.com/p/syntaxhighlighter/downloads/list

ハイライト対応プログラム

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

SyntaxHighlighterは大きく分けて「Ver 1.x系」「Ver 2.x系」「Ver 3.x系」があります。もちろん、バージョンが上がるごとに新機能・便利機能があるのですが、バージョンアップにともなって削除された機能もあります。またUI(見た目)も異なるため設置者の好みによって使われるバージョンが異なります。(基本的に各バージョンには互換性がないのも原因)

以下、大まかな各バージョンの違いです。

Ver 1.x系

Ver 1.x系

初期系。上部には常に「コードを表示させるボタン」や「クリップボードへコピーさせるボタン」が表示されてます。よく使われるのはVer 1.5.1。

Ver 2.x系

Ver 2.x系

コード表示画面にカーソルを乗っけると右上にアイコン群が表示されます。内容は「コードを別ウインドで表示」「クリップボードへコピー」「印刷」「バージョン情報」となっています。

  • 横幅で折り返される。
  • コードを直にコピーすると、行番号まで入る。(別ウインドで表示させたもの、クリップボードへコピーする機能だと入らない)
  • クリップボードへコピーする機能はFLASHを利用しているため、環境によっては不具合あり。
Ver 3.x系

Ver 3.x系

  • ツールバー・FLASHによるクリップボードへコピーする機能の廃止。
  • ダブルクリックでコードをテキスト表示。
  • 行番号は入らない。
  • コードが長くても折り返さない=スクロールバー表示。
  • コード定義用のJavaScriptをオートロード。
  • title属性の利用が可能。

私は「Ver 2.x系」か「Ver 3.x系」で迷ったのですが、「横幅で折り返される」方が見易いのと、「クリップボードへコピーする機能」がどうしても欲しかったので「Ver 2.x系」を選びました。

導入方法(Ver 2.x系)

先ほども書いた通り、私はVer 2.x系を選んだのでその導入方法を解説します。(とはいえ、バージョンによってそこまで大きな違いはありません。)

必要ファイルのダウンロード

まずは、公式サイトから必要なファイルをダウンロードし解凍します。過去バージョンは公式サイト右メニューの「Download」ページ下にあります。今回はVer 2.x系の中で最新の「Ver 2.1.382」を選びました。

○SyntaxHighlighter(Ver 2.x系)
http://alexgorbatchev.com/SyntaxHighlighter/download/

フォルダの中身

解凍すると以下のようなデータが生成されます。

  • 「scripts」 : コード定義プログラム&圧縮済み本体JavaScriptなど入ったフォルダ
  • 「src」 : 圧縮処理がされていない本体JavaScriptの入ったフォルダ
  • 「styles」 : テーマ(デザイン)を決めるCSSファイルと画像ファイルの入ったフォルダ
  • 「LGPLv3.txt」 : ログファイル
  • 「test.html」 : テスト表示を見るためのファイル

ファイルのアップロード

本体ファイル

「scripts」に入っている「shCore.js」がコアファイルになりますのでこれは必須です。
アップロード場所は任意で結構です。

「shLegacy.js」は1.5互換用スクリプトです。旧バージョン(Ver 1.5.1)からの表記方法を引き継ぎながらVer 2.x系へ移行したい場合は「shLegacy.js」も必須になります。このとき発生するタイムラグを解消するためのコード「SyntaxHighlighter.HighlightAll」を使用する場合にも必要です。

詳しくは以下のサイトを参考にしてください。

○SyntaxHighlighter を 1.5 から 2.0 にバージョンアップしてみる - hatena chips
http://hatenachips.blog34.fc2.com/blog-entry-205.html

swfファイル

「scripts」フォルダに入っている「clipboard.swf」をアップロードします。これは「クリップボードへコピーする」機能を有効にするために必要なファイルです。FLASHによってマウスのクリックを認識し、クリップボードへコードを送ります。

テーマ(デザイン)を決めるCSSファイル、画像ファイル

SyntaxHighlighterは、CSSファイルを読み込んで自由にデザインを変更することができます。解凍した「styles」フォルダ内にいくつかCSSファイルが同封されているので気に入ったものをアップロードします。標準は「shThemeDefault.css」です。

コアファイルのCSSである「shCore.css」は必須です。必ずアップロードしましょう。

また、「styles」フォルダ内にある画像ファイルもCSSが利用するのですべてアップロードします。

「styles」フォルダ内のデータ
▲「styles」フォルダ内のデータ

コード定義ファイル

次は「scripts」に入っているコード定義ファイルをアップロードしましょう。
これは言語の種類(HTML・CSS・PHP・Perl・Rubyなど)によって強調させたい文が異なるため、より見易くハイライトするには言語の種類別に専用のハイライト定義ファイルの読み込みが必要になるのです。

以下、ファイル名と言語対応表です。(公式ページから一部抜粋)

○言語対応表(公式ページ)
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Brush name(言語名) File name
C# shBrushCpp.js
C++ shBrushCpp.js
CSS shBrushCss.js
JavaScript shBrushJScript.js
Perl shBrushPerl.js
XML shBrushXml.js

記述したい言語に対応しているファイルをアップロードしましょう。
例えば、HTMLを記述したいときは「shBrushXml.js」をアップロードします。

Webページにコードを記述

head部分

head部分でアップロードした各種ファイルを読み込ませるためのコードを記述します。
(以下は例です。URLやファイル名は適切なものへ変更してください。)

「clipboard.swf」はツールバーの「クリップボードへコピーする」機能を有効にするために必要なファイルです。必ず読み込んでおきましょう。

<head>
<!-- 以下はアップロードしたCSSファイルを読み込む -->
                  
<link type="text/css" rel="stylesheet" href="http://xxxxxx/css/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://xxxxxx/css/SyntaxHighlighter.css" />

<!-- 以下はアップロードしたswfファイルを読み込む -->

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://xxxxxx/js/clipboard.swf';
</script>

<!-- 以下はアップロードしたハイライト定義ファイルを読み込む -->

<script type="text/javascript" src="http://xxxxxx/js/shCore.js"></script>
<script type="text/javascript" src="http://xxxxxx/js/shBrushJScript.js"></script>
<script type="text/javascript" src="http://xxxxxx/js/shBrushCss.js"></script>
<script type="text/javascript" src="http://xxxxxx/js/shBrushPhp.js"></script>
<script type="text/javascript" src="http://xxxxxx/js/shBrushXml.js"></script>

</head>
                    
ソースコード記述部分

実際にSyntaxHighlighterを利用して表示させるソースコードを<pre> タグで囲みます。(以下例です)

<pre class="brush: js">

var setArray = function(elems) {
        this.length = 0;
        push.apply(this, elems);
        return this;
    }

</pre>
                    

<pre>にclass属性を付けます。「<pre class="brush: ○○">~~</pre>」と記述します。
「brush: 」のあとの文字列は、記述されている言語によって異なります。(上の例では、JavaScriptのコードを記述しているので「js」、または「javascript」と付けます。これで「shBrushJScript.js」が使われコードがハイライトされます。)

これは公式ページの対応表で「Brush aliases」の部分を参照してください。

○言語対応表(公式ページ)
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Brush name(言語名) Brush aliases
C# c-sharp, csharp
C++ cpp, c
CSS css
JavaScript js, jscript, javascript
Perl perl, pl
XML xml, xhtml, xslt, html, xhtml

先ほどアップロードしたコード定義ファイルが無いと、ここで「brush: 」を指定しても正しくハイライトされません。また、言語と対応したファイルを事前に読み込まなければなりません。注意してください。

設置完了

これで設置は完了しました。

正しくJavaScriptファイルが読み込まれていればSyntaxHighlighterがコードを読みやすくハイライトしてくれます。

Ver 2.x系だと、マウスオーバーすることでツールバーが表示されます。「コードを別窓で表示」「クリップボードへコピー」「印刷」「バージョン情報」のボタンが標準で利用できます。

      

スポンサーリンク

コメントする

非公開。必須ではありません。

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)

このページの上部へ

サイト内検索

広告

最近のコメント

Powered by Movable Type 6.3.2