Insert a <script> element into your page and specify what elements should be converted in its data-selector attribute.
<script src="https://unpkg.com/kotlin-playground@1" data-selector=".kotlin-code"></script>
For instance following block of Kotlin code:
class Contact(val id: Int, var email: String)
fun main(args: Array<String>) {
val contact = Contact(1, "mary@gmail.com")
println(contact.id)
}
Turns into:
class Contact(val id: Int, var email: String)
fun main(args: Array<String>) {
val contact = Contact(1, "mary@gmail.com")
println(contact.id)
}
You can also change the playground theme or disable run button using theme and data-highlight-only attributes.
<div class="kotlin-code" theme="idea" data-highlight-only></div>
fun main(args: Array<String>) {
println("Hello World!")
}
Or theme darcula
fun main(args: Array<String>) {
println("Hello World!")
}
Set another target platform with attribute data-target-platform.
<div class="kotlin-code" data-target-platform="js"></div>
fun sum(a: Int, b: Int): Int {
return a + b
}
fun main(args: Array<String>) {
print(sum(-1, 8))
}
You can use JS IR compiler also.
<div class="kotlin-code" data-target-platform="js-ir"></div>
fun mul(a: Int, b: Int): Int {
return a * b
}
fun main(args: Array<String>) {
print(mul(-2, 4))
}
You can use Wasm compiler.
<div class="kotlin-code" data-target-platform="wasm"></div>
fun mul(a: Int, b: Int): Int {
return a * b
}
fun main(args: Array<String>) {
print(mul(-2, 4))
}
Use data-target-platform attribute with value junit for creating examples with tests:
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
If you want to hide test classes in you code snippet just set the attribute folded-button to false value.
Also you can mark arbitrary code by putting it between [mark]your code[/mark].
<div class="kotlin-code" data-target-platform="junit" folded-button="false"></div>
import org.junit.Test
import org.junit.Assert
class TestLambdas() {
@Test fun contains() {
Assert.assertTrue("The result should be true if the collection contains an even number",
containsEven(listOf(1, 2, 3, 126, 555)))
}
@Test fun notContains() {
Assert.assertFalse("The result should be false if the collection doesn't contain an even number",
containsEven(listOf(43, 33)))
}
}
//sampleStart
/*
Pass a lambda to any function to check if the collection contains an even number.
The function any gets a predicate as an argument and returns true if there is at least one element satisfying the predicate.
*/
fun containsEven(collection: Collection<Int>): Boolean = collection.any {[mark]TODO()[/mark]}
//sampleEnd
Use data-target-platform attribute with value canvas for working with canvas in Kotlin:
<div class="kotlin-code" data-target-platform="canvas" data-output-height="200">
package fancylines
import jquery.*
import org.w3c.dom.CanvasRenderingContext2D
import org.w3c.dom.HTMLCanvasElement
import kotlinx.browser.document
import kotlinx.browser.window
import kotlin.js.Math
val canvas = initalizeCanvas()
fun initalizeCanvas(): HTMLCanvasElement {
val canvas = document.createElement("canvas") as HTMLCanvasElement
val context = canvas.getContext("2d") as CanvasRenderingContext2D
context.canvas.width = window.innerWidth.toInt();
context.canvas.height = window.innerHeight.toInt();
document.body!!.appendChild(canvas)
return canvas
}
class FancyLines() {
val context = canvas.getContext("2d") as CanvasRenderingContext2D
val height = canvas.height
val width = canvas.width
var x = width * Math.random()
var y = height * Math.random()
var hue = 0;
fun line() {
context.save();
context.beginPath();
context.lineWidth = 20.0 * Math.random();
context.moveTo(x, y);
x = width * Math.random();
y = height * Math.random();
context.bezierCurveTo(width * Math.random(), height * Math.random(),
width * Math.random(), height * Math.random(), x, y);
hue += (Math.random() * 10).toInt();
context.strokeStyle = "hsl($hue, 50%, 50%)";
context.shadowColor = "white";
context.shadowBlur = 10.0;
context.stroke();
context.restore();
}
fun blank() {
context.fillStyle = "rgba(255,255,1,0.1)";
context.fillRect(0.0, 0.0, width.toDouble(), height.toDouble());
}
fun run() {
window.setInterval({ line() }, 40);
window.setInterval({ blank() }, 100);
}
}
//sampleStart
fun main(args: Array<String>) {
FancyLines().run()
}
//sampleEnd
Use data-js-libs with a comma-separated list of URLs to specify additional javascript libraries to load.
<div class="kotlin-code" data-target-platform="js" data-js-libs="https://unpkg.com/moment@2">
external fun moment(): dynamic
fun main() {
val startOfDay = moment().startOf("day").fromNow()
println("The start of the day was $startOfDay")
}
If you want to init Kotlin Playground manually - omit data-selector attribute and call it when it's needed:
<script src="https://unpkg.com/kotlin-playground@1"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
KotlinPlayground('.kotlin-playground');
});
</script>
Add additional hidden files:
Put your files between <textarea> tag with class hidden-dependency.
Look at example:
<div class="kotlin-playground">
import cat.Cat
fun main(args: Array<String>) {
//sampleStart
val cat = Cat("Kitty")
println(cat.name)
//sampleEnd
}
<textarea class="hidden-dependency">
package cat
class Cat(val name: String)
</textarea>
</div>