トップページ >Googleウェブログ・ココログ関連> google-code-prettifyを導入してみた

« ああ初黒星 | トップページ | 情報処理技術者試験受験中に地震 »

2007/04/15

google-code-prettifyを導入してみた

---

遅まきながら、遅ればせながら、ようやく今頃になって、
google-code-prettifyをこのブログに設置してみました。

google-code-prettifyに関しては、下記マイコミジャーナルの記事がわかりやすいのですが、

▼ 【ハウツー】ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを (1) 簡単&便利な"google-code-prettify" - マイコミジャーナル

google-code-prettifyはApache License Version 2.0のもとで公開されているシンタックスハイライトモジュール。JavaScriptモジュールとCSSファイルの2つから構成されたシンプルな成果物で、HTML文書内に直接記述されたソースコードをシンタックスハイライト化する機能を提供する。なんといっても導入が簡単なところがポイントが高い。

今回は、弾さんのエントリを参考にして、ココログ（プロ）に導入しました。

▼ 404 Blog Not Found:javascript+CSS - google-code-prettifyの導入

google-code-prettifyを本blogでも導入しました。
～～～
Livedoor Blogでの具体的な導入法を解説します。
～～～
ここで書いた例は、Livedoor Blogにおける実践例ですが、もちろん他でも応用は効くでしょう。

ということで、ほとんど丸コピ状態ですが、自分用のメモとして記録しておきます。

手順は以下の通りです。

1. 必要なファイルを入手
2. ココログにアップロード
3. スタイルシート（Stylesheet）のテンプレートを変更
4. 個別アーカイブ（Individial Archives）のテンプレートを変更
5. 全ページの再構築
6. テスト！

１．必要なファイルを入手

入手したもの

google-code-prittify …… javascript and CSS bundle - full

入手場所

Google Codeのウェブサイト → google-code-prettify - Google Code

入手したファイル

prettify.zip

２．ココログにアップロード

アップロード準備

入手したprettify.zipを解凍し、prettify.cssとprettify.jsの２ファイルを確認する。

アップロード場所

自分でアクセスできるところならどこでも良いのだが、今回は → http://kazz7.air-nifty.com/tekito/google/

アップロード方法

管理ページトップ  >  コントロールパネル  >  ファイルマネージャー から、上記ディレクトリに2ファイルをアップロードする。

３．スタイルシート（Stylesheet）のテンプレートを変更

styles.cssの先頭に下記を追加して保存。

@import url(http://kazz7.air-nifty.com/tekito/google/prettify.css);

４．個別アーカイブ（Individial Archives）のテンプレートを変更

<$MTEntryMore$>タグの後ろに下記を追加して保存。この場所に追加するのは、私がソースコードをエントリに書くときは、「追記」以降に書くから、ここにスクリプト呼び出しを記述しているのだと理解しています。

<script type="text/javascript" src="http://kazz7.air-nifty.com/tekito/google/prettify.js"></script>
<script>prettyPrint();</script>

５．全ページの再構築

個別アーカイブテンプレート保存後に

全ページの再構築を実行。しばらく時間がかかります……

６．テスト！

例えば、このページがもうテスト用です。

ソースコードを<pre class="prettyprint">と</pre>の間に書けばOKのはず。

こんな感じで

require "oci8"

OCI8.new('scott', 'tiger', 'hogehoge').exec('select * from emp') {|r|
  puts r.join(',')}

出来ました！これでまた、このブログの「Powered by Google」度が上がりましたよ！

---

2007 04 15 [Google, ウェブログ・ココログ関連] | 固定リンク | ↑

---

---

参考になる本があるかも

参考になりそうなものをGoogleで調べてみる

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/26616/14681669

この記事へのトラックバック一覧です: google-code-prettifyを導入してみた:

» google-code-prettify [Ellinikonblue.com Weblog から]
大阪てきとー日記「google-code-prettify を導入してみた」404 Blog Not Found「javascript+CSS - google-code-prettify の導入」... 続きを読む

受信 2007/04/18 23:38:22

コメント

なるほどー、ソースコードを色分けして表示してくれるんですねぇ。
サイトにコードを載せるときに便利そうですな。

あと、会社で新人教育のため研修用サイトにソースコード載せるときなんかに応用できそうです。
あとでちょっと試してみようっと。

よさげな情報提供に感謝！

投稿者: えーてる (2007/04/15 15:27:10)

＞えーてるさん
こんばんは！
さすがGoogleですよ。とか言ったりして。
弾さんの解説のおかげで簡単に導入することが出来ました。ココログの場合、実際の編集画面で気をつけないと変なことになるときがあるのですが、それでも気軽に綺麗に使えるので重宝しそうです。
余力があれば、スタイルシートを自分好みに変えられれば……と思うのですが、そういうのはもうちょっと先の話かなと。

投稿者: kazz7 (2007/04/15 22:55:16)

コメントを書く

名前:

メールアドレス:

URL:

この情報を登録する

コメント本文:

---

---

---

•  
• blog SEO 
•  
•  
•  

---

---

-->

---

---