スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ソースコードを綺麗に表示してみる

ソースコードを綺麗に表示してくれる SyntaxHighlighter というJavaScriptを試してみました。

ダウンロードは、syntaxhighlighter - Google Codeより。

<!-- CSSとJSを読み込み -->
<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css" />
<script type="text/javascript" src="js/shCore.js"></script>

<!-- 表示したい言語のJSを読み込み -->
<script type="text/javascript" src="js/shBrushCss.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushPhp.js"></script>
<script type="text/javascript" src="js/shBrushSql.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>


onloadで以下を実行します。
<script type="text/javascript">
window.onload = function () {
  dp.SyntaxHighlighter.HighlightAll('code');
}
</script> 


綺麗に表示したいソースコードを、preタグで次のように書きます。
<pre name="code" class="xml">
  ここにコードを記述。
</pre>

クラスを言語によって、「php」、「js」などに変えれば、各言語に適した装飾を施してくれるようです。

以前から試してみようと思ってなかなかできなかったんですが、ようやく試せました。嬉しい。


fc2ブログで記述する際に、改行が<br>に変換されて戸惑いましたが、これは「改行の扱い」をHTMLタグのみにチェックすると直りました。

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。