サイト内に提示するコードに、シンタックス・ハイライトを適用する

google-code-prettifyのJavaスクリプトをheadタグに追加します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

記事内で、シンタックス・ハイライトを適用したいコードを<pre class="prettyprint">と</pre>の間に記述します。

改行もスペースもタブも無視されずに表示されます。 また、html内で使用するため、「<」「>」「&」は エスケープ・シーケンス「&lt;」「&gt;」「&amp;」で表現する必要があります。

<pre class="prettyprint">
// ここにコードを記述します。改行もスペースも表現されます。
</pre>

デフォルト設定では、明るい背景に向いた色指定になっています。

カラーテーマを指定することで、シンタックス・ハイライトの色を変更できます。

• Prettify Themes Gallery

暗い背景のページ向けのカラーテーマに変更する場合は、headタグに追加したJavaスクリプトのローダーを以下のように変更します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=none&skin=sunburst"></script>

htmlでコードを表記する際は、htmlと誤認されないように、「<」「>」「&」をエスケープシーケンスに変換する必要があります。

手作業で変換するのは大変なので、マクロを使用して変換する方法がおすすめです。

• 山かっこを変換する
• 秀丸エディタで、括弧を変換する。

Webサイト上で、記号を変換してくれるWebサービスを提供しているサイトも存在します。

• HTML特殊文字変換ツール

コードの一行目に、字下げ設定が有効になっている場合があります。

それを抑制するために、cssファイルに、以下のコードを追加します。

/* pre codeのインディエントを抑制する */
pre {
	text-indent: 0;
}
code {
	text-indent: 0;
}

• はてなブログのHtml表記で、シンタックス・ハイライト（強調表示）を実現する。