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

Mon, 29 Nov 2010 14:49:12 +0900

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

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

サンプル

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

作者のページ

http://alexgorbatchev.com/SyntaxHighlighter/ http://alexgorbatchev.com/SyntaxHighlighter/

https://github.com/syntaxhighlighter https://github.com/syntaxhighlighter

使い方

まずダウンロードして適当な場所に保存して解凍します。現在の最新は「SyntaxHighlighter** 3.0.83**」のようです。

ダウンロードリンク

http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

仮に**「ルートディレクトリ/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-->

意外にカンタン…。

その他、

を指定できるようです。

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

なんかウレシイ。

SyntaxHighlighter以外の参考ページ

https://qiita.com/ko-he-8/items/b068e431f23b38608fb7 https://qiita.com/ko-he-8/items/b068e431f23b38608fb7