[したいこと・しりたいこと・目標]
bloggerでソースコードに色を付ける。bloggerでソースコードをハイライト処理したい。
bloggerでsource codeに色を付ける。
bloggerでsource codeをハイライト処理したい。
google-code-prettifyでソースコードに色を付ける。
google-code-prettifyでハイライト処理したい。
prettyprintでソースコードに色を付ける。
prettyprintでハイライト処理したい。
[したこと]
(01)google-code-prettifyここからダウンロードする
google-code-prettify - Project Hosting on Google Code
http://code.google.com/p/google-code-prettify/
ダウンロードしたファイルを解凍する。
(02)
prettify.css
prettify.js
二つのファイルをオンラインストレージに配置し、公開する
(03)
bloggerのダッシュボードにある"デザイン" タプを選択する。
(04)
"HTMLを編集する"を選択し、ウィジェットのテンプレートを展開をチェックする。
(05)
以下のコードを探す。
</head>
(06)
(05)で探したコードの直前に以下のコードを追加する。
<link href='http://ファイルを/公開している/場所のURL/prettify.css' rel='stylesheet' type='text/css'/> <script src='ファイルを/公開している/場所のUR/prettify.js' type='text/javascript'/>
(07)
以下のコードを探す。
/* Header ----------------------------------------------- */
(08)
(07)で探したコードの直前に以下のコードを追加する。
pre.prettyprint {
border: 1px solid gray;
padding: 4px;
overflow: auto;
white-space: pre;
width: 97.5%;
cursor: text;
line-height: 12pt;
font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Andale Mono', 'Courier New', Monospace;
color: #FFFFFF;
background-color: #555555;
}
code.prettyprint {
border: 1px solid gray;
padding: 4px;
overflow: auto;
white-space: pre;
width: 97.5%;
cursor: text;
line-height: 12pt;
font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Andale Mono', 'Courier New', Monospace;
color: #FFFFFF;
background-color: #555555;
}
(09)
以下のコードを探す。
<body expr:class='"loading" + data:blog.mobileClass'>
(10)
(09)で探したコードを以下のように書き換える。
<body expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint()'>
[参考]
【ハウツー】ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを (1) 簡単&便利な"google-code-prettify" | エンタープライズ | マイコミジャーナルhttp://journal.mycom.co.jp/articles/2007/03/27/gcp/index.html
Blogger でソースコードに色付けをする - google-code-prettify | すぐに忘れる脳みそのためのメモ
http://jutememo.blogspot.com/2008/01/blogger.html
0 件のコメント:
コメントを投稿