Главная

Kotlin Playground

2018-04-28 в 13:13, admin, рубрики: kotlin, Блог компании JetBrains

Привет!

Совсем недавно мы выпустили 1.4.0 версию Kotlin Playground, о которой писал в нашем блог посте PMM Kotlin Рома Белов.

стоп… стоп...
Что еще за Kotlin Playground?

Kotlin Playground — полноценный редактор кода, написанного на Kotlin, который можно интегрировать на Вашу веб-страницу.

Как же это сделать?

Все до невозможности просто, стоит добавить одну script-строчку в header:

<script src="https://unpkg.com/kotlin-playground@1" data-selector="code"></script>

Аттрибут data-selector говорит нам о том, что все блоки code магически превратятся в исполняемый Kotlin код.

Давайте попробуем другие способы, например:

<script src="https://unpkg.com/kotlin-playground@1"></script>

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

Либо через старый добрый советский npm:

npm install kotlin-playground -S

import playground from 'kotlin-playground';

document.addEventListener('DOMContentLoaded', () => {
  playground('code');
});

Теперь мы научились "устанавливать" наш Kotlin Playground, давайте посмотрим как же он работает.

Из-за невозможности использования iframe на habr, будут представлены GIF-примеры. "Живые" примеры можно посмотреть на GitHub Pages, а также на различных сайтах, где playground уже завоевал сердца пользователей(об этом чуть позже).

Ну что ж, приступим.

Kotlin Playground поддерживает в данной версии 4 платформы, которые задаются с помощью аттрибута data-target-platform="platform" — это jvm, js, junit и canvas.

По умолчанию ставится платформа JVM. Вот самый простой пример:

Kotlin Playground - 1

Если вы хотите скрыть некоторые участки кода из-за их избыточности, то можно воспользоваться неким синтаксическим сахаром и поместить нужный Вам код между
//sampleStart и //sampleEnd.

Kotlin Playground - 2

Для того, чтобы воспользоваться автодополнением достаточно нажать Ctrl + Space или Cmd + Space.

Kotlin Playground - 3

Для исполнения тестов укажем платформу junit.

Kotlin Playground - 4

Вот один из примеров рисунка на канвасе с помощью Kotlin. Больше примеров можно посмотреть вот здесь.

Kotlin Playground - 5

Где же сейчас используется Kotlin Playground?

Документация на официальном сайте Kotlin.
Все новые части документации уже сопровождаются живыми примерами, например, What's new in Kotlin 1.2 или Kotlin Coroutines.
Все примеры на Kotlin by Examples используют Kotlin Playground.
На форуме Kotlin поддерживается playground. Достаточно использовать язык run-kotlin в markdown-синтаксиcе. Вот пример.
С помощью WordPress plugin можно интегрировать наш playground в различные блоги, так мы и делаем в Kotlin Blog.

Где же мы рекомендуем использовать Kotlin Playground?
Без сомнений, данный компонент улучшает качество чтения и повышает выразительность примеров кода, поэтому мы призываем всех авторов к использованию этой библиотеки при написании: