examples.md

<title>Arrow Playground examples</title> <style> .markdown-body { max-width: 980px; margin: 50px auto; } </style> <script src="../playground.js" data-selector=".kotlin-code"></script>

Arrow Playground demo

Automatic initialization

Insert a <script> element into your page and specify what elements should be converted in its data-selector attribute.

<script src="https://unpkg.com/arrow-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, "[email protected]")
    println(contact.id)                   
}

Turns into:

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

fun main(args: Array<String>) {
    val contact = Contact(1, "[email protected]")
    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!")
}

Manual initialization

If you want to init Arrow Playground manually - omit data-selector attribute and call it when it's needed:

<script src="https://unpkg.com/arrow-playground@1"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  ArrowPlayground('.arrow-playground');
});
</script>

Add additional hidden files: Put your files between <textarea> tag with class hidden-dependency.

Look at example:

<div class="arrow-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>

Create

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>