如何并排显示 Groovy 和 Kotlin DSL 示例
Gradle 构建脚本示例现在在 Gradle 5.0 文档 和许多 Gradle 指南 中包含 Kotlin DSL 代码段，与 Groovy 代码段并排显示。
我们希望您能够在您的 README 和基于 Web 的文档中显示两种 DSL，因此本文展示了在 GitHub 上的多语言 和 网站上 显示示例的方法。
GitHub 上的 Groovy 和 Kotlin DSL 示例
很难找到没有 README.md 或 README.adoc 的开源项目。虽然没有太多方法可以使这些 README 页面具有交互性，但我们可以使用 Markdown 或 Asciidoc 中的 <details> 和 <summary> 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 的组合创建了您在帖子顶部看到的界面。
关于代码功能的一些说明
- 首先，JS 初始化首选语言，获取并存储在
window.localStorage中，以便保存用户偏好。 - 接下来，它会折叠所有具有
class=multi-language-sample的兄弟节点，并为每个示例容器元素生成选项卡。 - 最后，当点击选项卡时，JavaScript 会测量并滚动窗口，以便在代码片段长度差异很大的情况下内容不会“跳跃”——还不错吧？
CSS 负责在相应的选项卡中添加一个漂亮的 Groovy 或 Kotlin 徽标，如果选项卡未处于活动状态，则徽标会变灰。
额外功能：您可以添加 class="multi-language-text lang-foo" 使任何内容仅在选定语言下显示。
我测试了该代码，它可以在 IE10+ 上运行，但如果您发现任何错误，请告知我们。我的意思是，它不像 Google Cloud Storage 文档那样花哨，但我找不到任何合适的库来完成这项工作。
结论
这些是您可以在 GitHub README 或网站上用于显示多种语言示例的几个想法。我希望您能发现这些想法对您的项目有所帮助。欢迎您提出其他想法和贡献。