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 (土)
[コメントを書く]
本日のリンク元
- 11 http://www.kde.ics.tut.ac.jp/~frsh/tdiary/?date=20...
- 8 http://diary.sakura-meiro.net/20080104.html
- 6 http://1470.net/tag/tDiary
- 6 http://1470.net/tag/highlight
- 4 google検索(shjs)
- 3 google検索(tdiary syntax)
- 3 google検索(shjs)
- 3 google検索(SHJS)
- 3 google検索(SHJS)
- 3 http://diary.sakura-meiro.net/20080304.html
- 3 http://1470.net/list/memo/recent/
- 2 http://www.revulo.com/
- 2 http://www.kde.ics.tut.ac.jp/~frsh/tdiary/?date=20...
- 2 google検索(shjs)
- 2 google検索(SHJS)
- 2 google検索(wiki #shjs)
- 2 google検索(SHJS)
- 2 google検索(tdiary syntax highlight)
- 2 google検索(tdiary syntax)
- 2 google検索(Syntax Highlighter)
- 2 google検索(SHJS)
- 2 google検索(SHJS)
- 2 google検索(SHJS)
- 2 http://vvvvvv.sakura.ne.jp/ds14050/diary/20071230....
- 2 http://74.125.153.132/search?q=cache:migte5FuYjAJ:...
- 2 http://1470.net/user/valda/tag/javascript
- 2 http://1470.net/user/valda/
- 2 http://1470.net/tag/javascript
- 1 http://www.kde.ics.tut.ac.jp/~frsh/tdiary/
- 1 google検索(tDialy JavaScript)
- 1 google検索(syntax javascript)
- 1 google検索(shjs syntax)
- 1 google検索(html link syntax)
- 1 google検索(debian vi syntax hilight)
- 1 google検索(Syntax Highlighting in JavaScript)
- 1 google検索(Highlight PHP syntax)
- 1 google検索(shjs)
- 1 google検索(Syntax Highlight javascript)
- 1 google検索(javascript syntax highlighting ruby)
- 1 google検索(シンタックスハイライト tdiary plugin)
- 1 google検索(BLOG SHJS)
- 1 google検索(add_header_proc javascript)
- 1 google検索(tDiary javascript)
- 1 google検索(SHJS ruby)
- 1 google検索(SHJS)
- 1 google検索(SHJS)
- 1 google検索(htmlをjavascriptでhikidoc)
- 1 google検索(sora aoi)
- 1 google検索(pukiwiki プラグイン シンタックスハイライト)
- 1 google検索(php syntax $end )
- 1 google検索(syntax tdiary)
- 1 google検索(text highlight jQuery)
- 1 google検索(shjs.rb)
- 1 google検索(tdiary javascript)
- 1 google検索(@import "sh_style.css"; )
- 1 google検索(syntax highlighting javascript)
- 1 google検索(tdiary php)
- 1 google検索(tdiary javascript)
- 1 google検索(hikidoc css)
- 1 google検索(SHJS as3)
- 1 google検索(shjs.rb)
- 1 google検索(pukiwiki syntax highlight)
- 1 google検索(JavaScript syntax highlighting)
- 1 google検索(SHJS)
- 1 google検索(javascript SHJS)
- 1 google検索(php syntax $end)
- 1 google検索(t)
- 1 google検索(t)
- 1 google検索(t)
- 1 google検索(SHJS)
- 1 google検索(tdiary syntax highlight)
- 1 google検索(tdiary shjs)
- 1 google検索(tdiary javascript)
- 1 google検索(tdiary javascript)
- 1 google検索(tdiary addeventlistener)
- 1 google検索(tdiary プラグイン ハイライト)
- 1 google検索(tdiary ハイライト ソースコード)
- 1 google検索(tdiary ハイライト)
- 1 google検索(tdiary ソースコード ハイライト)
- 1 google検索(tdiary シンタックス ハイライト)
- 1 google検索(tdiary javascript)
- 1 google検索(tDiary syntax highlight)
- 1 google検索(tDiary シンタックス)
- 1 google検索(tDiaryにscript html)
- 1 google検索(tDiaryにjavascript)
- 1 google検索(syntax highlighting)
- 1 google検索(syntax highlighter)
- 1 google検索(syntax highlighter)
- 1 google検索(shjs ブログ)
- 1 google検索(shjs ハイライト)
- 1 google検索(shjs)
- 1 google検索(shjs)
- 1 google検索(shjs)
- 1 google検索(pukiwiki syntax highlight)
- 1 google検索(jquery syntax highlight)
- 1 google検索(javascript syntax highlight)
- 1 google検索(javascript syntax highlight)
- 1 google検索(javascript highlight syntax shjs)
- 1 google検索(javascript gsub)
- 1 google検索(javascript class 書き換える)
