如何并排展示 Groovy 和 Kotlin DSL 示例
介绍
Gradle 构建脚本示例现在在 Gradle 5.0 文档和许多 Gradle 指南中，除了 Groovy 代码片段外，还提供了 Kotlin DSL 代码片段。
我们希望您能够在您的 README 和基于 Web 的文档中展示这两种 DSL，因此本文介绍了如何在 GitHub 上的多种语言和 您的网站上显示示例。
GitHub 上的 Groovy 和 Kotlin DSL 示例 #
很难找到没有 README.md 或 README.adoc 的 OSS 项目。 虽然没有太多方法使这些 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 或静态网站，因此我们需要编写一些代码。
Web 上的 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 或网站上显示多种语言示例的几个想法。 我希望您发现这些对您的项目有用。 欢迎您提出其他想法和贡献。