Google code-prettifyのBloggerへの導入方法 : 灰色スズメの足跡

このブログではプログラムのソースコードを色分け表示するためにGoogle code-prettifyを使用しています。 code-prettifyを使うとソースコードを構文に従い、判り易く色分け表示してくれます。

Bloggerでcode-prettifyを使用する方法をご紹介します。

code-prettify導入手順

code-prettifyはGitHubで公開されています。
Google code-prettify

code-prettify公式の導入手順も公開されています。
code-prettify/docs/getting_started.md

code-prettifyの詳細はGitHubのcode-prettifyのページを参照してください。ここではBloggerへの導入に絞ってご説明します。

Bloggerでcode-prettifyを導入する手順は下記の３つです。

Bloggerへcode-prettifyのJavaScriptを読み込ませる
ソースコードをpreタグで括る
Bloggerへソースコードの見た目を設定するCSSを追加する

これらの手順についてご説明します。

Bloggerへcode-prettifyのJavaScriptを読み込ませる

code-prettifyはJavaScriptとCSSで出来ています。まずは、code-prettifyのJavaScriptをBloggerへ読み込ませます。

そのために下記の手順を踏みます。

Bloggerの設定画面で、

［テーマ］の編集画面を表示
［HTMLの編集］ボタンを押下

Bloggerのレイアウト用HTMLがテキストボックスに表示されますので、head終了タグ（</head>）の直前に下記のscriptタグを挿入して、code-prettifyのJavaScriptをBloggerに読み込ませます。

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

これで、下記の拡張子のプログラミング言語は色分け表示できます。
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".

上記以外のプログラミング言語を色分け表示したいのであれば、scriptタグのsrc属性値のrun_prettify.jsの後に「?lang=」と付け加えて、code-prettifyに色分け表示させたいプログラミング言語を指定します。

例えばExcel VBAとCSSを色分け表示させたければ下記のようにします。

  ...
  <script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=vb&lang=css' type='text/javascript' />
</head>
...

lang=xxxのxxxにはプログラミング言語を示す文字列を指定します。指定可能な文字列は下記Webページをご参照ください。
index of language handlers

これでcode-prettifyのJavaScriptをBloggerへ読み込ませる手順は完了です。

ソースコードをpreタグで括る

code-prettifyでソースコードを色分け表示するためには、下記のようにソースコードをpreタグで括り、class属性値にprettyprintを指定します。

<pre class="prettyprint lang-xxx linenums">
ソースコード
</pre>

HTMLの文書構造の構成を意味させるためにソースコードをcodeタグで括りたいという方は、下記のようにpreタグの内側にcodeタグを設置してもcode-prettifyで色分け表示できます。
このcodeタグは表示されず、見た目に影響を与えません。

<pre class="prettyprint lang-xxx linenums">
<code>
ソースコード
</code>
</pre>

preタグのclass属性値

<pre class="prettyprint lang-xxx linenums">

prettyprint: preタグのclass属性値にprettyprintがあることで、preタグで括られたソースコードはcode-prettifyにより色分け表示されます。
lang-xxx: lang-xxxのxxxには下記のプログラミング言語の拡張子を示す文字列を指定します。
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".

上記以外の指定可能な文字列は下記Webページをご参照ください。
index of language handlers

HTMLならlang-html、CSSならlang-css、JavaScriptならlang-jsとなります。

色分け表示させたいプログラミング言語が上記の一覧にない場合、プログラミング言語の構文規則が近いものを指定します。例えば、Excel VBAは上記の一覧に存在しないので、構文規則の近いVisual Basicを指定します（lang-vb）。
linenums: linenumsを指定すると行番号を表示できます。行番号は１から始まりますが、下記のように番号を指定するとその番号から始まるようになります。
linenums:10
上記のように書くと行番号は10から始まります。

code-prettifyが生成するHTML

code-prettifyはprettyprintをclass属性値に持つpreタグ内のソースコードを読み込んでHTMLを生成します。 preタグとその中のソースコードはそのHTMLで置き換えられます。

code-prettifyは下記のpreタグで括られたソースコードを読み込みます。

<pre class="prettyprint lang-js linenums">
function testFunction()
{
    const testMessage = "TEST";
    alert(testMessage);
    return;
}
</pre>

そして、code-prettifyは読み込んだソースコードから下記のHTMLを生成して置き換えます。

<pre class="prettyprint lang-js linenums prettyprinted" style="">
    <ol class="linenums">
        <li class="L0">
            <span class="kwd">function</span>
            <span class="pln"> testFunction</span>
            <span class="pun">()</span>
        </li>
        <li class="L1">
            <span class="pun">{</span>
        </li>
        <li class="L2">
            <span class="pln">    </span>
            <span class="kwd">const</span>
            <span class="pln"> testMessage </span>
            <span class="pun">=</span>
            <span class="pln"> </span>
            <span class="str">"TEST"</span>
            <span class="pun">;</span>
        </li>
        <li class="L3">
            <span class="pln">    alert</span>
            <span class="pun">(</span>
            <span class="pln">testMessage</span>
            <span class="pun">);</span>
        </li>
        <li class="L4">
            <span class="pln">    </span>
            <span class="kwd">return</span>
            <span class="pun">;</span>
        </li>
        <li class="L5">
            <span class="pun">}</span>
        </li>
    </ol>
</pre>

上記のcode-prettifyが出力したHTMLを念頭に置きながら、追加するCSSの説明をお読みください。

Bloggerへソースコードの見た目を設定するCSSを追加する

code-prettifyはソースコードの色分け表示などの見た目に関する設定をCSSで行っています。 CSSの設定方法には２通りあり、テーマと呼ばれる既存設定を読み込む方法と独自のCSSで指定する方法があります。

Bloggerへcode-prettifyのテーマを読み込ませる

code-prettifyには見た目の設定をまとめたテーマがあらかじめ何種類かあり、scriptタグのJavaScriptの読み込み箇所で指定できます。
あらかじめ用意されているテーマは下記をご参照ください。
Gallery of themes for code prettify

scriptタグで上記のテーマを読み込むには下記のように「skin=」を追加します。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=vb&lang=css&skin=desert' type='text/javascript' />

「skin=」に続くテーマの名前はすべて小文字で指定してください。

code-prettifyのCSS

このブログでは既存のテーマは一切使わずに必要なものは独自のCSSで指定しています。
CSSで指定する方法をご紹介します。

CSSの内容

code-prettifyの見た目を設定するCSSは下記になります。
下記のCSSはcode-prettifyのDefaultテーマのCSSを改造したものです。

/*
Google code-prettify
*/
pre.prettyprint
{
    border: 1px solid #cccccc !important;
    line-height: 1.5em;
    overflow: auto;
    padding: 2em !important;
}

pre.prettyprint > ol.linenums
{
    padding-left: 2em;
}

pre.prettyprint > ol.linenums > li
{
    border-left: 1px solid #cccccc;
    margin-bottom: 0;
}

pre.prettyprint > ol.linenums > li.L0,
pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L2,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L4,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L6,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L8,
pre.prettyprint > ol.linenums > li.L9 
{
    list-style-type: decimal;
}

pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L9 
{
    background-color: transparent;
}

pre.prettyprint > ol.linenums > li span:first-child
{
    padding-left: 1em;
}

pre.prettyprint > ol.linenums > li span:last-child
{
    padding-right: 1em;
}

/* plain text */
pre.prettyprint .pln { color: #cccccc; }

/* string content */
pre.prettyprint .str { color: #cccc33; }
/* a keyword */
pre.prettyprint .kwd { color: #00cc00; }
/* a comment */
pre.prettyprint .com { color: #cc3366; }
/* a type name */
pre.prettyprint .typ { color: #00cc00; }
/* a literal value */
pre.prettyprint .lit { color: #3399cc; }
/* punctuation, lisp open bracket, lisp close bracket */
pre.prettyprint .pun,
pre.prettyprint .opn,
pre.prettyprint .clo
{ color: #cccccc; }
/* a markup tag name */
pre.prettyprint .tag { color: #3399cc; }
/* a markup attribute name */
pre.prettyprint .atn { color: #00cc00; }
/* a markup attribute value */
pre.prettyprint .atv { color: #cccc33; }
/* a declaration; a variable name */
pre.prettyprint .dec,
pre.prettyprint .var
{ color: #00cc00; }
/* a function name */
pre.prettyprint .fun { color: #cc66cc; }

pre.prettyprint

pre.prettyprint
{
    border: 1px solid #cccccc !important;
    line-height: 1.5em;
    overflow: auto;
    padding: 2em !important;
}

code-prettifyでソースコードを色分け表示するには、ソースコードをpreタグで括り、そのpreタグのclass属性値にprettyprintを指定します。

code-prettifyはscriptタグのskinでテーマを指定しなくても初期設定のCSSを読み込んでいます。上記の!importantの設定はcode-prettifyの初期設定を上書きするために必要です。 code-prettifyの初期設定で設定されていない項目は、!importantの指定がなくてもCSSの設定が反映されます。

このCSSは、prettyprintを属性値に持つpreタグに枠線を引いて、行の高さを1.5emにして、画面からはみ出したらブラウザで自動処理して、パディングを2emにするように設定しています。

pre.prettyprint > ol.linenums

pre.prettyprint > ol.linenums
{
    padding-left: 2em;
}

code-prettifyでは行番号の表示ができます。 code-prettifyで行番号を表示するにはpreタグのclass属性値にlinenumsを指定します。

上記は、linenumsを属性値に持つolタグの左側に2emのパディングを入れるように設定しています。この設定がないとolタグの標準的な左側のパディングが入ってしまい、隙間が空きすぎる見た目になってしまいます。

code-prettifyが行番号を表示する場合に生成するHTMLは、preタグの内側にolタグのリストを入れる形式となります。

<pre class="prettyprint lang-js linenums prettyprinted" style="">
    <ol class="linenums">
        ...
    </ol>
</pre>

pre.prettyprint > ol.linenums > li

pre.prettyprint > ol.linenums > li
{
    border-left: 1px solid #cccccc;
    margin-bottom: 0;
}

行番号を表示する際に、行番号とソースコードの間に縦線を引いています。

margin-bottom: 0は、Bloggerの初期設定CSSのmargin-bottom: 0.25emを無効にするために指定しています。 margin-bottom: 0を指定しないと行番号とソースコードの間の縦線が点線のようになってしまいます。

pre.prettyprint > ol.linenums > li.L0

preタグに行番号を表示する指定（linenums）をするとcode-prettifyは下記のようなHTMLを出力します。

<pre class="prettyprint lang-js linenums prettyprinted" style="">
    <ol class="linenums">
        <li class="L0">...</li>
        <li class="L1">...</li>
        ...
        <li class="L9">...</li>
        <li class="L0">...</li>
        ...
    </ol>
</pre>

ソースコードの１行を１つのliタグで括っています。 liタグのclass属性値はL0～L9となっていて、ソースコードの行数分だけ繰り返しています。

code-prettifyがこのようなHTMLを出力することを踏まえて以下の説明をお読みください。

pre.prettyprint > ol.linenums > li.L0,
pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L2,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L4,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L6,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L8,
pre.prettyprint > ol.linenums > li.L9 
{
    list-style-type: decimal;
}

このCSS設定をしないと、５行ごとに行番号が表示されるようになります。すべての行に行番号を表示するためにli.L0～li.L9にlist-style-type: decimalを設定しています。

pre.prettyprint > ol.linenums > li.L1,
pre.prettyprint > ol.linenums > li.L3,
pre.prettyprint > ol.linenums > li.L5,
pre.prettyprint > ol.linenums > li.L7,
pre.prettyprint > ol.linenums > li.L9 
{
    background-color: transparent;
}

行番号を表示する際にcode-prettifyは初期設定CSSで、奇数行の背景色を#eeeeeeという淡い灰色にしてしまいます。これを無効にするためにbackground-color: transparentを設定しています。

pre.prettyprint > ol.linenums > li span

pre.prettyprint > ol.linenums > li span:first-child
{
    padding-left: 1em;
}

pre.prettyprint > ol.linenums > li span:last-child
{
    padding-right: 1em;
}

行番号を表示する際に、ソースコードの左と右に1emのパディングを入れています。これを入れないとソースコードと枠線の間に余白がなくなり、窮屈な見た目になってしまいます。

liタグとspanタグの間のCSSセレクタ指定を子セレクタ（>）ではなく子孫セレクタ（空白）にしているのは、preタグの内側にcodeタグを指定した場合を考慮してのことです。

ソースコードを表示する際にpreタグのみで括った場合は、

<pre class="prettyprint lang-xxx linenums">
function testFunction()
...
</pre>

code-prettifyは下記のHTMLを出力します。

<pre class="prettyprint lang-js linenums prettyprinted" style="">
    <ol class="linenums">
        <li class="L0">
            <span class="kwd">function</span>
            <span class="pln"> testFunction</span>
            <span class="pun">()</span>
        </li>
        ...
    </ol>
</pre>

ソースコードを表示する際にpreタグの内側にcodeタグを指定した場合は、

<pre class="prettyprint lang-xxx linenums">
<code>
function testFunction()
...
</code>
</pre>

code-prettifyは下記のHTMLを出力します。

<pre class="prettyprint lang-js linenums prettyprinted" style="">
    <ol class="linenums">
        <li class="L0">
            <code>
                <span class="kwd">function</span>
                <span class="pln"> testFunction</span>
                <span class="pun">()</span>
            </code>
        </li>
        ...
    </ol>
</pre>

preタグのみで括った場合とpreタグとcodeタグで括った場合の両方に対応するために、liタグとspanタグは子孫セレクタで設定しています。

これらのCSSにより、上記の２通りのHTMLで<span class="kwd">function</span>の左側に1emのパディングを入れて、<span class="pun">()</span>の右側に1emのパディングを入れています。
li span:first-childは、liタグの子孫の最初のspanタグという意味です。
li span:last-childは、liタグの子孫の最後のspanタグという意味です。
liの子孫にspanタグが１つしかない場合は、最初と最後のspanタグがその１つしかないspanタグになるので、その１つしかないspanタグの左右に1emのパディングが入るようになります。

pre.prettyprint .xxx

code-prettifyは下記のソースコードをプログラミング言語の構文に従って字句に分解して、その字句ごとにspanタグで括ります。

function testFunction()
{
    ...
}

<pre class="prettyprint lang-js linenums prettyprinted" style="">
    <ol class="linenums">
        <li class="L0">
            <span class="kwd">function</span>
            <span class="pln"> testFunction</span>
            <span class="pun">()</span>
        </li>
        ...
    </ol>
</pre>

このspanタグにはプログラミング言語の構文規則に基づいた字句の種別を示すclass属性値が設定されているので、そのclass属性値に応じて色分け表示のCSSを設定していきます。

その色分け表示のCSSの設定が下記のCSSです。

/* plain text */
pre.prettyprint .pln { color: #cccccc; }

/* string content */
pre.prettyprint .str { color: #cccc33; }
/* a keyword */
pre.prettyprint .kwd { color: #00cc00; }
/* a comment */
pre.prettyprint .com { color: #cc3366; }
/* a type name */
pre.prettyprint .typ { color: #00cc00; }
/* a literal value */
pre.prettyprint .lit { color: #3399cc; }
/* punctuation, lisp open bracket, lisp close bracket */
pre.prettyprint .pun,
pre.prettyprint .opn,
pre.prettyprint .clo
{ color: #cccccc; }
/* a markup tag name */
pre.prettyprint .tag { color: #3399cc; }
/* a markup attribute name */
pre.prettyprint .atn { color: #00cc00; }
/* a markup attribute value */
pre.prettyprint .atv { color: #cccc33; }
/* a declaration; a variable name */
pre.prettyprint .dec,
pre.prettyprint .var
{ color: #00cc00; }
/* a function name */
pre.prettyprint .fun { color: #cc66cc; }

.plnは通常の文字列、.strは引用符で括られた文字列、.comはコメントなどとなっています。

colorしか設定していませんが、font-weight: boldを指定すれば太字にすることもできますし、そのほかの設定もできます。

BloggerへのCSS追加手順

Bloggerへcode-prettifyの見た目を設定するCSSを追加するには下記の手順で行います。

Bloggerの設定画面で、

［テーマ］の編集画面を表示
［カスタマイズ］ボタンを押下
Blogger テーマデザイナーを表示
［上級者向け］ー［CSSを追加］ー［カスタム CSS を追加］のテキストボックスにCSSを追加
［ブログに適用］ボタンを押下

他の選択肢

Bloggerでソースコードの色分け表示を行えるのは、code-prettifyだけではありません。

他の有力な選択肢としては、SyntaxHighlighterがあります。
SyntaxHighlighter

SyntaxHighlighterにはcode-prettifyにはない、行の強調表示の機能などがあります。

記事終わり

灰色スズメの足跡

2017年12月11日月曜日