fix(docs): added line lighlights in codeblocks accordion component

apps/www/content/docs/components/accordion.mdx

@@ -65,10 +65,16 @@ The `Accordion` component is a vertically stacked set of interactive headings th
   </Tab>
   <Tab value="Code">
 ```tsx
-import { Accordions, Accordion } from "ruru-ui/components/accordion";
+import { Accordions, Accordion } from "ruru-ui/components/accordion"; // [!code highlight]
 
 export function Demo() {
   return (
+    // [!code word:Accordions]
+    // [!code word:trigger]
+    // [!code word:id]
+    // [!code word:type]
+    // [!code word:single]
+    // [!code word:collapsible]
     <Accordions
       type="single"
       collapsible
@@ -116,32 +122,36 @@ You can use the core components to build your own custom accordion.
   <Tab value="Code">
 ```tsx
 import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
+  AccordionRoot, // [!code highlight]
+  AccordionItem, // [!code highlight]
+  AccordionTrigger, // [!code highlight]
+  AccordionContent, // [!code highlight]
 } from "ruru-ui/components/accordion";
 
+// [!code word:AccordionRoot]
+// [!code word:type]
+// [!code word:single]
+// [!code word:collapsible]
 export function Demo() {
   return (
     <AccordionRoot type="single" collapsible className="w-full max-w-[400px]">
       <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It adheres to the WAI-ARIA design pattern.
-        </AccordionContent>
+        <AccordionTrigger>Is it accessible?</AccordionTrigger> // [!code highlight]
+        <AccordionContent> // [!code highlight]
+          Yes. It adheres to the WAI-ARIA design pattern. // [!code highlight]
+        </AccordionContent> // [!code highlight]
       </AccordionItem>
       <AccordionItem value="item-2">
-        <AccordionTrigger>Is it responsive?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It is responsive and mobile-friendly.
-        </AccordionContent>
+        <AccordionTrigger>Is it responsive?</AccordionTrigger> // [!code highlight]
+        <AccordionContent> // [!code highlight]
+          Yes. It is responsive and mobile-friendly. // [!code highlight]
+        </AccordionContent> // [!code highlight]
       </AccordionItem>
       <AccordionItem value="item-3">
-        <AccordionTrigger>Is it customizable?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It is customizable and supports theming.
-        </AccordionContent>
+        <AccordionTrigger>Is it customizable?</AccordionTrigger> // [!code highlight]
+        <AccordionContent> // [!code highlight]
+          Yes. It is customizable and supports theming. // [!code highlight]
+        </AccordionContent> // [!code highlight]
       </AccordionItem>
     </AccordionRoot>
   )
@@ -169,21 +179,27 @@ import {
 
 export function Demo() {
   return (
+    // [!code word:Accordions]
     <Accordions
       className="max-w-[600px]"
       type="single"
+      // [!code word:variant]
+      // [!code word:default]
       variant="default"
+      // [!code word:theme]
       theme="default"
+      // [!code word:showCopyButton]
+      // [!code word:true]
       showCopyButton={true}
     >
       {Array.from(new Array(4)).map((_, index) => (
         <Accordion
           id={`item-${index}`}
           key={index}
           trigger={
-            <span className="w-full text-left py-4 text-current">
-              Accordion Item {index + 1}
-            </span>
+            <span className="w-full text-left py-4 text-current"> // [!code highlight]
+              Accordion Item {index + 1} // [!code highlight]
+            </span> // [!code highlight]
           }
         >
           This is the content of the accordion item {index + 1}
@@ -226,26 +242,30 @@ Add custom functionalities and styles with ease.
   <Tab value="Code">
 ```tsx
 import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
+  AccordionRoot, // [!code highlight]
+  AccordionItem, // [!code highlight]
+  AccordionTrigger, // [!code highlight]
+  AccordionContent, // [!code highlight]
 } from "ruru-ui/components/accordion";
-import { Link } from 'lucide-react';
+import { Link } from 'lucide-react'; // [!code highlight]
 
 export function Demo() {
   return (
+    // [!code word:AccordionRoot]
+    // [!code word:type]
+    // [!code word:single]
+    // [!code word:collapsible]
     <AccordionRoot type="single" collapsible className="w-full max-w-[600px] border rounded-lg">
       {Array.from(new Array(4)).map((_, index) => (
-        <AccordionItem value={`item-${index}`} key={index} className="px-4 last-of-type:border-none">
+        <AccordionItem value={`item-${index}`} key={index} className="px-4">
           <AccordionTrigger chevronPosition="left">
-            <button onClick={e => e.stopPropagation()}>
-              <Link size={16} />
-            </button>
-            <span className="w-full text-left">Is this accessible?</span>
+            <button onClick={e => e.stopPropagation()}> // [!code highlight]
+              <Link size={16} /> // [!code highlight]
+            </button> // [!code highlight]
+            <span className="w-full text-left">Is this accessible?</span> // [!code highlight]
           </AccordionTrigger>
           <AccordionContent>
-            Yes. It adheres to the WAI-ARIA design pattern.
+            Yes. It adheres to the WAI-ARIA design pattern. // [!code highlight]
           </AccordionContent>
         </AccordionItem>
       ))}