Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JetBrains/kotlin-playground
Self-contained component to embed in websites for running Kotlin code
https://github.com/JetBrains/kotlin-playground
kotlin kotlin-playground playground
Last synced: 3 months ago
JSON representation
Self-contained component to embed in websites for running Kotlin code
- Host: GitHub
- URL: https://github.com/JetBrains/kotlin-playground
- Owner: JetBrains
- License: apache-2.0
- Created: 2017-06-23T11:40:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-10T13:33:43.000Z (7 months ago)
- Last Synced: 2024-04-16T11:20:02.283Z (7 months ago)
- Topics: kotlin, kotlin-playground, playground
- Language: JavaScript
- Homepage: https://jetbrains.github.io/kotlin-playground/examples/
- Size: 2.58 MB
- Stars: 426
- Watchers: 38
- Forks: 77
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
[](https://www.npmjs.com/package/kotlin-playground)
# Kotlin Playground
Component that creates Kotlin-aware editors capable of running code from HTML block elements.
[Examples](https://jetbrains.github.io/kotlin-playground/examples/)
## Installation
### Use our CDN
Insert a `` element into your page and specify what elements should be converted in its `data-selector` attribute.
```html
<script src="https://unpkg.com/kotlin-playground@1" data-selector="code">
```
Or, if you need to separate process of loading/conversion, omit the `data-selector` attribute and use a second `` element like this:
```html
<script src="https://unpkg.com/kotlin-playground@1">
document.addEventListener('DOMContentLoaded', function() {
KotlinPlayground('.code-blocks-selector');
});
```
You can also overwrite the server where the code will be sent to be compiled and analyzed (for example if you host a server instance that includes your own Kotlin libraries). For that you can set the `data-server` attribute.
And you can also set a default Kotlin version for code snippets to run on. Bear in mind that the [version set per editor](#customizing-editors) will take precedence though:
```html
```
Fork & clone [the old server repository](https://github.com/JetBrains/kotlin-web-demo) or [the new server](https://github.com/AlexanderPrendota/kotlin-compiler-server).
### Host your own instance
Install Kotlin-playground as dependency via NPM.
```bash
npm install kotlin-playground -S
```
And then just use it in your code.
```js
// ES5
var playground = require('kotlin-playground');
document.addEventListener('DOMContentLoaded', function() {
playground('code'); // attach to all elements
});
// ES6
import playground from 'kotlin-playground';
document.addEventListener('DOMContentLoaded', () => {
playground('code'); // attach to all elements
});
```
### Use from plugins
1) [Kotlin Playground WordPress plugin](https://github.com/Kotlin/kotlin-playground-wp-plugin) — [WordPress](https://wordpress.com/) plugin which allows to embed interactive Kotlin playground to any post.
2) [Kotlin Playground Coursera plugin](https://github.com/AlexanderPrendota/kotlin-playground-coursera-plugin) — Allows embedding interactive Kotlin playground for [coursera](https://www.coursera.org/) lessons.
3) [Kotlin Playground Orchid plugin](https://orchid.netlify.com/plugins/OrchidSyntaxHighlighter#kotlin-playground) — Allows embedding interactive Kotlin playground in [Orchid](https://orchid.netlify.com/) documentation sites.
### Options
Kotlin Playground supports several events, and also Kotlin version or server URL overwriting passing an additional `options` parameter on initialisation.
For example:
```js
function onChange(code) {
console.log("Editor code was changed:\n" + code);
}
function onTestPassed() {
console.log("Tests passed!");
}
const options = {
server: 'https://my-kotlin-playground-server',
version: '1.3.50',
onChange: onChange,
onTestPassed: onTestPassed,
callback: callback(targetNode, mountNode)
};
playground('.selector', options)
```
**Events description:**
- `onChange(code)` — Fires every time the content of the editor is changed. Debounce time: 0.5s.
_code_ — current playground code.
- `onTestPassed` — Is called after all tests passed. Use for target platform `junit`.
- `onTestFailed` — Is called after all tests failed. Use for target platform `junit`.
- `onCloseConsole` — Is called after the console's closed.
- `onOpenConsole` — Is called after the console's opened.
- `getJsCode(code)` — Is called after compilation Kotlin to JS. Use for target platform `js`.
_code_ — converted JS code from Kotlin.
- `callback(targetNode, mountNode)` — Is called after playground's united.
_targetNode_ — node with plain text before component initialization.
_mountNode_ — new node with runnable editor.
- `getInstance(instance)` - Getting playground state API.
```js
instance.state // playground attributes, dependencies and etc.
instance.nodes // playground NodeElement.
instance.codemirror // editor specification.
instance.execute() // function for executing code snippet.
instance.getCode() // function for getting code from snippet.
```
## Customizing editors
Use the following attributes on elements that are converted to editors to adjust their behavior.
- `data-version`: Target Kotlin [compiler version](https://api.kotlinlang.org/versions):
```html
/*
Your code here
*/
```
- `args`: Command line arguments.
```html
/*
Your code here
*/
```
- `data-target-platform`: target platform: `junit`, `canvas`, `js` or `java` (default).
```html
/*
Your code here
*/
```
- `data-highlight-only`: Read-only mode, with only highlighting. `data-highlight-only="nocursor"` - no focus on editor.
```html
/*
Your code here
*/
```
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 use attribute `none-markers`.
For adding hidden files: put files between `` tag with class `hidden-dependency`.
```html
import cat.Cat
fun main(args: Array) {
//sampleStart
val cat = Cat("Kitty")
println(cat.name)
//sampleEnd
}
package cat
class Cat(val name: String)
```
Also if you want to hide code snippet just set the attribute `folded-button` to `false` value.
- `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.
```html
/*
Your code here
*/
```
- `auto-indent="true|false"`: Whether to use the context-sensitive indentation. Defaults to `false`.
- `theme="idea|darcula|default"`: Editor IntelliJ IDEA themes.
- `mode="kotlin|js|java|groovy|xml|c|shell|swift|obj-c"`: Different languages styles. Runnable snippets only with `kotlin`. Default to `kotlin`.
- `data-min-compiler-version="1.0.7"`: Minimum target Kotlin [compiler version](https://api.kotlinlang.org/versions)
- `data-autocomplete="true|false"`: Get completion on every key press. If `false` => Press ctrl-space to activate autocompletion. Defaults to `false`.
- `highlight-on-fly="true|false"`: Errors and warnings check for each change in the editor. Defaults to `false`.
- `indent="4"`: How many spaces a block should be indented. Defaults to `4`.
- `lines="true|false"`: Whether to show line numbers to the left of the editor. Defaults to `false`.
- `from="5" to="10"`: Create a part of code. Example `from` line 5 `to` line 10.
- `data-output-height="200"`: Set the iframe height in `px` in output. Use for target platform `canvas`.
- `match-brackets="true|false"`: Determines whether brackets are matched whenever the cursor is moved next to a bracket. Defaults to `false`
- `data-crosslink="enabled|disabled"`: Show link for open in playground. Defaults to `undefined` – only supported in playground.
- `data-shorter-height="100"`: show expander if height more than value of attribute
- `data-scrollbar-style`: Chooses a [scrollbar implementation](https://codemirror.net/doc/manual.html#config). Defaults to `overlay`.
## Supported keyboard shortcuts
- Ctrl+Space — code completion
- Ctrl+F9/Cmd+R — execute snippet
- Ctrl+/ — comment code
- Ctrl+Alt+L/Cmd+Alt+L — format code
- Shift+Tab — decrease indent
- Ctrl+Alt+H/Cmd+Alt+H — highlight code
- Ctrl+Alt+Enter/Cmd+Alt+Enter — show import suggestions
## Develop and contribute
1. Fork & clone [our repository](https://github.com/JetBrains/kotlin-playground).
2. Install required dependencies `yarn install`.
3. `yarn start` to start local development server at http://localhost:9000.
4. `yarn test` to run tests.
`TEST_HEADLESS_MODE=true` to run tests in headless mode.
5. `yarn run build` to create production bundles.