ソースコードをきれいに装飾表示するアレ(SyntaxHighlighter)

目次

ソースコードをハイライトしてくれる『SyntaxHighlighter』

最近のサイトでよく見るソースコードをきれい装飾して見せるJavascript。自分のホームページにも導入したいと思っていろいろ探して『SyntaxHighlighter』というのを見つけました。

サンプル

<pre class='brush:php'>
	<?php
		$p = "サンプル";
		echo $p;
	?>
</pre>

作者のページ

http://alexgorbatchev.com/SyntaxHighlighter/

syntaxhighlighter · github

https://github.com/syntaxhighlighter

使い方

まずダウンロードして適当な場所に保存して解凍します。現在の最新は「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-->

意外にカンタン...。

その他、

を指定できるようです。

英語の説明ページですが、なんとなくでも理解できました。

なんかウレシイ。

SyntaxHighlighter以外の参考ページ

前へ

リライトルールでディレクトリと拡張子を変更して転送する(mod_rewrite)

次へ

日めくりカレンダー風のアイコン画像