# How to show Groovy and Kotlin DSL samples side-by-side

DevFeed: [How to show Groovy and Kotlin DSL samples side-by-side](<https://devfeed.tech/articles/how-to-show-groovy-and-kotlin-dsl-samples-side-by-side-24638.md>)

Original publisher: [Read original article](<https://blog.gradle.org/groovy-kotlin-dsl-samples>)

Author: Eric Wendelin

Published: 2018-10-11T04:00:00Z

Content type: tutorial

Language: en

Sources: [The Gradle Blog](<https://devfeed.tech/sources/the-gradle-blog.md>)

Topics: [Groovy](<https://devfeed.tech/topics/groovy.md>), [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [GitHub](<https://devfeed.tech/topics/github.md>), [Markdown](<https://devfeed.tech/topics/markdown.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [interactive website](<https://devfeed.tech/topics/interactive-website.md>), [Vanilla JavaScript](<https://devfeed.tech/topics/vanilla-js.md>), [LocalStorage](<https://devfeed.tech/topics/localstorage.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [github](<https://devfeed.tech/tags/github.md>), [gradle](<https://devfeed.tech/tags/gradle.md>), [groovy](<https://devfeed.tech/tags/groovy.md>), [guides](<https://devfeed.tech/tags/guides.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [markdown](<https://devfeed.tech/tags/markdown.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

A tutorial on displaying Groovy and Kotlin DSL examples side by side in GitHub READMEs and web-based documentation. It covers Markdown and HTML disclosure elements for GitHub, plus a CSS and vanilla JavaScript language-selector UI for websites that remembers the user's preferred language.

## Source excerpt

Gradle build script samples now have Kotlin DSL snippets alongside the Groovy snippets in Gradle 5.0 docs and many Gradle guides. We want you to be able to show both DSLs in your READMEs and web-based documentation, so this post shows ways you can display examples in multiple languages on GitHub and on your websites. Groovy and Kotlin DSL samples on GitHub It's hard to find OSS projects that don't have a README.md or README.adoc. Though there aren't many ways to make these README pages interactive, we can use the <details> and <summary> HTML elements within Markdown or Asciidoc achieve a bit of interactivity yet avoid the verbosity of having multiple subsequent samples in view. Use these code snippets to show multi-language snippets on 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> ++++ Here it is in action: Note that this won't work for jekyll or static websites, so there we have to write a bit of code. Groovy and Kotlin DSL samples on the web With a bit of CSS and JavaScript, you can make a nice little language selector UI that remembers user selections. The combination of this vanilla CSS, HTML, and JavaScript creates what you see at the top of the post. A little bit about what the code does: First, the JS initializes the preferred language, getting and storing in window.localStorage so that user preferences are saved. Ne