１、ファイルのダウンロード、解凍

Google Codeから最新版のsyntaxhighlighter.rarのファイルをダウンロード、そして解凍します。

２、ファイルのアップロード

必要なファイルをサーバにアップロードします。解凍して3つのフォルダが生成されます。

  • Uncompressed
  • Styles
  • Scripts

Uncompressedフォルダの中身はとりあえず必要ありません。直訳すると「圧縮されてない」ということで、圧縮前のjsファイルが入ってます。Scriptsフォルダにはswfファイルとjsファイルが。Stylesフォルダにはcssファイルが入ってるので、適宜自分にとってわかりやすいディレクトリにアップロードしましょう。僕の場合MTのスタティック・ディレクトリ（mt-static）にsyntaxhighlighterディレクトリを新しく作り、そこに「js」、「flash」、「css」ディレクトリを設けて各ファイルをアップロードしました。

３、<head>へ記述を追加

適用したいHTMLファイルの<head>～</head>内に以下の記述を加えてやります。今回は僕自身が加えた記述を紹介します。僕の場合はHTMLコード、CSSコード、JavaScriptコードにSyntaxHighlighterを適用する事を想定しています。

<link type="text/css" rel="stylesheet" href="<MTBlogURL>syntaxhighlighter/css/SyntaxHighlighter.css" />
<script language="javascript" src="<MTBlogURL>syntaxhighlighter/js/shCore.js"></script>
<script language="javascript" src="<MTBlogURL>syntaxhighlighter/js/shBrushXml.js"></script>
<script language="javascript" src="<MTBlogURL>syntaxhighlighter/js/shBrushCss.js"></script>
<script language="javascript" src="<MTBlogURL>syntaxhighlighter/js/shBrushJScript.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = '<MTBlogURL>syntaxhighlighter/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

４、コードを記述、pre要素でマークアップ

表示させたいコードをpre要素でタグ付けします。name属性にはcodeを指定し、class属性には下記の表を参考に各値を指定してやってください。例えばHTMLのコードを書きたいと思ったら

<pre name="code" class="html">
<!-- HTMLソースを記述 -->
</pre>

といった様にマークアップしてやります。

言語対応するクラス名
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

５、実体参照

Usage - syntaxhighlighter - Google Codeのページでは、note（注意書き）として実体参照について述べられています。実体参照については、「Try next HTML」のページでは以下のように説明がされています。

<pre>...</pre> の中では書いた文字がそのまま表示されるといっても，タグに使う半角の不等号「<」，「>」などは表示されない。このような特殊な記号を表示させるためには，文字ごとに決められたコードで指定する。漢字のコードをいちいち探して入力するのが難しいように，これを数値で指定するのは大変なので，わかりやすい文字が対応している。これを文字実体参照という。

Google Codeでは、それに加えて、

pre要素の代わりにtextarea要素を用いると、実体参照への変換の必要はないが、RSS Feedでの表示など、JavaScriptが効かない場合での表示の見た目が悪い。

との旨が書かれています。

コード中の「<」などを実体参照に変換してくれるWeb上のページには蓄々HTML実体参照変換 : akiyan.comやHTML特殊文字変換ツールなどがあります。僕の場合textarea要素は用いず、pre要素を用いて、これらのツールで逐一、不等号などの文字を実体参照に変換しています。

６、細かな設定

Configuration - syntaxhighlighter - Google Codeのページには細かな設定についてさらっと説明が加えられています。class属性の値を指定する際に、「:（コロン）」を用いて記述を追加することによって、コードの表示について設定してやることが出来ます。

僕が欲しかったのは「行番号の指定」だったのでこれを実現するには

<pre name="code" class="html:firstline[1行目に指定したい行番号を入力]">
<!-- HTMLソースを記述 -->
</pre>

という風に記述してやります。

関連記事

Leave Your Words




Trackback URL

[ネットで買える]デザインされた灰皿７選[予算は6000円]

ただてとの全記事リストへ

ねんがんのWillcom 03 (WS020SH)をてにいれたぞ！