色々なサイトで綺麗にコード表示しれてあるのを前々から気になっていました。今後何かとコードを表示する機会が多そうなのでとりあえず調べてみると、なんでもsyntaxhighlighterなるもののようだ。設置はいたって簡単！

まずGoogle Code よりsyntaxhighlighter最新のファイルをダウンロード。
それを解凍すると Script , Styles, Uncompressed と３つのフォルダに。使うのはScript , Stylesの2つ。今回はScript , Stylesの2つフォルダ内のファイルをすべてｊｓというフォルダを作りその中に入れてサーバーにアップロード。その場合のファイルの読み込みは以下の通り。パスは相対パスでもいいが、サイトの構成に影響されるので絶対パスの方がいいかも。

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

まずこれをhead内に記載します。実際の書き方はtextareaにname=”code”としてclassにコードの種類を指定してやります。なおWordPress では textarea 内でコードを記述すると br タグが入いるので、 textarea タグではなく pre タグを使用するほうがいいかもとのこと。またコード内に textarea タグを書く場合は実体参照で書くとのこと。

<textarea name="code"　class="html">
textareaタグを書く場合は実体参照で
ここにコードを書きます
</textarea>

<pre class="html" name="code">
WordPressの場合はpreタグを使用
ここにコードを書きます
</pre>

各種類のclassでの指定は以下の通り。
XMLコードの場合、class=”xml”
PHPコードの場合、class=”php”
CSSコードの場合、class=”css”
JavaScriptコードの場合、class=”js”
SQLコードの場合、class=”sql”
pythonコードの場合、class=”python”
C#コードの場合、class=”c#”
Delphiコードの場合、class=”delphi”

簡単に導入出来てすごく見やすくなるのでとても便利！！ちなみにこのブログはWordPressを使ってるのですが、WordPressも初めてでよくわからず投稿を「ビジュアル」で入力していたものだからせっかく入力したコードがすべて実体参照に・・・・。おかしいな～～～って思っていたら入力形式に「ビジュアル」と「HTML」があることに気がついた！！！「HTML」で入力したら問題なし！バッチリでした。

<<参考サイト>>
http://www.syuhari.jp/blog/archives/372
http://weblibrary.s224.xrea.com/weblog/web20/blog/dpsyntaxhighlig.html
http://hekominn.blog57.fc2.com/?tag=JavaScript

コメントはまだありません

コメントはまだありません。

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする