(09.01.15 追記、記事の最後に加えております。)

ブログの中でたまにコードを書いたりしますが、
<h1>うっかりさん</h1>
と表示させたいところをうっかり特殊文字に変換させるのを忘れて

うっかりさん

みたいにしてしまうことがあります。面倒です。
そこで調べてみると、わざわざ変換させずともソース表示をしてくれるJavaScriptのプログラム"dp.SyntaxHighlighter"というものがあったので、早速試してみることに。以下導入の際のメモになります。

http://code.google.com/p/syntaxhighlighter/からファイルをダウンロード
解凍したもの（"dp.SyntaxHighlighter"フォルダ）をサーバーにアップロード
ブログ（サイト）の<head>～</head>内に以下のように記述します。
ファイルへのパスは環境に応じて変更してください。
<br /><head> <br /> <br /><link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"> <br /><script type="text/javascript" src="Scripts/shCore.js"></script> <br /> <br /> <br /> <br /><script type="text/javascript" src="Scripts/shBrushJScript.js"></script> <br /><script type="text/javascript" src="Scripts/shBrushCss.js"></script> <br /><script type="text/javascript" src="Scripts/shBrushPhp.js"></script> <br /><script type="text/javascript" src="Scripts/shBrushXml.js"></script> <br /> <br /><script type="text/javascript"> <br />window.onload = function () { <br />dp.SyntaxHighlighter.ClipboardSwf ='Scripts/clipboard.swf';dp.SyntaxHighlighter.HighlightAll('code'); <br />} <br /></script> <br /> <br /></head>
あとは<body>～</body>内に表示させたいソースコードを書き、これを以下のように<textarea name="code" class="○○">のような形で囲めばOK
<br /><body> <br /><textarea name="code" class="xhtml"> <br /><h1>うっかりさんもこれで安心！</h1> <br /></textarea> <br /></body> <br />

以上で使えるようになるかと思います。なお、上の手順3ではxhtml,css,php,JavaScriptのみ設定しましたが、C,C++,C#,Delphi,Java,Python,Ruby,SQL,VBといった言語にも対応しているようです。ファイルがあるので同様に繋ぐだけです。

また、手順4の<textarea name="code" class="○○">の○○部分、ここは対応させる言語が入ります。CSSコードの表示なら、class="css"のように。詳しくはコチラより確認ください。

色使いなども"SyntaxHighlighter.css"からアレンジ可能です。あなた色に染めてください。

参考サイト様
・dp.SyntaxHighlighter
・Forty-N-FiveBlog"ブログ上にソースを記述する際、美しく表示する方法"

(09.01.15 追記)
bloggerの設定には、html上の改行を<br>にするかしないかというものがあります。僕はこれを"する(on)"にしているため、上で示したコード上に<br>が沢山付いてしまっております。特にbloggerユーザーの方で"dp.SyntaxHighlighter"を使われる場合は、改行設定をオフにして使われることをオススメしておきます。

《関連記事》

2008年12月19日金曜日

ソースコードをわかりやすく表示するJSプログラム"dp.SyntaxHighlighter"

うっかりさん

0 件のコメント: