キッズプレート、パスタおかわり

プログラミングやデジモノについてあれこれ
--.--.-- --:--|カテゴリ:スポンサー広告| コメント(-)

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2009.01.14 00:43|カテゴリ:WEBサービス・ツールコメント(0)

FC2ブログでソースを色分けgoogle-code-prettifyを導入


 google-code-prettifyってのはGoogleが提供しているテキストカラーリングのJavascriptライブラリっす。
 いろんなエディタでプログラムソースを表示すると予約語なんかが色分けされて表示されます。
「ブログに載せているソースも色分けされてたら見易いんじゃないの?」
 と以前から思っていたのですが、このgoogle-code-prettifyはJavascriptファイルとcssファイルをセットで利用する仕組みになっており、そのためにはHTMLのソース内に外部参照形式でこれらのファイルを読み込ませないといけません。
「外部のJavascriptファイルだからなあ。ブログじゃ使えないじゃん」
 なんてことを勝手に思っていて入れてなかったのですが、よくよく見てみるとFC2ブログのツール内にあるアップローダに拡張子jsやcssの文字があるじゃないですかっ!∑( ̄□ ̄;)ナント!!
「えっ? 外部Javascriptアップして使えちゃうの??」
 と思い試してみるとなんとバッチリ使えるじゃないですか。いやー驚きましたFC2ブログ。これで俄然カスタマイズの幅が広がりますねえ。後はUTF8対応になってくれると本当に嬉しいんですが。。。
 導入手順を紹介している頁はいくつかありますがまあせっかくなのでここでも簡単に紹介しておます。
【JavascriptとCSSをダウンロード】
http://code.google.com/p/google-code-prettify/downloads/list
 にある
「prettify-small-8-Jan-2009.zip」
 を落として解凍します。解凍されたフォルダ(フォルダ名はsrc)にいくつかのファイルがありますが基本的には、
・prettify.css
・prettify.js
 の2ファイルを使用します。
【アップロード】
 FC2ブログの管理画面にログインしてツールのファイルアップロードをクリック。ダウンロードした「prettify.css」と「prettify.js」をアップロードします。
 アップロードが終わりましたらアップロードされているファイル一覧に2つのファイルが並んでいると思いますので「表示」でリンクされているリンク先URLを適当なエディタ等にそれぞれコピペしておいてください。このURLは後ほどテンプレートに埋め込みます。
【テンプレートの編集】
 環境設定から「テンプレートの設定」を選び現在使用しているテンプレートのHTMLを編集します。
 <head>タグで囲まれた部分に以下の2行を追加します。
<link href="prettify.cssのURL" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.jsのURL"></script>
 hrefとsrcの指定はそれぞれ前もって調べておいたURLを記述してください。上記の2行を追加してさらに<body>の開始タグを以下のように変更します(onloadを指定します)。
<body onload="prettyPrint()">
 2行の追加とタグの変更が終わったらテンプレートを保存します。これで導入は終了です。
【使ってみる】
 記事の編集時、カラーリングを適用したいテキスト部分を<pre class="prettyprint"></pre>タグで囲みます(preではなくcodeタグでもOKです)。こんな感じです。
<pre class="prettyprint">
#!/usr/bin/perl
use utf8; #-ソースがUTF8だという宣言
use Encode;
binmode STDOUT, ":encoding(utf8)"; #-画面に出力したい文字コード
binmode STDERR, ":encoding(utf8)"; #-エラー出力に使いたい文字コード
binmode STDIN, ":encoding(utf8)"; #-標準入力から入ってくる文字コード
print "Hello World\n";
exit;
</pre>
 でこうなります。
#!/usr/bin/perl
use utf8; #-ソースがUTF8だという宣言
use Encode;
binmode STDOUT, ":encoding(utf8)"; #-画面に出力したい文字コード
binmode STDERR, ":encoding(utf8)"; #-エラー出力に使いたい文字コード
binmode STDIN, ":encoding(utf8)"; #-標準入力から入ってくる文字コード
print "Hello World\n";
exit;

コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

ひらくん Author:ひらくん
どもども、ひらんくんどす。
日々まったり過ごしております。
仕事はDTP関連のスプリクト&アプリケーション開発。
Follow happyscript on Twitter

ブログ内検索



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。