からっぽの日記
2008-01-04(金) 晴れ [長年日記]
■ <pre>タグ内のソースハイライト その2
以前、<pre>タグ内のソースハイライトに google-code-prettify を使用していたのだが、IE で表示してコピペがうまくできないみたい。IE はほとんど使わんからわからんかった^^; SHJS - Syntax Highlighting in JavaScriptというライブラリがイイみたいなので導入してみたメモ。
SHJS の取得
% wget http://nchc.dl.sourceforge.net/sourceforge/shjs/shjs-0.4.2.zip
SHJS の設置
% unzip shjs-0.4.2.zip % rm shjs-0.4.2/*.txt % rm -r shjs-0.4.2/doc/ % rm shjs-0.4.2/index.html % mv shjs-0.4.2 ~/www/shjs
ここを参考にhikidoc.rb の修正
% cd ~/www/diary
--- misc/lib/hikidoc.rb.orig Tue Mar 6 23:05:32 2007
+++ misc/lib/hikidoc.rb Fri Jan 4 23:39:28 2008
@@ -148,8 +148,11 @@
ret.gsub!( /^#{MULTI_PRE_OPEN_RE}[ \t]*(\w*)$(.*?)^#{MULTI_PRE_CLOSE_RE}$/m ) do |str|
begin
raise if $1.empty?
- convertor = Syntax::Convertors::HTML.for_syntax($1.downcase)
- "\n" + store_block( convertor.convert( unescape_html( restore_pre( $2 ) ) ) ) + "\n\n"
+ 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
ここを参考にshjs.rb の作成しプラグインを有効にする。
% vi misc/plugin/shjs.rb
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 #/usr/bin/env ruby def test puts 'Hello World' end
こうなる。
#/usr/bin/env ruby def test puts 'Hello World' end
参考にさせてただいたサイト
れぶろぐ - [tDiary][JavaScript] tDiary で SHJS (Syntax Highlighting in JavaScript) を使って構文ハイライトする
[ツッコミを入れる]
