google-code-prettify

使い方

  1. prettify.css, prettify.js をそれぞれ外部CSS、外部JavaScriptに指定する。
  2. prettyPrint(); を実行する。
  3. 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>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;title&gt;HTML 5 complete&lt;/title&gt;
  &lt;style&gt;
    article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
      display: block;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;Hello World&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</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
};

参考URL

テキスト形式にする

google-code-prettify
Google JavaScript Style Guide