Home > TagScript > html、css、Java > html5css3

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

新規作成日 2018-11-02
最終更新日

サイト内で、コードを提示して使用方法を紹介したい場合があります。その際、コードをシンタックス・ハイライトと呼ばれるコードの色分けがされているとコードが読みやすくなります。

手作業で、タグを挿入し色指定するのは現実的ではないので、自動で色指定する仕組みが必要になります。

ページに組み込むだけで、簡単にシンタックス・ハイライトが実現できるスクリプトが公開されています。

有名なものは、SyntaxHighlightergoogle-code-prettifyです。

私は、google-code-prettifyを使用しています。

「google-code-prettify」の使い方

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>

カラーテーマ

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

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

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

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

コード内の「<」「>」「&」をエスケープ・シーケンスに変換する

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

記号 エスケープシーケンス
< &lt;
> &gt;
& &amp;

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

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

インディエントを抑制する

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

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

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

関連サイト