Embedding Kotlin Playground Tips

在文章Embedding Kotlin Playground中,我们可以看到很多可以运行的Kotlin代码。然而文中我们只能看到实际应用的效果,到底该怎么去应用这个功能呢,下面作简单的介绍。

HTML

首先在页面加入这行

data-selector的语法类似于jquery中的选择器,这里”.kotlin-code”意为class=”kotlin-code”的html元素所包裹的内容将被转换为一段可运行的kotlin代码,注意被包裹的代码中尖括号及引号的编码。如下:

class Contact(val id: Int, var email: String)

fun main(args: Array<String>) {
val contact = Contact(1, "mary@gmail.com")
println(contact.id)
}

当你的编码有错误时,会有红色波浪线或直接变红标示错误的地方,鼠标移上去还会有错误提示,还挺方便,如下(注意点击运行后ontact变红了):

class Contact(val id: Int, var email: String)

fun main(args: Array<String>) {
val contact = ontact(1, "mary@gmail.com")
println(contact.id)
}

如果你不指定data-selector的话,需要通过这样一段代码来指定哪一个元素需要被转换

同时可以在被选择的标签中添加data-min-compiler-versiondata-target-platformdata-js-libsdata-highlight-only等属性启用不同的功能,前三个属性需要指定进一步的取值,如

fun main(args: Array<String>) {
print("Hello World!");
}

data-highlight-only则可以创建一段不能运行只作展示的Kotlin代码

fun main(args: Array<String>) {
print("Hello World!");
}

在代码中添加//sampleStart//sampleEnd可以将这两段注释包裹以外的内容被折叠起来,如:

fun main(args: Array<String>) {
//sampleStart
print("Hello World!");
//sampleEnd
}

鼠标移向代码区域上边界的”+”号标志,点击则可展示被折叠的内容。如果不想让读者看到被折叠的内容,则应用属性folded-button="false"即可

fun main(args: Array<String>) {
//sampleStart
print("Hello World!");
//sampleEnd
}

WordPress插件

除了在Html页面中应用这个功能外,官方还提供了一个wp插件,可以在wp博文中轻松应用这个环境。但功能较少,优势是终于可以正常书写尖括号及引号了。安装完插件后,博文里添加以下内容即可:

目前提供3个配置项
runnable="true|false"folded-button="true|false"platform="java|js|junit|canvas"。同时也可以用//sampleStart//sampleEnd包裹不需要折叠的代码,如下:

That’s All~

此条目发表在官方博客附加品分类目录,贴了标签。将固定链接加入收藏夹。

3 则回应给 Embedding Kotlin Playground Tips

  1. Thank you for sharing your thoughts. I really appreciate your efforts
    and I will be waiting for your further write ups thanks once again.

  2. Currently it appears like Drupal is the preferred blogging platform available right now.
    (from what I’ve read) Is that what you’re using on your
    blog?
    +905443535397

  3. DiaBoiguh说:

    Purchase Cialis From North America Amoxicillin Prescription Elimite (Acticin) 30gm cialis without a doctor’s prescription Vendo Cialis Bologna Kytril

发表评论

电子邮件地址不会被公开。 必填项已用*标注