れぶろぐ

2007-08-17 (金)

■ tDiary で SHJS (Syntax Highlighting in JavaScript) を使って構文ハイライトする

昨日に引き続き、今度は tDiary のシンタックスハイライトに SHJS (Syntax Highlighting in JavaScript) を使ってみた。このブログでは別のライブラリを使って構文ハイライトさせるつもりだが、せっかくなので手順を載せておく。なお、tDiary 2.1.3 以降の Wiki スタイルでないと動かないはず。

index.rb のあるディレクトリで SHJS のアーカイブを展開し、 shjs というディレクトリ名にリネーム。

$ unzip shjs-0.4.2.zip
$ mv shjs-0.4.2 shjs

hikidoc.rb の parse_pre メソッドを以下のように書き換えるかオーバーライドする。

class HikiDoc

  def parse_pre( text )
    ret = text
    ret.gsub!( /^#{MULTI_PRE_OPEN_RE}[ \t]*(\w*)$(.*?)^#{MULTI_PRE_CLOSE_RE}$/m ) do |str|
      begin
        raise if $1.empty?
        html = <<HTML
<pre class="sh_#{$1.downcase}">#{restore_pre( $2 )}</pre>
<script type="text/javascript" src="shjs/lang/sh_#{$1.downcase}.min.js"></script>
HTML
        store_block( html )
      rescue
        "\n" + store_block( "<pre>%s</pre>" % restore_pre( $2 ) ) + "\n\n"
      end
    end
    ret.gsub!( /(?:#{PRE_RE}.*\n?)+/ ) do |str|
      str.chomp!
      str.gsub!( PRE_RE, '' )
      "\n" + store_block( "<pre>\n%s\n</pre>" % restore_pre( str ) ) + "\n\n"
    end
    ret
  end

end

以下のコードを shjs.rb という名前で保存し、プラグインとして追加。スタイルシートの部分は、好みに応じて shjs/css/sh_darkblus.css などに適当に書き換える。

add_header_proc do
	<<-HTML
	<link rel="stylesheet" type="text/css" href="shjs/sh_style.css" />
	<script type="text/javascript" src="shjs/sh_main.min.js"></script>
	<script type="text/javascript"><!--
	if (window.addEventListener) {
		window.addEventListener('load', sh_highlightDocument, false);
	} else if (window.attachEvent) {
		window.attachEvent('onload', sh_highlightDocument);
	} else {
		window.onload = sh_highlightDocument;
	}
	//--></script>
	HTML
end

ここまでやったら、あとは、

<<< ruby
……
ソースコード
……
>>>

のように書けばＯＫ。

このエントリの続き: 2008-08-23 (土)

Tags: JavaScript tDiary |

| Permalink

[コメントを書く]

コメントがあればどうぞ! E-mailアドレスは公開されません。

本日のリンク元

編集


		2007年 8月
日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

2007-08-17 (金)

■ tDiary で SHJS (Syntax Highlighting in JavaScript) を使って構文ハイライトする

カレンダー

過去の日記

ブログ内検索

タグクラウド

最近の記事