ページ

2010年10月29日金曜日

bloggerでsource codeに色を付ける。

[したいこと・しりたいこと・目標]

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='&quot;loading&quot; + data:blog.mobileClass'>


(10)
(09)で探したコードを以下のように書き換える。
<body expr:class='&quot;loading&quot; + 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 件のコメント:

コメントを投稿