ソースコードをきれいに装飾表示するアレ（SyntaxHighlighter）
目次
ソースコードをハイライトしてくれる『SyntaxHighlighter』
最近のサイトでよく見るソースコードをきれい装飾して見せるJavascript。自分のホームページにも導入したいと思っていろいろ探して『SyntaxHighlighter』というのを見つけました。
サンプル
<pre class='brush:php'> <?php $p = "サンプル"; echo $p; ?> </pre>
作者のページ
使い方
まずダウンロードして適当な場所に保存して解凍します。現在の最新は「SyntaxHighlighter 3.0.83」のようです。
ダウンロードリンク
仮に「ルートディレクトリ/js/SyntaxHighlighter」に保存した場合。
<head>～</head>内に以下を追加
<!--SyntaxHighlighter--> <link rel="stylesheet" type="text/css" href="/js/SyntaxHighlighter/styles/shCore.css" /> <!-- 以下は好きなテーマによって変更する --> <link rel="stylesheet" type="text/css" href="/js/SyntaxHighlighter/styles/shThemeDefault.css" /> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shAutoloader.js"></script> <!-- 以下は装飾したい言語を追加 --> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushCss.js"></script> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushPlain.js"></script> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushSql.js"></script> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushVb.js"></script> <script type="text/javascript" src="/js/SyntaxHighlighter/scripts/shBrushXml.js"></script> <script type="text/javascript">// <![CDATA[ SyntaxHighlighter.all(); // ]]></script> <!--SyntaxHighlighter-->
意外にカンタン...。
その他、
を指定できるようです。
英語の説明ページですが、なんとなくでも理解できました。
なんかウレシイ。