SyntaxHighlighterを用いてブラウザ上にコードを表示させる方法をメモります。
まずはSyntaxHighlighterをダウンロードしてきて、CSSファイルとjavaScriptファイルを適用させます。
このとき、shCore.cssに記述されている各画像ファイルのURLを書き直して下さい。
<script src="shCore.js"></script> <script src="shBrushAppleScript.js"></script> <script src="shBrushAS3.js"></script> <script src="shBrushCss.js"></script> <script src="shBrushJScript.js"></script> <script src="shBrushPerl.js"></script> <script src="shBrushPhp.js"></script> <script src="shBrushSql.js"></script> <script src="shBrushXml.js"></script> <link rel="stylesheet" type="text/css" href="shCore.css" media="all" /> <link rel="stylesheet" type="text/css" href="shThemeDefault.css" media="all" /> <script type="text/javascript">SyntaxHighlighter.all();</script>
次はhtml上で表示させるコードを記述して行きます。
<pre>のclass属性内に記述するコードの種類などを指定します。
<pre class="brush: php js css; auto-links:false;"> <p>テスト</p> </pre>
あとは画像ファイルも忘れずにアップロードするだけです。