Хабрахабр

Kotlin Playground

Привет, Хабр!

4. Совсем недавно мы выпустили 1. 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, давайте посмотрим как же он работает.

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

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

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

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

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

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

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

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

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

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

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

  1. Учебных курсов.
  2. Сопроводительных материалов для слайдов или книг.
  3. Документаций для библиотек и фреймворков
  4. Примеров кода в блог постах

Более подробно почитать про все возможности Kotlin Playground можно тут, а сразу поиграть можно там.

Спасибо!
Have a Nice Kotlin 🙂

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть