どうもキーです。
今回からブログなどにソースコードを載せるときに使える方法として、「pre要素 + code要素」からより実用的なものへ進んで説明したいと思います。
一般的に使わる方法はいくつかあると思いますが、本ブログではその中でも特にメジャーと思われる以下の3つを紹介予定です。
-
- google-code-prettify (JavaScriptのライブラリ)
- Crayon Syntax Highlighter (プラグイン)
- Gist (GitHubのサービス)
これらは「シンタックスハイライト」という、プログラム中で特殊な意味を持つ単語に色をつける表示をすることができます。
今回は、本ブログでも利用している「google-code-prettify (JavaScriptのライブラリ)」を紹介します。
サンプル
今回は以下のようなイメージでソースコードを表示させます。
<pre class="prettyprint linenums"><code>
.wrap {
max-width: 1000px;
/* こんな感じ */
}
</code></pre>
google-code-prettifyの種類
google-code-prettifyの使い方は2種類あります。
- CDN版
- ダウンロード版
CDN版はスクリプトのURLを読み込んで使用します。
ダウンロード版はスクリプトファイルをダウンロードして、Webサーバー上にアップロードして使用します。
ダウンロードファイルのほうがスクリプトファイルを編集できたり、外部のサーバーに依存せず使用できるため、Webサーバに自分でファイルをアップできないなど特別な事情がなければダウンロード版で良いでしょう。
以下ではダウンロード版の使い方を説明します。
準備
- ファイルのダウンロード
現在はGitHub上にファイルが保管されているようです。
(GitHub – google/code-prettify: Automatically exported from code.google.com/p/google-code-prettify)
ソース一覧の右上の「Clone or download」から「Download ZIP」を選んでダウンロードしてください。
- Webサーバにアップするファイルを選びます。
今回はまず使い方を覚えるために最小限必要なファイルだけをアップしようと思います。
ダウンロードしたzipファイルを解答して「loader」フォルダの中から以下の2つを取り出してください。
・prettify.css
・prettify.js
「loader」フォルダなどにある、「lang-xxx.js」のファイルはxxxに入るプログラミング言語の予約語を取り扱うためのものです。
ただこちらは説明すると説明がかなり多くなるため今回は省きます。
- 自身のサイトデータを上げているフォルダに「code-prettify」というようなフォルダを作成し、上記の2ファイルをアップロードしてください。
例えばWordPressなら「wp-content」フォルダがある場所と同じ場所に作る場合が多いと思います。
- 「header.php」でスクリプトを読み込みます。
(時代的にはbodyタグの最後で読み込んだほうが良いのかもしれませんが、余計なトラブルは避けたいため一旦確実な方法で)
例の如く「</head>」の前に記載します。
<head>
<!-- 中略 -->
<link href="/code-prettify/prettify.css" type="text/css" rel="stylesheet"> <!-- デフォルトのスタイルシート読み込み -->
<script type="text/javascript" src="/code-prettify/prettify.js"></script> <!-- スクリプトファイル読み込み -->
</head>
- 「header.php」で上記で定義したスクリプトからソースコードの表示関数を実行します。
「ソースコードの表示スタイルを変更する」という関数を定義しておくイメージです。
珍しく「<body>」タグに記載します。「<body>」タグ自身を以下のようにしてください。
<body onload="prettyPrint()" <!-- 他の処理がある場合はそのまま残しておく --> >
以上で準備は完了です。
使い方
前回(Webサイトにソースコードを載せる方法(1))紹介した、「pre要素 + code要素」を使う方法から、pre要素の記述に少し加えるだけです。
ソースコードを表示したい部分を以下のようにしましょう。
<pre class="prettyprint linenums"><code>
<!-- ここにソースコードを記載 -->
</code></pre>
これでgoogle-code-prettifyのスタイルでソースコードを表示できます。
「class="prettyprint linenums"」は「prettyprint」スタイルで表示し、「行番号を表示する」という意味です。必ずpre要素に記載してください。code要素に記載すると違う動作をするようです。(使い方があるのかもしれませんが、私のところでは文字の色がうまく表示されませんでした。)
最後にブラウザのキャッシュを削除して動作を確認しましょう。
結果
ソースコードが綺麗に表示できる。
基本的な使い方はこれで十分ですが、準備手順の2番でも書いた通り、この状態では様々なプログラミング言語の予約後には対応していないです。
その他にも便利なカスタマイズなどもあるため、自身が慣れたら記事を書こうかと考えています。
キーのひとこと：
WordPressって奥が深いですね。
今までWeb系の技術に触れてこなかったので、JavaScriptやcss、レイアウトに関する知識などを一から学ぶ良い機会になっています。
Web系の技術は時代にもあっているので時代に追いつけるように勉強していきたいですね。
