1. google-code-prettify でソースコードを色付けする
ブログに貼り付けるソースコードを、文法に合わせて、色付けし、見やすくしたい。
【ハウツー】ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを (1) によると、
google-code-prettifyはApache License Version 2.0のもとで公開されているシンタックスハイライトモジュール。JavaScriptモジュールとCSSファイルの2つから構成されたシンプルな成果物で、HTML文書内に直接記述されたソースコードをシンタックスハイライト化する機能を提供する。
2. google-code-prettify のダウンロードと解凍
google-code-prettify -
syntax highlighting of
code snippets in a web page -
Google Project Hosting
via kwout
ファイルは、以下の 2 種類あった。
- prettify-small_XXXXX
- prettify_XXXXX
prettify-small_XXXXX は、ソースコードが圧縮されているので、こちらを利用することにした。
ダウンロードしたファイルを解凍すると、prettify.js と prettify.css の二つのファイルと、lang-XXXXX というファイルが複数ある。これを適当なサーバにアップロードして利用する。
3. google-code-prettify を外部サイトにアップロード
Google サイトの場合
google-code-prettify を利用するには、上記の解凍したファイルをアップロードする必要がある。ここでは、アップロード先として、Google サイト を利用する。
- Google サイト において、新しくページを作成。
- その際、使用するテンプレートは、「ファイルキャビネット」
- 先ほど、解凍したファイルを全て、作成したページに「ファイルを追加」する。
Dropbox の場合
- Dropbox の Public フォルダに解凍したファイルを置く。
- ファイルの URL を取得する。
4. Blogger のカスタマイズ
Blogger において、
- テンプレート > HTML の編集
を選択する。
「HTML の編集」画面において、
</head>
を検索し、その直前に、以下のコードを挿入する。ただし、link 要素の href 属性の値は、先ほどアップロードしたファイルの URL に変更する。また、script 要素の src 属性も同様にする。
<link href="http://XXXXX/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://XXXXX/prettify.js"></script>
次に、</head> のすぐ下にある <body> に、以下のように属性を追加した。これにより、ページの内容を読みこむときに、google-code-prettify の JavaScript を呼び出すことになる。
<body onload="prettyPrint()">
最後に、「テンプレートの保存」ボタンを押す。
5. ソースコードを含む記事を作成するには
これで記事を投稿すると、ソースコードが色付けされるようになった。
ソースコードが色付けされるには、記事を書きとき、HTMLで、コードを囲むタグに class="prettyprint" 属性を追加する。
<pre class="prettyprint">
コード
</pre>
記事を書くのに、Windows Live Writer を使用している場合、ソースコードを記事に貼り付けるのを自動化するには、以下を参照。
- AutoHotkey でリボンUIを採用した Windows Live Writer にソースコードを貼り付ける
- AutoHotkey で Windows Live Writer に ソースコード を貼り付ける
6. その他
pre 要素で挟んだソースコードが、表示領域からはみでた場合に、スクロールできるように、HTML の編集において、 pre に対して、以下の CSS を追加した。
oveflow: auto
0コメント:
コメントを投稿