2008/09/20

grails SyntaxHighlighter Pluginで、コードをhtml化するアプリを作ったよ

今日もgrailsです。

余談

griffonについてもいろいろ試してみたりしたいのですが、家のCPU:1.6GHz、メモリ:512MBマシンでは、griffonのコンパイルなどで悲鳴が聞こえてきます。世界がとまります。したがって同じぐらいのスペックのlinuxマシン上で、ssh経由でgrails wargrails run-appしています。これだともうちょっと低スペックマシンでも快適に開発できそう。

今回の料理名

ソースコードをハイライト化するアプリ

材料

  • grails

作り方

  1. SyntaxHighlighter Pluginをインストール
  2. 必須ではないけど、日本語化させるならI18n Templates Plugin(これについては説明を省く)
  3. Domainクラス作成
  4. grails generate-allでview、controller作成
  5. viewをちょこっと触る。
  6. SyntaxHighlighter Pluginのjs、cssをコピー
  7. 起動!

手順1

grails install-plugin syntax-highlighterしろと書かれているので、実行。プラグインが追加される。

手順2

省略します。

手順3

2つ作ってみた。

  • ProgramingLanguage.groovy
  • SourceCode.groovy
class ProgramingLanguage {
    /*
    static hasMany = [
    ]
    */
    
    /*
    static belongsTo = [
    ]
    */
    String name
    String jsCode
    Date dateCreated
    Date lastUpdated
    static constraints = {
        name(blank:false, unique:true)
        jsCode(blank:false, unique:true)
        dateCreated(editable:false)
        lastUpdated(editable:false)
    }
    
    String toString(){
        name
    }
}

 

class SourceCode {
    /*
    static hasMany = [
    ]
    */
    
    static belongsTo = [
        language:ProgramingLanguage
    ]
    
    String code
    Boolean gutter = true
    Boolean controls = true
    Boolean collapse = false
    Integer firstLine = 1
    Boolean showColumns = false
    Boolean escapeXml = true
    Date dateCreated
    Date lastUpdated
    static constraints = {
        language()
        code(blank:false, maxSize:50000)
        gutter()
        controls()
        collapse()
        firstLine()
        showColumns()
        escapeXml()
        dateCreated(display:false)
        lastUpdated(display:false)
    }
}

手順4

省略します。そのまま。

手順5

ヘッダー部分に以下の一文を追加しました。

<syntax:resources name="code" languages="${[sourceCode?.language?.jsCode]}" />

また、SourceCodeクラスのcodeを表示する箇所は以下のように。

                            <td valign="top" class="value">
<syntax:format
    name="code"
    language="${fieldValue(bean:sourceCode?.language, field:'name')}"
    gutter="${fieldValue(bean:sourceCode, field:'gutter')}"
    controls="${fieldValue(bean:sourceCode, field:'controls')}"
    collapse="${fieldValue(bean:sourceCode, field:'collapse')}"
    showColumns="${fieldValue(bean:sourceCode, field:'showColumns')}"
    escapeXml="${fieldValue(bean:sourceCode, field:'escapeXml')}"
    >
${sourceCode.code}
</syntax:format>
</td>

 

手順6

僕もこれでいいのか自信はないですが、%PROJECT_HOME%/plugins/syntax-highlighter-0.1.1/web-appjs、cssフォルダを、%PROJECT_HOME%/web-appにコピーします。

手順7

起動!!

 

これでこんな感じのアプリが起動するはず。(i18n-templates入れてない場合は英語になってると思う)

ちなみにProgramingLanguage情報を設定しておく必要があるので、サンプルアプリを見て設定してみてください。

今回の目的は、コードハイライトアプリとSyntaxHighlighter Pluginを使ってみる!という点なので、こんな感じでOK!

その他

ゲンゾウ用ポストイット: grails richuiがすばらしすぎる件についてでも書きましたが、プラグインの力がすごいです。自分でプラグインを作ったり使ったりしているとgrails本体もプラグインの集合体、という意味がようやくわかってきました。

0 件のコメント:

コメントを投稿