SyntaxHighlighterでコードを見やすく整形する

Google Code: SyntaxHighlighter

記事中でPHPやJavascriptなどのコードを紹介するときにとっても見やすく整形してくれるJavascriptがこのSyntaxHighlighterです。

SyntaxHighlighterの入手

SyntaxHighlighterはGoogle Codeから手に入れることができます。トップページからダウンロードしてください。2008年9月現在のバージョンは1.5.1。

SyntaxHighlighter_1.5.1.rar

設置

ダウンロードしたファイルを解凍すると「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( );
?>

そうのひとりごと

© 2017 PAOLOG