2007-04-07

dp.SyntaxHighlighter を使ってサンプルコードを見やすくしました!

Postal Search APIs & Solutions
http://developmentor.lrlab.to/postal/



dp.SyntaxHighlighter - free JavaScript syntax highlighting を使って サンプルコード を見やすくしました。

dp.SyntaxHighlighter の導入はとても簡単です。まず、ソースコードを含む textarea を用意します。textarea には名前を付けておきます(ここでは code としました)。JavaScript コードが対象なので class を js とします。


<textarea name="code" class="js" rows="25" cols="80">
… JavaScript コード …
</textarea>


dp.SyntaxHighlighter のスタイルシートをインポートします。続けて dp.SyntaxHighlighter のライブラリをロードします。今回は JavaScript が対象なので shBrushJScript.js を指定しています。


<style type="text/css">@import url(SyntaxHighlighter.css);</style>
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushJScript.js"></script>
<script type="text/javascript" >
dp.SyntaxHighlighter.HighlightAll('code');
</script>


最後に dp.SyntaxHighlighter を実行します。このとき前述の textarea の名前を指定します。

0 件のコメント: