dp.SyntaxHighlighter
dp.SyntaxHighlighter とも SyntaxHighlighter とも呼ばれているようです。
２００８年１月現在のバージョンは「 SyntaxHighlighter 1.5.1 」となっているようです。
設置方法について簡単に書いておく事にしました（何より自分が忘れてしまうので・・・♪）。
<head> と </head> の間に上記のようにファイルのある場所を指定しておきます。場所は適確自分の環境に合わせて直してください。また、「 SyntaxHighlighter.css 」については「 link 」で指定する方法と、「 import 」で「 url 」を指定する方法があります。下は「 import 」を使って指定した例です。
どちらが自分の作るページの中で有効になるかは試してみるより他にないと思われますので、試してみてください。
どうして違いが出るのかはわかりませんが、おそらくいろいろな「仕様」の絡みによるものとおもわれます。
特に " import url " を使う場合にはその前に記述するタグは " charset " の指定他、限られていたように思いますので・・・・
なお、「 dp.SyntaxHighlighter.HighlightAll('code'); 」の「 ('code') 」の変更はしません。
以上で設置は完了です。
次に使用方法ですが、< textarea name="code" class="言語名">< /textarea> と < pre name="code" class="言語名">< /pre> のような書式になります。
例えば以下のように記述をすると
入力したしたそのままに表示されます。
「 pre 」コードを使っても、表示はまったく同じにされました。他にオプションが使えるようです。
例えば、「 class 」属性の後に、文字数「 cols="60" 」や高さ「 rows="15" 」などを「 < textarea name="code" class="html" cols="60" rows="15"> 」などのような指定ができるようですが、自動で調節もしてくれるので、余り必要ないかも・・・
このページでは <textarea name="code" class="html"> として、言語には html を指定してありますが、jscript , ruby , php その他に変更する場合には、もちろん head 部分の shBrushXml.js などのファイルを使用する言語ファイルに変更してくださいますよう。
※ おまけ
せっかくのいいツールなのに、妙にこの黄緑色の線が浮いてしまってね～、という方たちのために。
Styles ディレクトリーに入っている SyntaxHighlighter.css の気になる部分を変更してみました。
border-left: 3px solid #6CE26C;
を下のように変更しました。
border-bottom: 1px solid #83786c;
これはトップのメニューが表示されている段の左側にある緑色の線を消してトップの段の下線を表示するように設定したものです。
後はトップの段の背景色も左側の行番号が表示されているところと同じにしてしまおうと１３８行目あたりの次の記述もいじりました。
background-color: #F8F8F8;
background-color: #e7e5dc;
.dp-highlighter ol li,.dp-highlighter .columns div の項目の下６３行目あたりに記述してあった箇所は、緑色の線の色を変更し、太さを変更してみました。
border-left: 3px solid #6CE26C;
border-left: 1px solid #83786c;
下のようになりました。
コンソール画面のような仕様にしてみました。この場合は SyntaxHighlighter.css で、背景色を black に指定し、shBrushXml.js の方で文字の色を白に指定してあります。
もうひとつ色違い。
Nucleus のインストールのページで使用したスタイル。
同じく色違い
機能オンリーでスタイルはどうでもいいという方もいらっしゃいますが、どうせ使うなら自分の好きなスタイルの方が・・・。