ソースコードをハイライトしてくれる『SyntaxHighlighter』
最近のサイトでよく見るソースコードをきれい装飾して見せるJavascript。自分のホームページにも導入したいと思っていろいろ探して**『SyntaxHighlighter』**というのを見つけました。
サンプル
<pre class='brush:php'>
<?php
$p = "サンプル";
echo $p;
?>
作者のページ
使い方
まずダウンロードして適当な場所に保存して解凍します。現在の最新は「SyntaxHighlighter** 3.0.83**」のようです。
ダウンロードリンク
仮に**「ルートディレクトリ/js/SyntaxHighlighter」**に保存した場合。
～内に以下を追加
<!--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-->
意外にカンタン…。
その他、
を指定できるようです。
英語の説明ページですが、なんとなくでも理解できました。
なんかウレシイ。
