prettify.css, prettify.js
をそれぞれ外部CSS、外部JavaScriptに指定する。prettyPrint();
を実行する。class="prettyprint"
を指定された要素がシンタックスハイライトされる。class属性値に lang-js
を指定すると、JavaScript言語としてシンタックスハイライトされます。
<link rel="stylesheet" href="./prettify/prettify.css" type="text/css" />
<script type="text/javascript" src="./prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js"><code>function trim (str) {
return str.replace(/^\s+|\s+$/g, '');
}
var str = ' Hello, World! ';
str = trim(str);
alert(str); // Hello, World!
</code></pre>
lang-****
を省略すると、自動的に言語を判定します。(コードが短いと、誤判定しやすいようです)
<pre class="prettyprint"><code><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML 5 complete</title>
<style>
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
</code></pre>
プロパティを整列してみる。
var inset = {
top : 10,
right : 20,
bottom: 15,
left : 12
};
WRONG_Object.prototype = {
a : 0,
b : 1,
lengthyName: 2
};
プロパティを整列しない。
var inset = {
top: 10,
right: 20,
bottom: 15,
left: 12
};
CORRECT_Object.prototype = {
a: 0,
b: 1,
lengthyName: 2
};
テキスト形式にする