シンタックスハイライトとは、
プログラムのコードを装飾して、読みやすくすることです。
テキストエディタのハイライト機能と同じようなものですね。
Googleにて「google-code-prettify」というツールが提供されているので、
これで実現してみようと思います。
【手順】
- 「google-code-prettify」からプログラム本体をダウンロード
- ダウンロードしたプログラムから「prettify.js」と「prettify.css」を取り出す
- 任意のサーバにアップロードする
- Bloggerのテンプレートに埋め込む
- 実際に試してみる
・・・では、やってみます。
1.まず、「google-code-prettify」からプログラム本体をダウンロードします。
⇒ページ内の「Download」からダウンロードページに移動
「prettify-small-*****.tar.bz2」、または、「prettify-*****.tar.bz2」をダウンロードします。
⇒今回は「small」を使います。
2.ダウンロードしたファイルを解凍ツールを使って解凍して、「prettify.js」と「prettify.css」を取り出します。
3.取り出した「prettify.js」と「prettify.css」を任意のサーバにアップロードします。
⇒今回は同じGoogleサービスの「ドライブ」にアップしてみました。
アップロードしたファイルを「ウェブ上で一般公開」にして公開URLを取得しておきます。
ここでひと手間加えます。
取得した公開URLの「https://drive.google.com/file/d/******/」の「******」をコピーし、
「https://www.googledrive.com/host/」と連結します。
⇒こんな感じ・・・『https://www.googledrive.com/host/******』
※GoogleドライブのWEBホスティング機能により、
アップロードしたファイルが外部参照されるようになります。
⇒Googleドライブの公式ヘルプ
4.Bloggerのテンプレートのheadタグに埋め込みます。
<link href='prettify.cssファイルのURL' rel='stylesheet' type='text/css'/> <script src='prettify.jsファイルのURL' type='text/javascript'/>
続いて、bodyタグに実行文を追加します。
onload='prettyPrint()'
・・・こんな感じ・・・
注意点として・・・
タグで使用する"<"や">"の記号は
文字参照（<と>）に置き換える必要があります。
上記タグで括った結果は「4.」の項を参照。
