2012/04/30

[blogger]ブログにコードを見やすく貼る。Google-code-prettify導入しました。

follow us in feedly
follow us in RSS

拙い知識ながら、bloggerのテンプレートをいじったり、それをブログに書いたりしていて、なんとかコードは貼れるように覚えてきたけど、もう少し見やすく出来ないものかと考えて、自動的に見やすくしてくれるように、Google-code-prettifyなるものを使ってみることにしました。

↓こんな感じに・w・
<pre class="prettyprint linenums">
(コード)
</pre>

参考にさせて頂いたサイト。
【tips! | google-code-prettifyでシンタックスハイライト】
【クリボウの Blogger Tips: コードをハイライトする「Code Prettify」ウィジェット】
【ゾウ科マンモス属Zo-i種» Blog Archive » Code Prettifyでコードをハイライト化(その2)】


手順としては、
1.) 【Downloads - google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting】から「prettify-small-1-Jun-2011.tar.bz2」をダウンロード。
・簡略化なのか、サイズの小さいもので導入しました。

2.) 中にある「prettify.css」の編集(メモ帳などで可能です。)、その後アップロード。
 ・これは、デフォルトだと、【prettyprint linenums】とpreタグを指定した時に、行番号が5ずつしか表示されないので、1ずつ表示させたいので一部編集しました。

3.) HTMLにコードを追加。

4.) bloggerのテンプレートデザイナー→カスタムCSSの追加で、スタイルを好みに合わせます。

以上ですね。後はひたすらちゃんと表示されるか確認してました・w・
後、テンプレートのバックアップは忘れないようにしておきます。

1.) ファイルのダウンロード

■まずは、上であげたGoogleのサイトから、構成ファイルをダウンロードします。
2種類あるのですが、下にある「Minimized source files」と説明のある方でいいようです。
ファイルは圧縮ファイルになっているので、解凍します。

2.)  「prettify.css」の編集、アップロード

※行番号をつけたりしない、もしくは5行毎がいい場合は、この工程はパスしてください。

■ダウンロードしたフォルダの中にある「prettify.css」をメモ帳などで開きます。
ここで、スタイルを全て編集してしまってもいいのですが、テンプレートデザイナーを利用して後で決めたほうが、プレビューを見ながら変更できるので、行番号の為だけに編集します。
.pln{color:#000}
@media screen{.str{color:#080}
.kwd{color:#008}
.com{color:#800}
.typ{color:#606}
.lit{color:#066}
.pun,.opn,.clo{color:#660}
.tag{color:#008}
.atn{color:#606}
.atv{color:#080}
.dec,.var{color:#606}
.fun{color:red}}
@media print,projection{.str{color:#060}
.kwd{color:#006;font-weight:bold}
.com{color:#600;font-style:italic}
.typ{color:#404;font-weight:bold}
.lit{color:#044}
.pun,.opn,.clo{color:#440}
.tag{color:#006;font-weight:bold}
.atn{color:#404}
.atv{color:#060}}
pre.prettyprint{padding:2px;border:2px solid #333631}
ol.linenums{margin-top:0;margin-bottom:0}
 li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}
 li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
ファイルを開くとこんな内容になっています。メモ帳で開くと、改行されずにつながってるので、もう少しカオスですが。

この中の
 li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}
この部分を・・・

/* li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none} */
このように「/* */」で挟んでコメントアウトしてあげます。
挟んだら、上書き保存か、別ファイル名を付けて保存します。

■次はファイルをアップロード。googleサービスで、サイト作成も無料で可能ですので、アップロード用のURLを作っておくと便利でした。
そのような適当なサイトにダウンロードしたファイルをアップします。

3.) HTMLにコードを追加

■次に「HTMLの編集」でテンプレートを開いて、
・「</head>」タグのすぐ上に
<link href='アップロードしたURL/prettify.css' rel='stylesheet' type='text/css'/>
<script src='アップロードしたURL/prettify.js' type='text/javascript'/>
このようにコードを追加します。

・そして、「<body --省略--(bodyだけの場合ももちろんあります)>」の最後の部分に
【onload='prettyPrint()'】と付け足します。

<body expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint()'>
例としてこんな感じに。

4.) bloggerのテンプレートデザイナー
 →カスタムCSSの追加で、スタイルを好みに合わせます。

■最後に、好みのスタイルで表示するように、カスタムCSSからコードを追加します。
プレビューがリアルタイムで見られるので、変更に便利です。

今の設定・・・
/* code-prettify */
pre.prettyprint, code.prettyprint {
        background-color: #fffffc;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
}
pre.prettyprint {
        width: 95%;
        margin: .8em; auto;
        word-wrap: break-word;
        white-space: pre-wrap;
        overflow: auto
}
今、わたしが設定している内容がこんな感じです。(2012/04/30現在)

・バックグラウンドの色を変え(投稿記事の背景色と合わせています)
・radiusで枠線に丸みを付けています。←これはCSS3の設定なので、IEでは確か反映されません。
・下3行は【tips! | CSS3「word-wrap: break-word」とCSS2.1「white-space: pre-wrap」】を参考して、追加しました。

スタイルは、以下のサイトでサンプルが見られますので、それぞれのCSSを参考にするといいと思います。

【Prettify Themes Gallery】

以上で導入完了ですが、実際に使うにあたって、
【クリボウの Blogger Tips: コードをハイライトする「Code Prettify」ウィジェット】
クリボウさんのサイトで、コード変換用javaを使わせて頂いてます。

載せたいコードを変換して、先頭の
<pre class="prettyprint">

<pre class="prettyprint linenums">
このようにすると行番号が表示されます。
元のままで使えば、行番号は付かないので、使い分ける場合はそのようにどうぞ。

以上です。
参考にさせて頂いたサイトの方々、ありがとうございました!

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...