diff --git a/content/components/code.mdx b/content/components/code.mdx index 61c8aab3a..d59351bb4 100644 --- a/content/components/code.mdx +++ b/content/components/code.mdx @@ -66,10 +66,36 @@ const hello = "world"; ``` ```` +## Line Highlighting + +You can highlight specific lines in your code blocks by adding a special comment after the language identifier. Use curly braces `{}` and specify line numbers or ranges separated by commas. + +```javascript Line Highlighting Example {1,3-5} +const greeting = "Hello, World!"; +function sayHello() { + console.log(greeting); +} +sayHello(); +``` + +````md +```javascript Line Highlighting Example {1,3-5} +const greeting = "Hello, World!"; +function sayHello() { + console.log(greeting); +} +sayHello(); +``` +```` + ## Code Groups Want to display multiple code examples in one code box? Check out the Code Group docs: - + Read the reference for the Code Group component