京都のたぶん一番安いWeb屋です。たまにお墨付きで記事を書かされて掲載していただいてます。

プログラム関係の記事を書いています。

今回は「google-code-prettify」についてです。

「google-code-prettify」とは？

google-code-prettify
https://code.google.com/p/google-code-prettify/wiki/GettingStarted

これは「シンタックスハイライター」と呼ばれています。

どういったものかというと、プログラムコードをブログなどのWebページに掲載する場合に必要な処理や見た目を整えてくれる便利なライブラリです。

日本では「SyntaxHighlighter」の方がメジャーです。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

使い勝手や見た目は「google-code-prettify」の方が好まれる傾向にあります。導入は簡単なのですが、プログラマでないとミスで動作しない例があったり、日本語での解説も数はあるのですが、親切なものがないために上手に導入できていない方もいるようです。

今回は、そういった方で一度あきらめた方でも簡単に導入できる方法を紹介します。

サンプル

See the Pen html code in CODE Tag. by nodelay (@nodelay) on CodePen.

簡単な導入方法

手順は以下のとおりです。

1. HTMLから「run_prettify.js」を読み込む
2. ページロード完了後に「prettyPrint();」を実行
3. ＜PRE＞タグに「class=”prettyprint linenums”」を指定

たった３ステップです。

では、実際に詳細な作業を見ていきましょう。

HTMLから「run_prettify.js」を読み込む

<!--
    google-code-prettify
=========================================================== -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sunburst"></script>

ファイルは「CDN」などで読み込むと簡単です。

読み込むJSファイルは「run_prettify.js」です。

この「run」がついたファイルはCSSもJSも同時に読み込んでくれるので、コードが１行で済むメリットがあります。

JSの「？」の後ろに「skin=sunburst」とありますが、これは見た目のスキンファイルの指定です。

CSSを別途読み込まない分、パラメーターで指定できます。もちろん、「？」以降を記述しなければ、デフォルトのスキンで表示されます。

スキンはこちらから見ることができます。

ただ、うまく動作しないスキンもあるので「Sunburst」がおすすめです。

ページロード完了後に「prettyPrint();」を実行

//google-code-prettify
//==================================================
jQuery(window).load(function(){
	prettyPrint();
});

jQueryも導入しておいてください。

そのうえで、必ず「ページの読み込みが終わったら実行する」という記述を行います。

追記：この実行をしなくても動作しました。

＜PRE＞タグに「class=”prettyprint linenums”」を指定

次に＜PRE＞タグに「class=”prettyprint linenums”」を指定します。

<pre class="prettyprint linenums">
  <code>&lt;span class="bu lightred pie"&gt;HTML CODE&lt;/span&gt;</code>
</pre>

HTMLに掲載したいコードを「＜pre＞」と「＜code＞」タグで囲んで記述します。

補足事項：codeタグと掲載したいコードの途中に改行があると、改行あるとみなされますので、先頭のcodeタグと掲載ソース一行目の間には改行はいれません。同様に、最後のcodeタグ（スラッシュがつく閉じタグ）と掲載コードの間にも改行は入れません。

あとは、「＜pre＞」タグにclassを指定しておきます。

「prettyprint」はシンタックスハイライトを使うよという宣言みたいなものです。

「linenums」は行番号を表示する宣言みたいなものです。（追記：CSSの指定によっては表示されなくなるかもしれません）

さて、上記では「＜＞」が文字参照でエスケープされています。

「＜」　→　＆ｌｔ；
「＞」　→　＆ｇｔ；

※都合上、全角で書いてあります。

これは、HTMLをそのまま書いてしまうと、ブラウザがHTMLだと認識してレンダリングして表示してしまい、コードで表示されないからです。

しかし、これはこれで結構面倒です。

codeタグ内でHTMLが実行されないように<>を文字参照に変換するJavascript

そこで、事前にHTMLの「＜code＞」タグ内に書かれたHTMLソースを変換するJavascriptを書いて実行しておきます。

//codeタグ内でHTMLが実行されないようにする
//==================================================
jQuery('code').each(function(){
    var text=jQuery(this).html().replace(/</g,'&lt;');
    var text=text.replace(/>/g,'&gt;');
    jQuery(this).html(text);
});

ただし、必ずこのJavascriptはページが読み込まれる前に実行してください。

さきほどのCODEPENのサンプルでもそのようになっていますが、これを行うことで、「＜CODE＞」タグ内にHTMLコードをそのまま書いても動作させることができます。

See the Pen USeful pre tag for google-code-prettify by nodelay (@nodelay) on CodePen.

ちなみに、このプログラムの詳細は別途記事にしてあります。

CSSのサンプル

CSS

/*Preformatted text-style*/
pre {
    width: auto!important;/*指定しないと、横幅狭い場合にはみ出る*/
    padding: 8px 40px!important;/*google-code-prettify使用時の微調整（左paddingは行番号表示で必要）*/;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}
code {
    font-family: 'Open Sans', Georgia;
}
pre.prettyprint.linenums li {
    list-style-type: decimal-leading-zero;/*google-code-prettify使用時に行番号表示するなら必要*/
}

CSSはこんな感じで整えておくと良いでしょう。
Google Webフォント「Open Sans」を指定すると読みやすくなります。

HTMLかCSSであらかじめGoogle Webフォントを読み込んでください。

HTMLでのGoogle Webフォント組み込み例

<link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">

CSSでのGoogle Webフォント組み込み例

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

前述のCODEPENのサンプルの場合、HTMLで読み込んでいます。これはCODEPENが「@import」をサポートしていないからです。

Google Webフォントについては別途詳細に書いてありますので参照してください。

---

最新記事はトップページで！

---