Kotlin Playground Shortcode for Hugo
Table of Contents
Kotlin Playground is HTML component which creates Kotlin-aware editors capable of running code from HTML block elements. You can use it on your Hugo-powered blog to render and run Kotlin code.
Add to <head> section of html document, e.g. in custom partial layout/partials/custom_header.html:
<script src="https://unpkg.com/kotlin-playground@1" data-selector=".kotlin-code"></script>
Add a shortcode template to your site, in layouts/shortcodes/kotlin.html,
with the content:
<!-- kotlin -->
<code class="language-kotlin kotlin-code"
{{- if .Get "foldedButton" }} folded-button="{{ .Get "foldedButton" }}" {{ end -}}
{{- if .Get "height" }} data-output-height="{{ .Get "height" }}" {{ end -}}
{{- if .Get "highlightOnly" }} data-highlight-only {{ end -}}
{{- if .Get "jsLibs" }} data-js-libs="{{ .Get "jsLibs" }}" {{ end -}}
{{- if .Get "targetPlatform" }} data-target-platform="{{ .Get "targetPlatform" }}" {{ end -}}
{{- if .Get "theme" }} theme="{{ .Get "theme" }}" {{ end -}}
match-brackets="true"
>{{htmlUnescape .Inner}}</code>
<!-- /kotlin -->
For instance following block of Kotlin code:
class Contact(val id: Int, var email: String)
fun main(args: Array<String>) {
val contact = Contact(1, "[email protected]")
println(contact.id)
}
turns into:
data class Contact(val id: Int, var email: String)
fun main() {
val contact = Contact(1, "[email protected]")
println(contact)
}
by applying kotlin shortcode in markdown:
{{< kotlin >}}
data class Contact(val id: Int, var email: String)
fun main() {
val contact = Contact(1, "[email protected]")
println(contact)
}
{{< /kotlin >}}
If you want to render code block without showing “Run” button you can use following snippet in Markdown:
{{< kotlin highlightOnly=true >}}
data class Contact(val id: Int, var email: String)
{{< /kotlin >}}
data class Contact(val id: Int, var email: String)If you want to show only specific fragment of code then use //sampleStart and //sampleEnd comments:
{{< kotlin highlightOnly=true >}}
data class Contact(val id: Int, var email: String)
fun main() {
//sampleStart
val contact = Contact(1, "[email protected]")
println(contact)
//sampleEnd
}
{{< /kotlin >}}
All other code is collapsed:
data class Contact(val id: Int, var email: String)
fun main() {
//sampleStart
val contact = Contact(1, "[email protected]")
println(contact)
//sampleEnd
}
If you want to showcase a coroutine there is good news.
Coroutines libraries are already in classpath on playground server.
import kotlinx.coroutines.*
fun main() = runBlocking {
val deferred = async {
loadData()
}
println("waiting...")
println(deferred.await())
}
suspend fun loadData(): Int {
println("loading...")
delay(1000L)
println("loaded!")
return 42
}
Supported attributes #
Shortcode supports following attributes:
| Name | Example | Description |
|---|---|---|
compilerVersion | 1.6.10 | Kotlin compiler version. Supported versions |
foldedButton | false, true | If you want to hide code snippet just set it to false |
height | 20 | Set data-output-heigh. Set the iframe height in px in output. Use for target platform canvas. |
highlightOnly | false, true | Disable run button |
jsLibs | 20 | Provide additional data-js-libs |
targetPlatform | jvm, js,junit,canvas | Use another target platform |
theme | idea, dracula | Use theme |
Example:
{{< kotlin compilerVersion="1.0.7" foldedButton=false height=300 targetPlatform="canvas" >}}