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

2019-02-04Grails

今日も Grails です。

余談

griffon についてもいろいろ試してみたりしたいのですが、家のCPU:1.6GHz、メモリ：512MBマシンでは、 Griffon のコンパイルなどで悲鳴が聞こえてきます。世界がとまります。

したがって同じぐらいのスペックのlinuxマシン上で、ssh経由で grails war や grails 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. 起動！

手順１

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

手順２

省略します。

手順３

２つ作ってみた。

  • 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)
    }
}

手順４

省略します。そのまま。

手順５

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

  • <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>

手順６

%PROJECT_HOME%/plugins/syntax-highlighter-0.1.1/web-app の js、css フォルダを、 %PROJECT_HOME%/web-app にコピーします。

手順７

起動！！

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

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

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

ひとこと

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

2019-02-04Grails