JavaScriptでソースコードに簡単色付け google-code-prettify

| コメント(0) | トラックバック(0)

ソースコードを簡単に色付けしてくれるgoogle-code-prettifyを ブログに導入してみたのでその設定手順もあわせて紹介。

当ブログではjqueryとmarkdownの合わせ技で 簡単にシンタックスハイライトができるようにしてみました。

Google Code Prettify とは

  • JavaScriptのライブラリ
  • Google製
  • 各種言語ソースコードにシンタックスハイライトを行う
  • HTMLに埋め込んでいるpreタグの内容を書き換え
  • CSS書き換えで着色変更

対応言語はCをベースとしたJava, Python, Bash, SQL, HTML, XML, CSS, Javascriptに対応、 その他 Perl, Ruby, PHP, VB, Awk ,Lisp は一部コメント記述がおかしくなる場合があります。

vb rubyやlispなどで'シングルクォーテーション1個だけ使うなどおかしくなる様子。

インストール

1.ダウンロード

cmd
$ wget http://google-code-prettify.googlecode.com/files/prettify-1-Jun-2011.tar.bz2

2.解凍

cmd
$ tar xjvf prettify-1-Jun-2011.tar.bz2

#フォルダ
$ ls google-code-prettify/
distrib/google-code-prettify/   #←圧縮版ソース
src                             #←ソース
  #etc..

#srcファイル
$ ls google-code-prettify/src/

prettify.js    #←これを読み込む
prettify.css   #←これを読み込む
  #etc..

3.ライブラリの公開フォルダへ設置
下記フォルダの中身全てを、設置 各種js cssファイル

distrib/google-code-prettify/

4.html headに読み込むコード設置

html
<script type="text/javascript" src="/google-code-prettify/prettify.js"   ></script>
<link  href="/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />

5.Javascriptの実行コード設置
Bodyタグなどにonload設定

html
<body onload="prettyPrint()">

6.ソースコードの着色したい部分にclass指定
precodeタグを使う

html
<pre class="prettyprint">...</pre>
<!-- or  -->
<code class="prettyprint">...</code>

jQeury と Markdownでラベルを貼って動作させる場合

1.ラベル用のcss用意

css
div.plabel{

    font-size:11px;
    color : #F4F2EF;
    background:   none repeat scroll 0 0 #666666; 
    border-left:  1px solid #808080;
    border-right: 1px solid #808080;
    border-top:   1px solid #808080; 
    display:none; 
    padding-left:  10px;
    padding-right: 10px;
    margin-left:   16px;

}
  1. jQuery利用のjsスクリプト用意

ラベルの次html要素にクラス追加

js
function setClass_prettyprint() {

    var t = $("div.plabel");

    t.each(function(){
               var e = $(this);

               if(e.context.innerHTML)e.css("display","inline");

               var code = e.attr("data");
               var n = $(e.next());
               n.addClass(" prettyprint");
               if(code) n.addClass(" lang-"   code);
           });

}

3.html headにjQeury追加
 google CDNからコードを取得する記述

html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

4.Javascriptの実行コード設置
Bodyタグなどにonload設定は読込遅いとおもわれるので、 適当なところに下記コードを設置

html
<script type="text/javascript"><!--
 setClass_prettyprint(); 
  prettyPrint();
  //--></script>

5.markdownでの記述
・ラベル表示する場合

markdown
<div class="plabel" data="js">js</div>
    console.log("hoge hoge")

・表示しない場合, divの中身を空にする

<div class="plabel" data="js"></div>
    console.log("hoge hoge")

・各種ソースコードの指定はdata属性を変える。

markdown
<div class="plabel" data="bsh">shell</div>
<div class="plabel" data="rb">ruby</div>
<div class="plabel" data="html">html</div>
<div class="plabel" data="css">css</div>
<div class="plabel" data="js">js</div>
<div class="plabel" data="php">php</div>
<div class="plabel" data="sql">sql</div>
<div class="plabel" data="vb">vba</div>

おわり

div記述が少々めんどくさいですが、これで当ブログで簡単に設置することができました。

MovableTypeの場合、プラグインのMarkdown.plを変えないといけなかったので、それならすべてJsでやってしまえと言うことで実装してみました。

あらためて、jQeuryを使うと楽に実装できるな~と思いました。

トラックバック(0)

トラックバックURL: http://mukaer.com/cgi-bin/mt/mt-tb.cgi/84

コメントする

PR

PR





検索

Loading

メニュー

twitter