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

HTMLのタグには、HTMLやCSSなどを記述するところに使用するcodeと呼ばれるものがあります。
codeは閲覧する人に見やすい表示を心がける必要があります。
jCodeViewerでは自動でコードを整形してくれます。
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「jCodeViewer」サンプル

sponsors

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

記事作成:
記事URL:

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