Add code highlighting for "use workflow" and "use step" directives in Effortless Setup section

Co-authored-by: pranaygp <1797812+pranaygp@users.noreply.github.com>

Author: Copilot

docs/app/(home)/components/code-block.tsx

@@ -1,4 +1,4 @@
-import { codeToHtml } from 'shiki';
+import { codeToHtml, type ShikiTransformer } from 'shiki';
 import { cn } from '@/lib/utils';
 
 type CodeBlockProps = {
@@ -7,16 +7,49 @@ type CodeBlockProps = {
   codeblock?: {
     className?: string;
   };
+  /**
+   * List of strings to highlight in the code block.
+   * These will be given a special highlight style.
+   */
+  highlight?: string[];
 };
 
-export const CodeBlock = async ({ code, lang, codeblock }: CodeBlockProps) => {
+/**
+ * Creates a Shiki transformer that highlights specific strings in code.
+ */
+function createHighlightTransformer(patterns: string[]): ShikiTransformer {
+  return {
+    name: 'highlight-strings',
+    span(node, _line, _col, _lineElement, token) {
+      // Check if the token content matches any of the patterns
+      const tokenContent = token.content;
+      if (patterns.some((pattern) => tokenContent.includes(pattern))) {
+        this.addClassToHast(node, 'highlighted-code');
+      }
+    },
+  };
+}
+
+export const CodeBlock = async ({
+  code,
+  lang,
+  codeblock,
+  highlight,
+}: CodeBlockProps) => {
+  const transformers: ShikiTransformer[] = [];
+
+  if (highlight && highlight.length > 0) {
+    transformers.push(createHighlightTransformer(highlight));
+  }
+
   const html = await codeToHtml(code, {
     lang,
     themes: {
       light: 'github-light-default',
       dark: 'github-dark-default',
     },
     defaultColor: false,
+    transformers,
   });
 
   return (

docs/app/(home)/components/implementation.tsx

@@ -77,6 +77,7 @@ export const Implementation = () => (
               className:
                 'shadow-none !bg-background dark:bg-sidebar h-full rounded-md with-line-numbers',
             }}
+            highlight={['use workflow', 'use step']}
           />
         </div>
       ))}

docs/app/global.css

@@ -157,3 +157,8 @@
 .with-checks.with-line-numbers code .line::before {
   @apply left-5!;
 }
+
+/* Highlighted code style for directive strings like "use workflow" and "use step" */
+.highlighted-code {
+  @apply bg-primary/15 rounded px-1 py-0.5;
+}