CodingFirst

C言語、Perl、JavaScript、最近はPythonも。出来上がったものより、プログラムを書くことが好き。あと、スイーツ。

スポンサーサイト

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

google-code-prettify - ソースコードのハイライト表示

  • このエントリーをはてなブックマークに追加
  • web拍手 by FC2

ソースコードのハイライト表示を google-code-prettify を使って行う。

FC2に移行しようと決めて、まず困ったのスーパーPREがないこと。。。ないよね? で、ハイライト表示しようと検索して、google-code-pretify を使う事にした。

とりあえず、こうなる

/* print hello
 * c language test program.
 */
#include <stdio.h>
int main(int c, char*v[] ) {
  printf( "hello\n" );
}

導入の手順をメモる。

google-code-prettify - Google Code から、最新版をダウンロードしてくる。今回は、prettify-small-8-Jan-2009.zip だった。

FC2のファイルアップロードで下記ファイルをアップロード

  • prettify.css
  • prettify.js

テンプレのcssに下記のコードを追加。

@import url(http://my.blog.fc2.com/path/to/prettify.css);

テンプレのhtmlに下記のコードを追加(</body>タグ直前くらいでいいでしょう)。

<script type="text/javascript" src="http://my.blog.fc2.com/path/to/google/prettify.js"></script>
<script>prettyPrint();</script>

上の my.blog の部分と、path/to の部分は環境に応じて適宜書き換える必要あり

あとは、記事中の preタグのclassに prettyprint を指定すればいい。

<pre class='prettyprint'>~ソースコード~</pre>

(おまけ) prettyprint がめんどーなので、自動付け足しにする

var o = document.getElementsByTagName( 'pre' );
for ( var i = 0 ; i < o.length; i++ )
 if ( o[i].className == '' ) o[i].className = 'prettyprint';
}

(おまけ2) あと、IE6と相性が悪いようなので回避しておいた方がいいみたい

参照記事:

スポンサーサイト


★☆★コメント★☆★

コメントのテストです

テストです。

コメントの投稿

Name
Subject
Mail
URI
Comment
Pass
Secret 管理者にだけ表示を許可する

トラックバック

http://iyukki.blog56.fc2.com/tb.php/3-bdb5f934

 | HOME | 

Search

Recent Entries

Foot Print



Categories

Monthly

Recent Comments

Recent Trackbacks

Profile

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