スポンサーリンク

ソースコードのハイライトに google-code-prettify を導入してみる

 これまで当ブログのソースコードのハイライトには 「CodePress」を使ってたんですが、IE と Firefox でしかちゃんと動かないみたいなんですよね。

 まぁ、導入したのが2007年12月ですから、「もしかしてヴァージョンアップすれば良くね?」と思ったんですが・・・。なんと!ドメインが売りに出されていました。お~ぃ。

 念のためググってみたら、SourceForge にソースあったんだけど、最終リリースが「2007-09-26」だし・・・。

 とはいえ、IE と Firefox でしかまともに動かないのも困りものなので、google-code-prettify を導入してみることにしました。

 実は2007年12月の時点で「google-code-prettify」の導入を検討してたんですねぇ、私。すっかり忘れてましたけど。

 当時のエントリーによると「BODYタグ に細工をしないといけないので、導入を断念」したとか。いや~、知識がないってのはそういうもんなんですねぇ。今だと「イベントリスナーに追加する方法も書いてあるじゃん!」てことが解るわけですから、僕も多少は進歩してたようです。

 さて、導入の手順ですが

  1. ダウンロードしたZIPファイルを解凍します。
  2. srcフォルダ内のファイルをブログにアップします(例:/js/prettify/)。
  3. タイプリスト(メモ)に読み込むためのソース記述し、保存します。

保存するソースのサンプルは以下のとおりです。

<link href="/js/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/prettify/prettify.js"></script>
<script type="text/javascript">
addEventListener('load', prettyPrint, false);
</script>

 使い方は、ハイライトする部分をPREタグに入れて、prettify用のクラスを指定すればOK。ちなみにソース内の < は &lt; に変換しておいた方がよさげです。

例えば、こんなコードが

<pre class="prettyprint lang-perl">
#!/usr/bin/perl

use strict;
use warnings;

print "Hello World!";
</pre>

こう表示されます。

#!/usr/bin/perl

use strict;
use warnings;

print "Hello World!";

うん。いい感じ。

参照リンク
 ・google-code-prettify - Project Hosting on Google Code
 ・MOONGIFT: ≫ Google Codeで使われているソースコードハイライタ「Google Code Prettify」:オープンソースを毎日紹介

スポンサーリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿
トラックバック

このページのトラックバックURL:
https://www.typepad.com/services/trackback/6a01310f1f31c0970c0120a8ba9399970b

このページへのトラックバック一覧 ソースコードのハイライトに google-code-prettify を導入してみる:

おすすめの記事と広告

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

Blog powered by TypePad

スポンサーリンク