Embedding Kotlin Playground

没错,这是一段可以嵌入到博客中独立运行的kotlin代码。要注意的是,您还能修改其中的代码,而不只是让它运行起来。

这很酷,不是吗?让上述代码也顺利工作起来吧。

通常来说,您并不希望所有代码段都显示出来,而只想展示当中最有趣和最重要的部分。这也是可以实现的。

您也可以添加测试:

你也可以将JavaScript设置为目标平台,甚至还能在canvas上绘制图案

有时候您并不需要或者不能创建一个可运行的示例。此时,您可以运用highlight-only特性,在相同的样式下显示这段不会运行的代码。

嵌入式Kotlin环境工作原理

一直以来,成千上万的萌新通过try.kotlinlang.org这个网站作为一种交互方式来学习Kotlin。尤其是Kotlin Koans Online现在已经非常受欢迎。高端用户可以直接利用这个开发环境来试运行小段代码,而无需打开IDE,例如在StackOverflow上粘贴代码来回答问题的时候。

Embedded Kotlin Playground在同样的原理下工作,但是允许你在网页中编写及运行示例。编译将在我们的后端服务器上进行,然后运行在你的浏览器上(如果平台是JS)或者运行在服务器上(如果平台是JVM)。

前端

只需要在header中添加简单的一行代码,即可将该环境嵌入到你的页面:

现在页面上所有代码块都将被转换为能运行的Kotlin代码片段。当然可以自定义data-selector将脚本应用到某些特定的类,也可以手动配置Kotlin运行环境。

除此之外,还有很多其他的安装及自定义选项,可以在文档中查看。

后端

嵌入式环境将在后端编译代码,并高亮显示完成的信息。通常情况下,你不需要担心后端,直接使用我们的服务器即可,除非你想引用自定义的JVM库。

当编写的示例需要引用到外部的库,例如你在为自己的库编写可交互文档时,你需要配置及运行一个开发环境的实例。这是一件很容易的事:添加依赖,运行两个预定制的gradle task,再执行docker-compose up,看!服务器已经跑起来了。更多的细节请查看指引

它正应用于这些地方

  • 在官网的Kotlin文档中,我们已经大规模地去使用这个技术。所有新的文档,都含有可以运行的sample(参考Basic syntax1.11.2lambdasCoroutines的更新内容)。对于标准库的一些函数,也带有这种形象的例子。
  • Kotlin By Example也是采取Kotlin嵌入环境来编写示例
  • 我们也发布了一个WordPress的插件,增加了kotlin标签,允许您在任意文章嵌入可交互的Kotlin开发环境。本文中所有示例都是在该插件的帮助下完成编写。preview
  • Kotlin论坛里,你可以通过run-kotlin标签,在markdown语法下编写kotlin代码来回答问题,但请保证语法正确。

discuss3

应用场景

Kotlin嵌入环境改善了阅读体验,并增加了代码示例的表现力。读者不仅能看到代码,还可以运行它,更改它,并再次执行已更改的代码。特别是在以下场合中,我们鼓励所有作者都编写可运行的Kotlin代码片段:

  • 课堂上
  • 幻灯片和书籍上的补充资料
  • 库及框架的文档
  • 博客文章中的示例

在不久的将来,我们还会为嵌入式Kotlin环境上的脚本编写提供支持。

原文链接:https://blog.jetbrains.com/kotlin/2018/04/embedding-kotlin-playground/

此条目发表在官方博客分类目录。将固定链接加入收藏夹。

2 则回应给 Embedding Kotlin Playground

  1. bennyhuo说:

    哇,太帅了!

  2. Pingback引用通告: Embedding Kotlin Playground Tips | kotlin Blog

发表评论

电子邮件地址不会被公开。 必填项已用*标注