google-code-prettifyを使って、自分のホームページで紹介するコードに色を付ける

スクリプトタグを記入します。

このタグにより、「google-code-prettify」が自動で読み込まれ、使えるようになります。

「google-code-prettify」を使用する際、１つのURLで、JavaScriptとCSSを読み込むことができます。

全体のシステムを読み込み、そして、ページ読込で実行する飾りを予定に入れます。追加で利用できる、さまざまなオプションがあります。 あなたは、ランナを設定するために、（CGI引数として）指定することができます。

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

例えば、

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

また、CSS言語拡張機能を読み込むために、langパラメータ、そして、sunburstスキンを読み込むスキン・パラメータを指定します。

色付けしたいコードを<pre class="prettyprint">... </pre>、あるいは、<code class="prettyprint">... </code>の中に入れます。

私は、以下のものを使用していますが、<code class="prettyprint">... </code>のほうが分かりやすいかもしれません。

<pre class="prettyprint"><code>
ここに、色付けしたいコードを記入します。
</code></pre>

ここに、色付けしたいコードを記入します。

htmlで利用するため、「<」、「>」、「&」については、エスケープテキスト「&lt;」、「&gt;」、「&amp;」に変換が必要です。

自分のオリジナルテーマを作成する場合は、類似したテーマのコードの色指定を変更して利用します。

テキストエディタなどのマクロで自動変換する方法がお勧めです。

• Mirosoft Word VBAを使用して山かっこを変換する
• 秀丸エディタで、括弧を変換する。

「google-code-prettify」では、カラーテーマが選択できます。

カラーテーマは、テーマギャラリーから選んでください。大きくは、明色背景のテーマ、暗色背景のテーマで選択すれば良いかとおもいます。

テーマギャラリー

自分のオリジナルテーマを作成する場合は、類似したテーマのコードの色指定を変更して利用します。

スクリプト起動時に指定する

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

クラスで指定する

<pre class="prettyprint sunburst "><code>
ここに、色付けしたいコードを記入します。
</code></pre>

既定の設定では、Cとその仲間、Java、Python、Bash、SQL、HTML、XML、CSS、Javascript、MakefileとRustを含む、多くの言語で動作します。

Ruby、PHP、VBとawkとPerlとRubyの適切なサブセットで、まずまず、動作しますが、コメント記法のため、言語拡張なしでは、Smalltalk、OCamlなどでは動作しません。

そこで、期待通りの色付けができないときは、言語を明示的に指定する必要があります。

現在提供されている拡張言語を以下に示します。

Apollo; Basic; Clojure; CSS; Dart; Erlang; Go; Haskell; Lasso; Lisp, Scheme; Llvm; Logtalk; Lua; Matlab; MLs: F#, Ocaml,SML; Mumps; Nemerle; Pascal; Protocol buffers; R, S; RD; Rust; Scala; SQL; Swift; TCL; Latek; Visual Basic; VHDL; Wiki; XQ; YAML

お気に入りの言語のための拡張を追加したい場合、srcを確認し、pull リクエストを送信してください。

クリプト起動時に指定する

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

クラスで指定する

<pre class="prettyprint lang-html "><code>
ここに、色付けしたいコードを記入します。
</code></pre>

見たところ、wordpressは、閉じる引用符を変更する「スマートな引用」をします。これにより、閉じる引用符は、開いた引用符と一致しません。

コード・スニペットのスマートな引用を止める方法については、WordPressヘルプセンターを参照してください。

コードに行番号を配置する場合は、linenumsクラスを使用します。開始行を指定する場合は、linenums：52のように、そのクラスの最後にコロンと行番号を追加します。

例：行番号を4から開始します。

<pre class="prettyprint linenums:4">// This is line 4. これは、行4です。
foo();
bar();
baz();
boo();
far();
faz();
</pre>

// This is line 4. これは、行4です。
foo();
bar();
baz();
boo();
far();
faz();

行の番号付けは、デフォルトのスタイルシートprettify.cssのCSSによって制御されているので、CSSを修正する必要があります。

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>

すべてに適用されてしまうので、元に戻すには、cssを再度修正して、行の番号付けを戻す必要があります。

nocodeクラスを使用して、コードでないマークアップの範囲を指定することができます。

<pre class=prettyprint>
int x = foo();  /* This is a comment  <span class="nocode">This is not code</span>
  Continuation of comment */
int y = bar();
</pre>

int x = foo();  /* This is a comment  This is not code
  Continuation of comment */
int y = bar();

より完全な例は、issue22のテストケースを参照してください。