Kotlin-runcode NPM

Run Kotlin Code

Component that creates Kotlin-aware editors capable of running code from HTML block elements.

Installation

Use our CDN

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-runcode@1/dist/runcode.min.js" data-selector="code"></script>

Or, if you need to separate process of loading/conversion, omit the data-selector attribute and use a second <script> element like this:

<script src="https://unpkg.com/kotlin-runcode@1/dist/runcode.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  KotlinRunCode('.code-blocks-selector');
});
</script>

Host your own instance

Install KotlinRunCode as dependency via NPM.

npm install kotlin-runcode -S

And then just use it in your code.

// ES5
var runcode = require('kotlin-runcode');

document.addEventListener('DOMContentLoaded', function() {
  runcode('code'); // attach to all <code> elements
});


// ES6
import runcode from 'kotlin-runcode';

document.addEventListener('DOMContentLoaded', () => {
  runcode('code'); // attach to all <code> elements
});

Customizing editors

Use the following attributes on elements that are converted to editors to adjust their behavior.

data-min-compiler-version: Minimum target Kotlin compiler version:

 <code data-min-compiler-version="1.1">
 /*
 Your code here
 */
 </code>

data-target-platform: target platform: js or java (default).

 <code data-target-platform="js">
  /*
  Your code here
  */
 </code>

data-highlight-only: Read-only mode, with only highlighting.

<code data-highlight-only>
  /*
  Your code here
  */
</code>

Or, you can make only a part of code read-only by placing it between //sampleStart and //sampleEnd markers:

<code>
//sampleStart
fun sum(a: Int, b: Int): Int {
  return a + b
}
//sampleEnd

fun main(args: Array<String>) {
  print(sum(-1, 8))
}
</code>

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.
```
<code data-js-libs="https://my-awesome-js-lib/lib.min.js"> 
  /*
  Your code here
  */
 </code>
```

Supported keyboard shortcuts

Ctrl+Space — code completion
Ctrl+Alt+L/Cmd+Alt+L — format code
Shift+Tab — decrease indent

Develop and contribute

Fork & clone our repository.
Install required dependencies npm install.
npm start to start local development server at http://localhost:9000, or npm start -- --env.webDemoUrl=http://localhost:6666 if you want a different port.
npm run build to create production bundles.