このソースコード表示が…

<p>下の「files」、「js」、「html」のソースコード表示に使っているのが、この「SytaxHightlighter」です。</p>

<p>shCore.css、shCore.jsをベースファイルとして読み込み、好きなテーマ用cssを読み込みます。</p>
		
<p>あとは表示するソースコート用のjs、cssファイルを適宜読みこめばOK!</p>

<link href="<PATH>/shCore.css" rel="stylesheet" />
<link href="<PATH>/shThemeDefault.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/shCore.js"></script>
<script src="<PATH>/shBrushXml.js"></script> <!--今回はhtmlを表示しているのでshBrushXmlを読み込み-->
<script src="<PATH>/shBrushJScript.js"></script> <!--今回はjsを表示しているのでshBrushJScriptを読み込み-->
<script>
	$(function(){
		setTimeout(function(){
			alert('うざいアラートを1秒毎に表示!');
		}, 1000);
	});
</script>

こんなに見やすく!

<p>下の「files」、「js」、「html」のソースコード表示に使っているのが、この「SytaxHightlighter」です。</p>

<p>shCore.css、shCore.jsをベースファイルとして読み込み、好きなテーマ用cssを読み込みます。</p>
		
<p>あとは表示するソースコート用のjs、cssファイルを適宜読みこめばOK!</p>

<link href="<PATH>/shCore.css" rel="stylesheet" />
<link href="<PATH>/shThemeDefault.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/shCore.js"></script>
<script src="<PATH>/shBrushXml.js"></script> <!--今回はhtmlを表示しているのでshBrushXmlを読み込み-->
<script src="<PATH>/shBrushJScript.js"></script> <!--今回はjsを表示しているのでshBrushJScriptを読み込み-->
<script>
	$(function(){
		setTimeout(function(){
			alert('うざいアラートを1秒毎に表示!');
		}, 1000);
	});
</script>

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/shCore.css" rel="stylesheet" />
<link href="<PATH>/shThemeDefault.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/XRegExp.js"></script>
<script src="<PATH>/shCore.js"></script>
<script src="<PATH>/shBrushXml.js"></script>
<script src="<PATH>/shBrushJScript.js"></script>
<script>
	$(window).load(function(){
		SyntaxHighlighter.defaults['toolbar'] = false;
		SyntaxHighlighter.highlight();
	});
</script>
<p class="title">このソースコード表示が...</p>

<div id="SyntaxHighlighterNonDemo" class="SyntaxHighlighter-demo">
	<pre>
<p>下の「files」、「js」、「html」のソースコード表示に使っているのが、この「SytaxHightlighter」です。</p>

<p>shCore.css、shCore.jsをベースファイルとして読み込み、好きなテーマ用cssを読み込みます。</p>
		
<p>あとは表示するソースコート用のjs、cssファイルを適宜読みこめばOK!</p>

<link href="<PATH>/shCore.css" rel="stylesheet" />
<link href="<PATH>/shThemeDefault.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/shCore.js"></script>
<script src="<PATH>/shBrushXml.js"></script> <!--今回はhtmlを表示しているのでshBrushXmlを読み込み-->
<script src="<PATH>/shBrushJScript.js"></script> <!--今回はjsを表示しているのでshBrushJScriptを読み込み--></pre>
	
	<pre>
<script>
	$(function(){
		setTimeout(function(){
			alert('うざいアラートを1秒毎に表示!');
		}, 1000);
	});
</script></pre>
</div>


<p class="title">こんなに見やすく!</p>

<div id="SyntaxHighlighterDemo" class="SyntaxHighlighter-demo">
	<pre class="brush: xml">
<p>下の「files」、「js」、「html」のソースコード表示に使っているのが、この「SytaxHightlighter」です。</p>

<p>shCore.css、shCore.jsをベースファイルとして読み込み、好きなテーマ用cssを読み込みます。</p>
		
<p>あとは表示するソースコート用のjs、cssファイルを適宜読みこめばOK!</p>

<link href="<PATH>/shCore.css" rel="stylesheet" />
<link href="<PATH>/shThemeDefault.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/shCore.js"></script>
<script src="<PATH>/shBrushXml.js"></script> <!--今回はhtmlを表示しているのでshBrushXmlを読み込み-->
<script src="<PATH>/shBrushJScript.js"></script> <!--今回はjsを表示しているのでshBrushJScriptを読み込み--></pre>
	<pre class="brush: js">
<script>
	$(function(){
		setTimeout(function(){
			alert('うざいアラートを1秒毎に表示!');
		}, 1000);
	});
</script></pre>
</div>

SyntaxHighlighterについて

このページのJS,HTML,CSS表示にも使っているソースコードを読みやすくしてくれるプラグイン
読み込むファイルを変えるだけで色々な言語に対応できるので便利です。
XRegExpというファイルの読み込みが必要な環境とそうでない環境があるっぽいです。(サーバーによって違う)
XRegExpはこちらからDL可能。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT or GPL
対応ブラウザ

関連するjQueryプラグイン