From 2abfdcfb8dc404093965fda2636a376d5f3ed9f4 Mon Sep 17 00:00:00 2001
From: Deep <hello@deeplakhani.co>
Date: Tue, 22 Oct 2024 21:47:26 -0400
Subject: [PATCH] add docs for codeblock line highlight

---
 content/components/code.mdx | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

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:
 
-<Card title="Code Group" href="/content/components/code-groups" icon="columns-3">
+<Card
+  title="Code Group"
+  href="/content/components/code-groups"
+  icon="columns-3"
+>
   Read the reference for the Code Group component
 </Card>