Play Frameworkでgoogle-code-prettifyを使ってみる

@iwasaki 267views 更新:2014年7月30日

build.sbt

"org.webjars" % "prettify" % "4-Mar-2013"

いつものようにwebjarsを読み込み

app/controllers/samples/Prettify.java

package controllers.samples;

import play.i18n.Messages;
import play.mvc.Controller;
import play.mvc.Result;
import views.html.samples.prettify;

public class Prettify extends Controller {

    public static Result index() {
        return ok(prettify.render());
    }

}

app/views/main.scala.html

@(title: String)(content: Html)(css: Html)(js: Html)

<!DOCTYPE html>
<html>
    <head>
        <title>@title</title>
        <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("css/bootstrap.min.css"))'>
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <link rel="stylesheet" href="@routes.Assets.versioned("stylesheets/main.min.css")">
        @css
    </head>
    <body>
        @content
        <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("jquery.min.js"))'></script>
        <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("js/bootstrap.min.js"))'></script>
        <script type='text/javascript' src="@routes.Assets.at("javascripts/main.js")"></script>
        @js
    </body>
</html>

js,cssもページごとに独自のものを呼べるように設定

app/views/samples/prettify.scala.html

@()
@import play.i18n._

@main(Messages.get("home.title")) {
<pre class="prettyprint lang-sql linenums">
select * from user where user = 1;
</pre>
}{
        <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("prettify.css"))'>
}{
        <script type='text/javascript' src='@routes.WebJarAssets.at(WebJarAssets.locate("prettify.js"))'></script>
        <script type='text/javascript' src="@routes.Assets.at("javascripts/prettify.js")"></script>
}

css,jsファイルを読み込んで、pre タグで記載することでソースコードをよろしく記述できます。

public/javascripts/prettify.js

$( document ).ready(function() {
        prettyPrint();
    });

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません