docs: improve line anchors documentation with usage examples

Author: uvenkatateja

apps/website/src/docs/shiki/line-anchors.mdx

@@ -4,6 +4,24 @@ description: Add clickable anchor links to line numbers for easy reference and s
 category: [Shiki, Markdown, MDX]
 ---
 
+<Showcase>
+
+```ts lineNumbers
+import { highlight } from "@/utils/shiki/highlight";
+import { lineAnchors } from "@/utils/shiki/transformers/line-anchors";
+
+const code = `console.log('Hello World')`;
+const highlighter = await highlight();
+const html = highlighter.codeToHtml(code, {
+  lang: "javascript",
+  transformers: [lineAnchors()],
+});
+```
+
+</Showcase>
+
+The `lineAnchors` transformer adds clickable anchor links to line numbers. Each line gets an ID like `L1`, `L2`, etc.
+
 ## Installation
 
 ### shadcn/ui
@@ -33,4 +51,12 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-Then, each line in your code blocks will have an anchor link (e.g., `#L1`, `#L2`) that users can click to navigate to specific lines.
+## Usage
+
+Once enabled, users can:
+
+- Click line numbers to navigate to that line
+- Share URLs with line anchors: `yoursite.com/docs#L3`
+- Link to specific lines: `[See line 5](#L5)`
+
+The clicked line will be highlighted with a blue background and the URL will update to include the line anchor.