[beautyOfCodeライブラリ] コードをハイライト表示する (Syntax Hilighter)

説明

beautyOfCodeライブラリでコードをハイライト表示するには$.beautyOfCode.init()メソッドにオプションパラメータを指定します。まず、対応言語はbrushesオプションに配列形式で言語を指定します。JavaScriptの場合は"JScript"を指定します。あとはHTMLタグでpreにcodeのスタイルシートクラス名を指定し、内側にcodeタグを記述します。このcodeタグのスタイルシートクラス名に言語名を指定します。JavaScriptの場合はjavascriptを指定します。
対応テーマ:http://alexgorbatchev.com/pub/sh/2.1.364/styles/
対応言語 :http://alexgorbatchev.com/pub/sh/2.1.364/scripts/

サンプルプログラム

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.beautyOfCode.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>コードハイライト</h1>
<pre class="code">
<code class="javascript">
for(var i=0; i<9999; i++) { data.push(i); }
var txtObj = activeDocument.textFrames.add();
txtObj.contents = "AI JavaScript Sample";
var psObj = activeDocument.paragraphStyles.add("センタリング");
var paraAttrObj = psObj.paragraphAttributes;
paraAttrObj.justification = Justification.CENTER; // センタリング(中揃え)
psObj.applyTo(txtObj.paragraphs[0], true);
</code>
</pre>
</body>
</html>

【sample.js】
$.beautyOfCode.init({
brushes: ["Xml", "JScript", "Plain", "Php"]
});
サンプルを実行
[戻る]