Kotlin Playground

Kotlin官方提供了try.kotlinlang.org作为在线运行kotlin的平台给初学者来尝试以及学习kotlin。我们可以在try上面在线运行kotlin代码片段，而不需要打开一个IDE。

JetBrains现在开源了kotlin-playground的项目，它允许我们在自己的博客/网站上直接嵌入可以在线运行的kotlin代码片段。

安装

主要有两种安装方法：

在页面直接引入js文件
使用软件包管理工具，如npm安装

页面引入js文件

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

在页面添加上面的脚本，其中data-selector用来指定作为kotlin代码运行的css选择器。

如果不想在<script>标签上指定kotlin代码的选择器，把data-selector移除，在代码里自行配置如下：

<script src="https://unpkg.com/kotlin-playground@1"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  KotlinPlayground('.code-blocks-selector');
});
</script>

NPM

使用npm安装kotlin playground

npm install kotlin-playground -S

使用如下：

// ES5
var playground = require('kotlin-playground');
document.addEventListener('DOMContentLoaded', function() {
  playground('code'); 
});
// ES6
import playground from 'kotlin-playground';
document.addEventListener('DOMContentLoaded', () => {
  playground('code'); 
});

Kotlin Playground编辑器属性

Kotlin Playground在kotlin代码的元素上提供了一些属性来让我们定制编辑器的属性。

data-min-compiler-version

data-min-compiler-version指定kotlin编译器的最低版本。

<code data-min-compiler-version="1.1">
 /*
代码放在此处
 */
 </code>

data-target-platform

data-target-platform指定代码运行的目标平台：junit, canvas, js 或者 java (默认)。

<code data-target-platform="js">
  /*
  代码放在此处
  */
 </code>

data-highlight-only

data-highlight-only设定只用于高亮代码，不执行。

<code data-highlight-only>
  /*
代码放在此处
  */
</code>

只显示部分代码

在代码片段的前后添加标记//sampleStart 和//sampleEnd，它就会在页面只显示标记内的代码，其他代码会隐藏起来。

<code>
//sampleStart
fun sum(a: Int, b: Int): Int {
  return a + b
}
//sampleEnd
fun main(args: Array<String>) {
  print(sum(-1, 8))
}
</code>

如果要隐藏全部代码，把属性folded-button设置为false。

引用其他js文件

kotlin playground会加载jQuery，如果想加载其他的js文件，可以使用属性data-js-libs来指定加载的js文件，多个文件使用逗号隔开。

<code data-js-libs="https://my-awesome-js-lib/lib.min.js"> 
  /*
代码放在此处
  */
 </code>

后端

运行页面上的kotlin片段实际会把代码发送到服务器端来执行编译，然后再把结果返回到前端。服务器就是.kotlinlang.org。

安装