このページの本文へ

JavaScriptもPHPもHTMLもOK!「Syntax Highlighter」の使い方

技術系サイトに必需品! ソースコードは鮮やかに

2009年03月18日 09時00分更新

藤本 壱

  • この記事をはてなブックマークに追加
本文印刷
Syntax Highlighter
「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
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サーバーにアップロードしたら、ひとまず準備は完了です。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング