Github Pages上でkotlin playgroundを使ってみる

以前やった、github pagesでブロックのスタイルを指定したいみたいな感じでやってみたい。

_inlcucesに以下のように作る。

 % cat _includes/kotlin_quote.html
<div class="kotlin-quote">
{{ include.body | xml_escape }}
</div>

次に_layoutsの下にpageでkotlin playgroundのsrcなどを指定。

% cat _layouts/page.html
---
layout: default
---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
  <script src="https://unpkg.com/kotlin-playground@1" data-selector=".kotlin-quote"></script>

  <div class="post-content" itemprop="articleBody">
      {{ content }}
  </div>

  {% if site.disqus.shortname %}
    {% include disqus_comments.html %}
  {% endif %}
</article>

これで、あとは本文を以下のように書くと動いた。

---
title: "サンドボックス"
layout: page
---

kotlin playgroundのサンプルです。

{% capture code1 %}
class Contact(val id: Int, var email: String)

fun main(args: Array<String>) {
    val contact = Contact(1, "mary@gmail.com")
    println(contact.id)
}
{% endcapture %}
{% include kotlin_quote.html body=code1 %}

captureでくくってincludeすれば間のコードが実行出来る。

結果はこんな感じ。

サンドボックス

簡単に出来ていい感じだね。