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

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

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

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

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


ツールバーの日本語化

ツールバーは標準だと英語なのですが、SyntaxHighlighterのツールバーはカスタマイズすることで日本語化することができます。

日本語化は「config」で設定できます。ここではSyntaxHighlighterで表示するメッセージを自由に変更することができます。

configの設定方法

head部分に以下のようなコードを記述することでconfigの設定をすることができます。
最後に「SyntaxHighlighter.all();」がないと動作しないので注意。

<script type="text/javascript">

SyntaxHighlighter.config.strings.expandSource = 'ソース';
SyntaxHighlighter.config.strings.viewSource = 'ソースを表示';
SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードにコピー';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation ='クリップボードにコピーしました';
SyntaxHighlighter.config.strings.print = '印刷';
SyntaxHighlighter.config.strings.help = 'バージョン情報';

SyntaxHighlighter.all();

</script>
                    

各メッセージの変更箇所、初期メッセージは公式ページで解説されています。
「'~~'」内に好きなメッセージを入れることができます。ここで日本語のメッセージを入れればツールバー各種のメッセージが日本語化されます。以下、対応表です。

(公式ページ「config」)

Name Default value
viewSource(※) "view source"
expandSource "+ expand source"
copyToClipboard(※) "copy to clipboard"
copyToClipboardConfirmation (※) "The code is in your clipboard now"
print(※) "print"
help "?"
alert "SyntaxHighlighter\n\n"
noBrush "Can't find brush for: "
brushNotHtmlScript "Brush wasn't made for html-script option: "

※ver 3.x系では使われないものです。

外部スクリプト化

以上のコードをhead内で記述すると見た目が悪くなるので少しすっきりさせましょう。

configの設定を記述したJavaScriptファイルを外部スクリプトとして読み込ませます。

SyntaxHighlighter.config.strings.expandSource = 'ソース';
SyntaxHighlighter.config.strings.viewSource = 'ソースを表示';
...

SyntaxHighlighter.all();
                    

テキストファイルを作成し、以上のようにconfigの設定を記述します。その後、拡張子を「.js」とすればJavaScriptファイルが作成できます。ファイル名は自由ですが「syntaxhighlighter.config.js」などどすれば分かりやすいでしょう。

その後、作成したJavaScriptファイルをアップロードし、head内で読み込みます。

<script type="text/javascript" src="http://xxxxxx/js/syntaxhighlighter.config.js"></script>
                    

これであの長いコードがひとつのJavaScriptファイルにまとまりました。

他のconfig設定

○公式解説ページ(英語)
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

bloggerMode

「blogger.com」で発生する不具合の対策です。

FC2ブログの投稿フォームで改行すると、自動的に改行が<br>に置き換わる仕様になっています。これではソースコードに<br>まで入ってしまうなど期待した表示になりません。

それを回避するためには以下のコードを書き加えます。

SyntaxHighlighter.config.bloggerMode = true;

stripBrs

ブログツールなどのソフトウェアによっては自動的に各行の語尾に<br />タグがつく場合があります。これでは正しくソースコードを表示できない場合があります。この設定をすれば語尾の改行は無視します。

SyntaxHighlighter.config.stripBrs=true;

tagName

SyntaxHighlighterでハイライトを適用するタグには<pre>タグが標準で割り当てられていますが、それ以外のタグを使いたい場合はここで設定します。(※○には任意のタグ名を付けることができます)

<head>
<script type="text/javascript">

SyntaxHighlighter.config.tagName="○○○";
SyntaxHighlighter.all();

</script>
</head>
<○○○ class="brush: js">
  {サンプルコード}
</code>

defaults

ここではソース毎の設定をすることができます。この設定を反映させるには、head要素内で指定するか、ソース毎のパラメータで指定します。

ページ全体で同じ設定を適用

ページ全体で同じ設定を適用する場合は、head内で以下のように記述します。

SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
... 

SyntaxHighlighter.all(); 
ソースコード毎に適用

ソースコード毎に適用させたい場合は、以下のようにパラメータで指定します。

<pre class="brush: html; auto-links: false">

http://michisugara.jp/

</pre>

○公式解説ページ(英語)
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

auto-links

ソースコードの中にURLを記述したときに、そのURLにリンクを貼るかどうかを設定します。デフォルトは「true」です。オプションを「false」にするとクリックできなくなります。

SyntaxHighlighter.defaults['gutter'] = false;
<pre class="brush: html; auto-links: false">

http://michisugara.jp/

</pre>

▲「false」を設定すると、リンクが機能しなくなります。

class-name

CSSのクラスを設定することで、ハイライト要素のデザインを変更することができます。class属性は、半角スペースを挟むことで複数指定できます。

<style>
.syntax_sample {
 [ここでスタイルを設定]
 }
</style>

<pre class="brush: js; class-name:'syntax_sample'">
{サンプルコード}
</pre>

collapse

初期状態でソースコードを折りたたむかどうかを指定できます。初期値は「false」で折りたたみません。「true」に設定すると折りたたみます。

SyntaxHighlighter.defaults['collapse'] = true;
<pre class="brush: html; collapse: true">

{サンプルコード}

</pre>

▲「true」を設定すると、ソースコードが折りたたまれます。

first-line

先頭行の番号を任意の番号に変更します。

SyntaxHighlighter.defaults['first-line'] = 10;
<pre class="brush: html; first-line: 10">

{10番目から開始させています。}

</pre>

gutter

行番号欄の表示・非表示を切り替えることができます。「false」で非表示になります。

SyntaxHighlighter.defaults['gutter'] = false;
<pre class="brush: html; gutter: false">

{行番号が非表示になっています}

</pre>

highlight

特定の行をハイライトして強調します。パラメータとして明記するときは、「1, 2, 3]のように配列で指定します。単に1行だけ指定するときは、その行番号を指定します。

SyntaxHighlighter.defaults['highlight'] = [1, 3];
<pre class="brush: html; highlight: [1, 3]">

{1行目と3行目がハイライトされ強調されています}

</pre>

html-script

htmlやxmlコードもハイライトします。利用するには事前に「shBrushXml.js」を読み込ませる必要があります。html文中に様々なスクリプトが混在している場合に「true」と設定すればさらに見やすくなります。初期値は「null」です。

SyntaxHighlighter.defaults['html-script'] = true;
<pre class="brush: js; html-script: true">

{「brush: js」と設定していますが、「<pre>」タグもハイライトされています。}

</pre>

smart-tabs

よくわからなかったので公式デモを参考。(公式デモ

SyntaxHighlighter.defaults['smart-tabs'] = true;
<pre class="brush: js; smart-tabs: true">

{サンプルコード}

</pre>

tab-size

タブサイズを調整、変更することができます。初期値は「4」です。

SyntaxHighlighter.defaults['tab-size'] = 4;
 
<pre class="brush: js; tab-size: 4">
123	123	123
1	2	3
</pre>
      
 
<pre class="brush: js; tab-size: 8">
123	123	123
1	2	3
</pre>
      

toolbar

ツールバー(Ver3では?のみ)を表示するかどうかを設定します。初期値は「true」、非表示にする場合は「false」にします。

SyntaxHighlighter.defaults['toolbar'] = false;
<pre class="brush: javascript; toolbar: false">

{ツールバーを非表示にしています。}

</pre>

Amazon アソシエイトとGoogle Chromeの組み合わせによる不具合

当ブログでSyntaxHighlighterを導入するとき、ローカル環境で動作テストをしていました。
すると、Webブラウザ「Google Chrome」でのみSyntaxHighlighterがうまく動作しないという不具合に遭遇。

調べてみたところ、「Amazon アソシエイト」で使用されているiframe要素(インラインフレーム)とGoogle Chromeという組み合わせではSyntaxHighlighterはうまく動作しないということが判明しました。

Google Chromeでのみ発生する現象で、他のブラウザでは正しく表示されるのですが、今や大きなシェアを得たGoogle Chromeを見放すことはできないのでiframe要素を使わないAmazonの広告に変更しました。これにより、Google Chromeでも正しく動作するようになりました。

「Amazon アソシエイト」を利用している方は注意してください。

まとめ

configなどの設定法も解説したため、非常に長い記事となってしまいましたが、それだけこのSyntaxHighlighterは柔軟性のある便利なソフトウェア言えます。

導入方法も、以前紹介した画像を拡大表示するJavaScript「FancyZoom」と同じようにファイルのアップロードとhead内に少し手を加えるだけですので無料のレンタルブログサービス(FC2ブログなど)を利用している方でもそれほど難しくないでしょう。

ソースコードを多く載せるようなブログを運営している方は、導入してみてはいかがでしょうか。

スポンサーリンク

コメントする

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

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

このページの上部へ

サイト内検索

広告

最近のコメント

Powered by Movable Type 6.3.2