The Culture of Code
  1. Posts/

Kotlin Playground Shortcode for Hugo

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/[email protected]" 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 "compilerVersion" }}data-version="{{ .Get "compilerVersion" }}"{{ end -}}
      {{- 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 -}}
>{{.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:

NameExampleDescription
compilerVersion1.6.10Kotlin compiler version. Supported versions
foldedButtonfalse, trueIf you want to hide code snippet just set it to false
height20Set data-output-heigh. Set the iframe height in px in output. Use for target platform canvas.
highlightOnlyfalse, trueDisable run button
jsLibs20Provide additional data-js-libs
targetPlatformjvm, js,junit,canvasUse another target platform
themeidea, draculaUse theme

Example:

{{< kotlin compilerVersion="1.0.7" foldedButton=false height=300 targetPlatform="canvas" >}}
  • You can get the code here
  • Read more about supported attributes here
  • Kotlin Playground examples