記事中でPHPやJavascriptなどのコードを紹介するときにとっても見やすく整形してくれるJavascriptがこのSyntaxHighlighterです。
SyntaxHighlighterの入手
SyntaxHighlighterはGoogle Codeから手に入れることができます。トップページからダウンロードしてください。2008年9月現在のバージョンは1.5.1。
設置
ダウンロードしたファイルを解凍すると「SyntaxHighlighter」フォルダができます。そのなかにはScripts、Styles、Uncompressedの三つのフォルダがあります。Uncompressedフォルダには圧縮されていない（ファイルサイズの大きな）ファイルが収めてあるのでこれは使わなくてもいいでしょう。それ以外のフォルダを適当なフォルダにアップロードします。
ここでは「SyntaxHighlighter」フォルダのなかにScripts、Stylesフォルダごとアップロードします。
HTMLにコードを追加
HTMLの<head>～</head>間に以下のタグを追加します。
<!--1. CSSの読込み--> <link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css" /> <!--2. shCore.jsの読込み（必須）--> <script type="text/javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script> <!--3. 必要に応じて追加--> <script type="text/javascript" src="SyntaxHighlighter/Scripts/shBrushPhp.js"></script> <script type="text/javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
1. CSSの読込み
まずはCSSを読み込みます。スタイルを自分のサイトにあわせるときはこのファイルを変更するか、上書き用のCSSを別に用意して読み込むといいと思います。
※ファイルまでのパスは自分の環境に合わせて変更してください。
2. shCore.jsの読込み（必須）
shCore.jsはSyntaxHighlighterの一番重要なファイルなので必ず読み込みます。
3. 必要なスクリプトの読込み
SyntaxHighlighterは整形したい対象の種類によって読み込むファイルが違います。たとえばページ上で紹介したいものがPHPのコードの場合は「shBrushPhp.js」を、Javascriptの場合は「shBrushJscript.js」を読み込む必要があります。
（SyntaxHighlighterの「Languages」のページを参照）
dp.SyntaxHighlighter～について
あと追加しないといけない部分があります。それが以下のコード。
（SyntaxHighlighterの「Usage」のページを参照）
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
パスは変更していますが、これを<head>～</head>間に追記しても動きません。動くようにするには二つの方法があります。
(1) <head>～</head>間に記述する方法
以下のようにwindow.onload～の部分を追加します。
<script type="text/javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>
(2) </body>の直前に追記する方法
サンプルコードをそのまま</body>タグの直前に挿入します。
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
ハイライトさせたいコードをpreタグで囲む
あとはハイライトさせたいコードをpreタグまたはtextareタグで囲みます。どちらかというとpreタグのほうが個人的には好みです。そのほうがより正しいマークアップですし。
preタグで囲んだらnameとclassを指定します。
<pre name="code" class="js"> <!--ここに紹介したいコードを記述--> </pre>
name属性でcodeと指定したところをハイライト表示するよってことになります。別にcodeって属性値にしなくてもいいです。たとえばhighlighter」のほうがそのままでわかりやすいし・・・ってときは
dp.SyntaxHighlighter.HighlightAll('code');
の部分を
dp.SyntaxHighlighter.HighlightAll('highlighter');
に変更するだけでOK^ ^。
あとはclass属性にJavascriptなら「class=”js”」とか「class=”javascript”」と指定します。ほかにもいろいろな言語に対応しているので表を参考にしてくださいね。
| 言語 | class名 |
|---|---|
| C++ | cpp, c, c++ |
| C# | c#, c-sharp, csharp |
| CSS | css |
| Delphi | delphi, pascal |
| Java | java |
| Java Script | js, jscript, javascript |
| PHP | php |
| Python | py, python |
| Ruby | rb, ruby, rails, ror |
| Sql | sql |
| VB | vb, vb.net |
| XML/HTML | xml, html, xhtml, xslt |
表示設定
あと、いくつか表示に関する設定をすることができます。
| nogutter | 枠線と行番号を表示しない |
| nocontrols | コントロールを表示しない |
| collapse | コードを閉じた状態にする |
| firstline[value] | 1行目の行番号を指定。デフォルトは1 |
| showcolumns | 列番号を表示 |
（例）class=”php:nogutter”
<?php
$a = "hoge";
function foo() {
global $a;
echo $a;
}
foo( );
?>
（例）class=”php:nocontrols”
<?php
$a = "hoge";
function foo() {
global $a;
echo $a;
}
foo( );
?>
（例）class=”php:collapse”
<?php
$a = "hoge";
function foo() {
global $a;
echo $a;
}
foo( );
?>
（例）class=”php:firstline[3]“
<?php
$a = "hoge";
function foo() {
global $a;
echo $a;
}
foo( );
?>
（例）class=”php:showcolumns”
<?php
$a = "hoge";
function foo() {
global $a;
echo $a;
}
foo( );
?>
名前：paon
comment
コメントはまだありません。
この記事につけられたコメントのRSS