からっぽの日記
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) を使って構文ハイライトする
[ツッコミを入れる]