We Ain't Seen Nothin' Yet. : SyntaxHighlighterのRails用Helper

SyntaxHighlighterのRails用Helper

書いた人: noriaki 2007,06月24日(日) 02:17

先のエントリで導入を紹介したsyntaxhighlighterのためのRails用Helperを書きました．

application_helper.rb

module ApplicationHelper
  def syntax_highlighter(name, *js)
    stylesheet = stylesheet_link_tag 'SyntaxHighlighter'
    javascript = [javascript_include_tag "shCore"]
    javascript << js.map{|e| javascript_include_tag "shBrush#{e.to_s.capitalize}"}
    code = "dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf';\n"
    code << "dp.SyntaxHighlighter.HighlightAll('#{name}');"
    [stylesheet, javascript, javascript_tag(code)].join("\n")
  end
end

Typoへのsyntaxhighlighter導入

ソースコードの取得と配置

syntaxhighlighter : Downloads のページからzip形式でソースコードを取得し，javascriptコード群とStylesheetをそれぞれRailsアプリケーションのpublic/javascriptsとpublic/stylesheetsに配置します．

例えば，以下のような方法です．

$ mkdir -p /your/app/root/path/src
$ cd /your/app/root/path/src
$ wget http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.0.zip
$ unzip SyntaxHighlighter_1.5.0.zip
$ cp dp.SyntaxHighlighter/Scripts/* /your/app/root/path/public/javascripts/
$ cp dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css /your/app/root/path/public/stylesheets/

Helperメソッドの追加とHTML修正

そして，上記のsyntax_highlighterメソッドをapplication_helper.rbに追加した後，TypoのlayoutファイルでHelperメソッドを使用するように記述します．

例えば，このブログのテーマazureでは以下のファイルを修正します．以下の例では，syntax_highlighterメソッドを追加して，ruby, xml, css, sqlに対してシンタックス・ハイライトを行うようにしています．

themes/azure/layouts/default.rhtml

      </div>
  </div>
  <%= syntax_highlighter("code", :ruby, :xml, :css, :sql) %>
</body>

エントリを書くとき

あとは，エントリを書くときにハイライトしたいコードを以下のように<pre>タグで囲みます．この際，name属性の値はHelperメソッドの第1引数に与えた文字列（この場合は"code"），class属性の値はプログラミング言語を示す文字列を与えてください．

<pre name="code" class="ruby">
class Foo < Base
  def bar
    puts "I love ruby."
  end
end
</pre>

これは以下のようにハイライトされます．

class Foo < Base
  def bar
    puts "I love ruby."
  end
end

参考情報

シンタックス・ハイライトできるプログラミング言語はSupported languagesに載っています

注意点

Helperメソッドは<pre>タグよりも後ろで呼んでください（正しくはdp.SyntaxHighlighter.HighlightAll('code');を<pre>タグよりも後ろで呼んでください）
このHelperメソッドは残念ながらxhtml invalidです（stylesheetの<link>タグを<head>に移動させれば大丈夫そうです）
エントリを書く際，<pre>タグ内では<と>をエスケープする必要があります