如何并排展示 Groovy 和 Kotlin DSL 示例
引言
Gradle 构建脚本示例现在在 Gradle 5.0 文档和许多 Gradle 指南中，都会在 Groovy 代码片段旁边提供 Kotlin DSL 代码片段。
我们希望您能够在 README 和基于 Web 的文档中同时展示这两种 DSL，因此本文将介绍在 GitHub 和 您的网站上显示多语言示例的方法。
GitHub 上的 Groovy 和 Kotlin DSL 示例 #
几乎所有的开源项目都会有一个 README.md 或 README.adoc 文件。虽然让这些 README 页面具有交互性的方法不多，但我们可以通过在 Markdown 或 Asciidoc 中使用 `` HTML 元素来实现一些交互性，同时避免了在 *视图中* 显示多个连续示例的冗长。
使用这些代码片段在 GitHub 上显示多语言代码片段。
<details open>
<summary>Groovy</summary>
```groovy
logging.captureStandardOutput LogLevel.INFO
println 'A message which is logged at INFO level'
```
</details>
<details>
<summary>Kotlin</summary>
```kotlin
logging.captureStandardOutput(LogLevel.INFO)
println("A message which is logged at INFO level")
```
</details>
++++
<details open>
<summary>Groovy</summary>
++++
[source,groovy]
----
logging.captureStandardOutput LogLevel.INFO
println 'A message which is logged at INFO level'
----
++++
</details>
++++
++++
<details>
<summary>Kotlin</summary>
++++
[source,kotlin]
----
logging.captureStandardOutput(LogLevel.INFO)
println("A message which is logged at INFO level")
----
++++
</details>
++++
实际效果演示
请注意，这对 jekyll 或静态网站不起作用，在这些情况下，我们需要编写一些代码。
网络上的 Groovy 和 Kotlin DSL 示例 #
通过一些 CSS 和 JavaScript，您可以创建一个漂亮的语言选择器 UI，它可以记住用户的选择。这种原生 CSS、HTML 和 JavaScript 的组合实现了您在本文开头看到的效果。
关于代码功能的一点说明
- 首先，JavaScript 会初始化首选语言，从
window.localStorage中获取并存储，以便保存用户的偏好设置。 - 接下来，它会折叠所有具有
class=multi-language-sample的同级元素，并为每个示例容器元素生成选项卡。 - 最后，当点击选项卡时，JavaScript 会测量并滚动窗口，以防止内容“跳跃”，即使代码片段的长度差异很大——效果不错吧？
CSS 负责为相应的选项卡添加漂亮的 Groovy 或 Kotlin 图标，如果选项卡不处于活动状态，则会显示为灰色。
额外提示：您可以添加 class="multi-language-text lang-foo" 来仅为选定的语言显示任何内容。
我测试过该代码在 IE10+ 中可用，但如果您发现 bug，请告知我们。我的意思是，它不像 Google Cloud Storage 文档那样花哨，但我找不到任何好的库来做这个。
结论 #
这些是您可以在 GitHub README 或网站上展示多语言示例的几个想法。希望这些对您的项目有所帮助。我们欢迎您的其他想法和贡献。