Kotlin Playground

Less than 1 minute

Let the Markdown file support kotlin playground in your VuePress site.

Settings

Install kotlin-playground in your project:

pnpm

pnpm add -D kotlin-playground

yarn

yarn add -D kotlin-playground

npm

npm i -D kotlin-playground

Then enabling via:

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        kotlinPlayground: true,
      },
    },
  }),
};

Usage

To use kotlin playground, you should use a container named kotlin-playground.

In it, you can use 2 directives:

@file Filename then a code block to add files
The first file will be the main file, and others will be considered as hidden dependency.
@setting then a json block to customize settings.
Supported options:
- data-version: Target Kotlin compiler version
- data-min-compiler-version: Minimum target Kotlin compiler version
- data-target-platform: target platform, can be junit, canvas, js or java (default).
- data-highlight-only: Read-only mode, with only highlighting. data-highlight-only: "nocursor" means no focus on editor.
  Or, you can make only a part of code read-only by placing it between //sampleStart and //sampleEnd markers. If you don't need this just set none-markers.
- data-js-libs: By default component loads jQuery and makes it available to the code running in the editor. If you need any additional JS libraries, specify them as comma-separated list in this attribute.
- data-output-height: Set the iframe height in px in output. Use for target platform canvas, default is 200.
- data-crosslink: Show link for open in playground, can be enabled or disabled, defaults to undefined – only supported in playground.
- data-shorter-height: show expander if height more than value of attribute, defaults to 100.
- data-scrollbar-style: Chooses a scrollbar implementation, Defaults to overlay.
- args: Command line arguments.
- folded-button: set to false to hide code snippet
- auto-indent: Whether to use the context-sensitive indentation, can be true or false (default).
- theme: Editor IntelliJ IDEA themes, can be idea, darcula default.
- mode: Different languages styles. Runnable snippets only with kotlin, can be kotlin (default) ,js, java, groovy, xml, c, shell, swift, obj-c.
- autocomplete Get completion on every key press, can be true or false (default). If false => Press ctrl + space to activate autocompletion.
- highlight-on-fly: Errors and warnings check for each change in the editor, can be true or false (default).
- indent: How many spaces a block should be indented. Defaults to 4.
- lines: Whether to show line numbers to the left of the editor, can be true or false (default).
- from and to: Create a part of code. Example from line 5 to line 10.
- match-brackets: Determines whether brackets are matched whenever the cursor is moved next to a bracket, can be true or false (default).
You can see the below demos to see more details.

You can import and call defineKotlinPlaygroundConfig in client config file to customize kotlin-playground:

import { defineClientConfig } from "vuepress/client";
import { defineKotlinPlaygroundConfig } from "vuepress-plugin-md-enhance/client";

defineKotlinPlaygroundConfig({
  // `kotlin-playground` options here
});

export default defineClientConfig({
  // ...
});

interface KotlinPlaygroundOptions {
  server?: string;
  version?: string;

  onChange?: (code: string) => void;
  onRun?: () => void;
  onError?: () => void;
  getJsCode?: (code: string) => void;
  onTestPassed?: () => void;
  onTestFailed?: () => void;
  onOpenConsole?: () => void;
  onCloseConsole?: () => void;
  callback?: (targetNode: HTMLElement, mountNode: HTMLElement) => void;
  getInstance?: (instance: KotlinPlaygroundInstance) => void;
}

Demo

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

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

::: kotlin-playground Playground title

@file main.kt

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

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

:::

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

::: kotlin-playground Readonly Playground

@file main.kt

```kotlin
fun main(args: Array<String>) {
    println("Hello World!")
}
```

@settings

```json
{
  "data-highlight-only": ""
}
```

:::

import org.junit.Test
import org.junit.Assert

class TestExtensionFunctions() {
    @Test fun testIntExtension() {
        Assert.assertEquals("Rational number creation error: ", RationalNumber(4, 1), 4.r())
    }

    @Test fun testPairExtension() {
        Assert.assertEquals("Rational number creation error: ", RationalNumber(2, 3), Pair(2, 3).r())
    }
}
//sampleStart
/*
Then implement extension functions Int.r() and Pair.r() and make them convert Int and Pair to RationalNumber.
*/
fun Int.r(): RationalNumber = RationalNumber(this, 2)
fun Pair<Int, Int>.r(): RationalNumber = RationalNumber(first, second)

data class RationalNumber(val numerator: Int, val denominator: Int)
//sampleEnd

::: kotlin-playground Test Playground

@file main.kt

```kotlin
import org.junit.Test
import org.junit.Assert

class TestExtensionFunctions() {
    @Test fun testIntExtension() {
        Assert.assertEquals("Rational number creation error: ", RationalNumber(4, 1), 4.r())
    }

    @Test fun testPairExtension() {
        Assert.assertEquals("Rational number creation error: ", RationalNumber(2, 3), Pair(2, 3).r())
    }
}
//sampleStart
/*
Then implement extension functions Int.r() and Pair.r() and make them convert Int and Pair to RationalNumber.
*/
fun Int.r(): RationalNumber = RationalNumber(this, 2)
fun Pair<Int, Int>.r(): RationalNumber = RationalNumber(first, second)

data class RationalNumber(val numerator: Int, val denominator: Int)
//sampleEnd
```

@settings

```json
{
  "data-target-platform": "junit"
}
```

:::

external fun moment(): dynamic

fun main() {
    val startOfDay = moment().startOf("day").fromNow()
    println("The start of the day was $startOfDay")
}

::: kotlin-playground External JS Libraries

@file main.kt

```kotlin
external fun moment(): dynamic

fun main() {
    val startOfDay = moment().startOf("day").fromNow()
    println("The start of the day was $startOfDay")
}
```

@settings

```json
{
  "data-target-platform": "js",
  "data-js-libs": "https://unpkg.com/moment@2"
}
```

:::

import cat.Cat

fun main(args: Array<String>) {
//sampleStart
    val cat = Cat("Kitty")
    println(cat.name)
//sampleEnd
}

package cat
class Cat(val name: String)

::: kotlin-playground Multiple files

@file main.kt

```kotlin
import cat.Cat

fun main(args: Array<String>) {
//sampleStart
    val cat = Cat("Kitty")
    println(cat.name)
//sampleEnd
}
```

@file cat.kt

```kotlin
package cat
class Cat(val name: String)
```

:::