「Syntax Highlighter」を使えば、ソースコードを見やすく表示できる
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。
多くの言語の構文強調表示に対応した「Syntax Highlighter」
HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。
こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、その中から「Syntax Highlighter」を紹介します。Syntax Highlighterは、HTMLやCSSはもちろん、PHP／Perl／Ruby／JavaScriptなど、多くの言語の構文強調表示に対応したスクリプトです。
Syntax Highlighterを使ったソースコードの表示例。左上がHTML、右上はCSS、左下がPHPの各ソースコード
Syntax Highlighterのダウンロードとインストール
まず、Syntax Highlighter本体をダウンロードします。Syntax Highlighterは以下のページで配布されています。
http://alexgorbatchev.com/wiki/SyntaxHighlighter
ダウンロードしたファイルを解凍すると、「scripts」「src」「styles」の3つのフォルダができます。このうち、「scripts」と「styles」のフォルダを、Syntax Highlighterを設置したい自分のWebサーバーにアップロードしたら、ひとまず準備は完了です。