コードの表示を整形するjavascript「jCodeViewer」

HTMLのタグには、HTMLやCSSなどを記述するところに使用するcodeと呼ばれるものがあります。
codeは閲覧する人に見やすい表示を心がける必要があります。
jCodeViewerでは自動でコードを整理してくれます。

使用方法

jCodeViewerから、jquery.jcodeviewer.pack.jsとjcodeviewer.cssを、jQueryからjquery.jsをダウンロードします。

<link href="http://yourdomain/jcodeviewer.css" rel="stylesheet" type="text/css">
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.jcodeviewer.pack.js" type="text/javascript"></script>
<script>
$(document).ready(function()	{
	$(".jCodeViewer").jCodeViewer({extraRegExSet:[{
		regEx:"jTagEditor", 
		className:"highlights"
		}]
	});
});
</script>

上記のようにheadに書き込み、HTMLでclass要素にjCodeViewerをtitle要素にタイトル名を記述すれば完成です。


<code class"jCodeViewer" title="タイトル">
コード
</code>

またオプションとして適当な文字列をハイライト表示できます。


<script>
$(document).ready(function()	{
	$(".jCodeViewer").jCodeViewer({extraRegExSet:[{
		regEx:"jTagEditor",  //ハイライトさせる文字
		className:"highlights"
		}]
	});
});
</script>

＊コピー＆ペーストすると番号が出てきてしまいます。 Javascriptサンプルページ一覧

skuare.net