grailsとSyntaxHilighterでgroovyコードを表示する

grailsとSyntaxHilighterでgroovyコードを表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言

modules = {
  application {
    resource url:'js/application.js'
  }
  // SyntaxHilighterのモジュールを宣言
  syntaxhilighter {
    dependsOn 'jquery'
    resource url:'js/shCore.js', disposition:'head'
    resource url:'js/shBrushGroovy.js', disposition:'head'
    resource url:'css/shCore.css'
    resource url:'css/shThemeDefault.css'
  }
}

shCore.jsとshBrushGroovy.jsはweb-app/jsディレクトリに、css/shCore.cssとcss/shThemeDefault.cssはweb-app/cssディレクトリに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
<!-- SyntaxHilighterを使用 -->
<r:require module="syntaxhilighter"/>
        <r:layoutResources />
 </head>

3. viewに以下のようなコードを追加します。

<!-- SyntaxHilighterでgroovyコードを表示 -->
<pre class="brush: groovy"><%="""
class Greet {
  def name
  Greet(who) { name = who[0].toUpperCase() +
                      who[1..-1] }
  def salute() { println "Hello $name!" }
}

g = new Greet('world')  // create object
g.salute()               // output "Hello World!"
""".encodeAsHTML()%></pre>
<script type="text/javascript">
  $(function(){
    SyntaxHighlighter.all();
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
SyntaxHilighterのホームページ
http://alexgorbatchev.com/SyntaxHighlighter/