以下の手順ではもうprettyprint できなくなっているため、以下のリンクを参照。
google blog にprettyprint を適用する
[ 手順１ ]
https://code.google.com/p/google-code-prettify/downloads/list
より、「prettify-small-X-XXX-20XX.tar.bz2」をダウンロード。（XXはバージョンとか日付とか）
[ 手順２ ]
手順１でダウンロードしたファイルを解凍して、prettify.css ファイルの40 - 47 行目を以下のようにコメントアウトする。
[ prettify.css ]
/* Pretty printing styles. Used with prettify.js. */
/* SPAN elements with the classes below are added by prettyprint. */
.pln { color: #000 } /* plain text */
@media screen {
.str { color: #080 } /* string content */
.kwd { color: #008 } /* a keyword */
.com { color: #800 } /* a comment */
.typ { color: #606 } /* a type name */
.lit { color: #066 } /* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
.pun, .opn, .clo { color: #660 }
.tag { color: #008 } /* a markup tag name */
.atn { color: #606 } /* a markup attribute name */
.atv { color: #080 } /* a markup attribute value */
.dec, .var { color: #606 } /* a declaration; a variable name */
.fun { color: red } /* a function name */
}
/* Use higher contrast and text-weight for printable form. */
@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 }
}
/* Put a border around prettyprinted code snippets. */
pre.prettyprint { padding: 2px; border: 1px solid #888 }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
/*
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
*/
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
[ 手順３ ]
手順２で解凍したファイルが入っているフォルダごと、Dropbox にアップロードする。
URL は、以下のような感じ。
https://www.dropbox.com/home/Blog/prettify-4-Mar-2013
[ 手順４ ]
Dropbox にアップロードしたURL をコピーして、blogger のHTML の編集から、HTMLを以下のように編集する。
</head> タグのすぐ上に、以下２行を追加。
<href link='https://www.dropbox.com/home/Blog/prettify-4-Mar-2013/google-code-prettify/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='https://www.dropbox.com/home/Blog/prettify-4-Mar-2013/google-code-prettify/js-modules/prettify.js' type='text/javascript'/>
元々ある、<body> のラインをコメントアウトし、以下を追加。
<body expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint()'>
[ 手順５ ]
ブログを記載するときに、HTML 編集にして、以下のタグを使う。
<pre class="prettyprint"> // コードを挿入 </pre>もしくは、行番号を表示したければ、
<pre class="prettyprint linenums"> // コードを挿入 </pre>と記載すれば、出来上がり！
0 件のコメント:
コメントを投稿