refactor: extract highlightCodeSync for shared code highlighting

- Add synchronous highlightCodeSync() function to shiki.ts
- Update readme.ts to use shared function instead of duplicating logic
- Reduces code duplication between readme and docs rendering

Author: danielroe

server/utils/readme.ts

@@ -3,6 +3,7 @@ import sanitizeHtml from 'sanitize-html'
 import { hasProtocol } from 'ufo'
 import type { ReadmeResponse } from '#shared/types/readme'
 import { convertBlobToRawUrl, type RepositoryInfo } from '#shared/utils/git-providers'
+import { highlightCodeSync } from './shiki'
 
 /**
  * Playground provider configuration
@@ -266,26 +267,7 @@ export async function renderReadmeHtml(
 
   // Syntax highlighting for code blocks (uses shared highlighter)
   renderer.code = ({ text, lang }: Tokens.Code) => {
-    const language = lang || 'text'
-    const loadedLangs = shiki.getLoadedLanguages()
-
-    // Use Shiki if language is loaded, otherwise fall back to plain
-    if (loadedLangs.includes(language as never)) {
-      try {
-        const html = shiki.codeToHtml(text, {
-          lang: language,
-          theme: 'github-dark',
-        })
-        // Shiki doesn't encode > in text content (e.g., arrow functions)
-        return escapeRawGt(html)
-      } catch {
-        // Fall back to plain code block
-      }
-    }
-
-    // Plain code block for unknown languages
-    const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-    return `<pre><code class="language-${language}">${escaped}</code></pre>\n`
+    return highlightCodeSync(shiki, text, lang || 'text')
   }
 
   // Resolve image URLs (with GitHub blob → raw conversion)

server/utils/shiki.ts

@@ -49,8 +49,17 @@ export async function getShikiHighlighter(): Promise<HighlighterCore> {
   return highlighter
 }
 
-export async function highlightCodeBlock(code: string, language: string): Promise<string> {
-  const shiki = await getShikiHighlighter()
+/**
+ * Synchronously highlight a code block using an already-initialized highlighter.
+ * Use this when you have already awaited getShikiHighlighter() and need to
+ * highlight multiple blocks without async overhead (e.g., in marked renderers).
+ *
+ * @param shiki - The initialized Shiki highlighter instance
+ * @param code - The code to highlight
+ * @param language - The language identifier (e.g., 'typescript', 'bash')
+ * @returns HTML string with syntax highlighting
+ */
+export function highlightCodeSync(shiki: HighlighterCore, code: string, language: string): string {
   const loadedLangs = shiki.getLoadedLanguages()
 
   if (loadedLangs.includes(language as never)) {
@@ -74,6 +83,19 @@ export async function highlightCodeBlock(code: string, language: string): Promis
   return `<pre><code class="language-${language}">${escaped}</code></pre>\n`
 }
 
+/**
+ * Highlight a code block with syntax highlighting (async convenience wrapper).
+ * Initializes the highlighter if needed, then delegates to highlightCodeSync.
+ *
+ * @param code - The code to highlight
+ * @param language - The language identifier (e.g., 'typescript', 'bash')
+ * @returns HTML string with syntax highlighting
+ */
+export async function highlightCodeBlock(code: string, language: string): Promise<string> {
+  const shiki = await getShikiHighlighter()
+  return highlightCodeSync(shiki, code, language)
+}
+
 /**
  * Escape raw > characters in HTML text content.
  * Shiki outputs > without encoding in constructs like arrow functions (=>).