Embedding Kotlin Playground Tips

kotliner發表於2018-04-30
Kotlin

在文章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-version、data-target-platform、data-js-libs、data-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~

相關文章