「prettify.css」の編集
解凍したgoogle-code-prettifyの中の「src」フォルダにある
「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 }
↑の中の↓の部分を
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 }
*/
「prettify.css」と「prettify.js」（これもsrcフォルダにある）をDropboxやGoogleサイト等へアップロード
テンプレート → HTMLの編集 にて
</head>のすぐ上に↓を追加
<link href='アップロード先URL/prettify.css' rel='stylesheet' type='text/css'/> <script src='アップロード先URL/prettify.js' type='text/javascript'/><body>の中に
onload='prettyPrint()'を追加↓
<body expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint()'>CSSの追加で形を整える
※↓現在の設定↓
pre.prettyprint, code.prettyprint {
background-color: #fffffc;
}
pre.prettyprint {
width: 95%;
margin: .8em; auto;
word-wrap: break-word;
white-space: pre-wrap;
overflow: auto
}
以上で設定完了
使用する時は ↓行数表示無し↓
<pre class="prettyprint"> ソースコード </pre>↓行数表示あり↓
<pre class="prettyprint linenums"> ソースコード </pre>ソースコードの「< → <」「> → >」に変換する必要あり
作成でコード貼り付けるとHTMLでは変換されているので
HTMLでタグ貼り付け
もしくは
クリボウさんのコードをハイライトする「Code Prettify」ウィジェットにて
変換ツールを使用
0 件のコメント:
コメントを投稿