«前の日記(2008-01-03(木)) 最新 次の日記(2008-01-07(月))» 編集
RSS feed

からっぽの日記


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) を使って構文ハイライトする


«前の日記(2008-01-03(木)) 最新 次の日記(2008-01-07(月))» 編集
RSS feed