拙い知識ながら、bloggerのテンプレートをいじったり、それをブログに書いたりしていて、なんとかコードは貼れるように覚えてきたけど、もう少し見やすく出来ないものかと考えて、自動的に見やすくしてくれるように、Google-code-prettifyなるものを使ってみることにしました。
↓こんな感じに・ｗ・
<pre class="prettyprint linenums"> （コード） </pre>
参考にさせて頂いたサイト。
■【tips! | google-code-prettifyでシンタックスハイライト】
■【クリボウの Blogger Tips: コードをハイライトする「Code Prettify」ウィジェット】
■【ゾウ科マンモス属Zo-i種» Blog Archive » Code Prettifyでコードをハイライト化（その２）】
手順としては、
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タグを指定した時に、行番号が５ずつしか表示されないので、1ずつ表示させたいので一部編集しました。
3.) HTMLにコードを追加。
4.) bloggerのテンプレートデザイナー→カスタムCSSの追加で、スタイルを好みに合わせます。
以上ですね。後はひたすらちゃんと表示されるか確認してました・ｗ・
後、テンプレートのバックアップは忘れないようにしておきます。
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では確か反映されません。
・下３行は【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 件のコメント:
コメントを投稿