diff --git a/components/code-groups.mdx b/components/code-groups.mdx index 9cd3807a..a4694711 100644 --- a/components/code-groups.mdx +++ b/components/code-groups.mdx @@ -1,12 +1,10 @@ --- title: "Code groups" -description: "The CodeGroup component lets you combine code blocks in a display separated by tabs" +description: "Display multiple code examples in one component" icon: "group" --- -You will need to make [Code Blocks](/code) then add the `` component around them. Every Code Block must have a filename because we use the names for the tab buttons. - -See below for an example of the end result. +Use the `CodeGroup` component to display multiple code blocks in a tabbed interface, allowing users to compare implementations across different programming languages or see alternative approaches for the same task. @@ -28,11 +26,12 @@ class HelloWorld { -## Language dropdown +## Creating code groups -You can replace the tabs in a code group with a dropdown menu to toggle between languages. +To create a code group, wrap multiple code blocks with `` tags. Each code block must include a title, which becomes the tab label. - +````mdx + ```javascript helloWorld.js console.log("Hello World"); @@ -51,17 +50,13 @@ class HelloWorld { ``` +```` -### Props - - - Whether to show a dropdown button to toggle the code groups with languages as the options. - +## Language dropdown - +You can replace the tabs in a code group with a dropdown menu to toggle between languages using the `dropdown` prop. -````mdx Code Group Example - + ```javascript helloWorld.js console.log("Hello World"); @@ -80,6 +75,24 @@ class HelloWorld { ``` -```` - +````mdx highlight=1 + + +```javascript helloWorld.js +console.log("Hello World"); +``` + +```python hello_world.py +print('Hello World!') +``` + +```java HelloWorld.java +class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello, World!"); + } +} +``` + +````