more refactor

Author: LadyBluenotes

package.json

@@ -102,7 +102,9 @@
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
+    "hast-util-from-parse5": "^8.0.3",
     "npm-run-all": "^4.1.5",
+    "parse5": "^8.0.0",
     "postcss": "^8.4.35",
     "prettier": "^3.7.4",
     "tailwindcss": "^4.1.11",

pnpm-lock.yaml

@@ -383,8 +383,8 @@ const options: HTMLReactParserOptions = {
 }
 
 type MarkdownProps = {
+  htmlMarkup: string
   rawContent?: string
-  htmlMarkup?: string
 }
 
 export function Markdown({ rawContent, htmlMarkup }: MarkdownProps) {
@@ -395,11 +395,7 @@ export function Markdown({ rawContent, htmlMarkup }: MarkdownProps) {
       return renderMarkdown(rawContent)
     }
 
-    if (htmlMarkup) {
-      return { markup: htmlMarkup, headings: [] }
-    }
-
-    return { markup: '', headings: [] }
+    return { markup: htmlMarkup, headings: [] }
   }, [rawContent, htmlMarkup])
 
   React.useEffect(() => {

src/components/Markdown.tsx

@@ -10,8 +10,8 @@ export type MarkdownHeading = {
   level: number
 }
 
-export async function rehypeCollectHeadings (tree, file, headings: MarkdownHeading[]) {
-  return (tree) => {
+export function rehypeCollectHeadings(headings: MarkdownHeading[]) {
+  return function collectHeadings(tree: Root, file: any) {
     visit(tree, 'element', (node) => {
       if (!isHeading(node)) {
         return

src/utils/markdown/plugins/collectHeadings.ts

@@ -1,32 +1,29 @@
-import { unified } from 'unified'
-import rehypeParse from 'rehype-parse'
 import { isElement } from 'hast-util-is-element'
 import type { Element } from 'hast-util-is-element/lib'
+import type { Properties } from 'hast'
 
 export const COMPONENT_PREFIX = '::'
 export const START_PREFIX = '::start:'
 export const END_PREFIX = '::end:'
 
-const componentParser = unified().use(rehypeParse, { fragment: true })
-
 export const normalizeComponentName = (name: string) => name.toLowerCase()
 
 export function parseDescriptor(descriptor: string) {
-  const tree = componentParser.parse(`<${descriptor} />`)
-  const node = tree.children[0]
-  if (!node || node.type !== 'element') {
+  const match = descriptor.match(/^(?<component>[\w-]+)(?<rest>.*)$/)
+  if (!match?.groups?.component) {
     return null
   }
 
-  const component = node.tagName
+  const component = normalizeComponentName(match.groups.component)
   const attributes: Record<string, string> = {}
-  const properties = node.properties ?? {}
-  for (const [key, value] of Object.entries(properties)) {
-    if (Array.isArray(value)) {
-      attributes[key] = value.join(' ')
-    } else if (value != null) {
-      attributes[key] = String(value)
-    }
+  const rest = match.groups.rest ?? ''
+  const attributePattern = /(\w[\w-]*)(?:="([^"]*)"|='([^']*)'|=([^\s]+))?/g
+
+  let attributeMatch: RegExpExecArray | null
+  while ((attributeMatch = attributePattern.exec(rest))) {
+    const [, key, doubleQuoted, singleQuoted, bare] = attributeMatch
+    const value = doubleQuoted ?? singleQuoted ?? bare ?? ''
+    attributes[key] = value
   }
 
   return { component, attributes }

src/utils/markdown/plugins/helpers.ts

@@ -5,3 +5,4 @@ export {
   type MarkdownHeading,
   rehypeCollectHeadings,
 } from './collectHeadings'
+export { rehypeShikiHighlight } from './syntaxHighlight'

src/utils/markdown/plugins/index.ts

@@ -0,0 +1,140 @@
+import { transformerNotationDiff } from '@shikijs/transformers'
+import { unified } from 'unified'
+import rehypeParse from 'rehype-parse'
+import { visit } from 'unist-util-visit'
+import type { Element, Root } from 'hast'
+import { createHighlighter } from 'shiki'
+import type { HighlighterGeneric, Lang, ThemeInput } from 'shiki'
+
+const DEFAULT_THEMES: ThemeInput[] = ['github-light', 'tokyo-night']
+const DEFAULT_LANGS: Lang[] = [
+  'typescript',
+  'javascript',
+  'tsx',
+  'jsx',
+  'bash',
+  'json',
+  'html',
+  'css',
+  'markdown',
+  'plaintext',
+]
+
+const LANG_ALIASES: Record<string, Lang> = {
+  ts: 'typescript',
+  js: 'javascript',
+  sh: 'bash',
+  shell: 'bash',
+  console: 'bash',
+  zsh: 'bash',
+  md: 'markdown',
+  txt: 'plaintext',
+  text: 'plaintext',
+}
+
+let highlighterPromise: Promise<HighlighterGeneric<any, any>> | null = null
+const fragmentParser = unified().use(rehypeParse, { fragment: true })
+
+async function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      langs: DEFAULT_LANGS,
+      themes: DEFAULT_THEMES,
+    })
+  }
+  return highlighterPromise
+}
+
+async function renderMermaid(code: string): Promise<string> {
+  const mermaid = await import('mermaid')
+  const { svg } = await mermaid.default.render(`mermaid-${Math.random()}`, code)
+  return svg
+}
+
+export const rehypeShikiHighlight = () => {
+  return async (tree: Root) => {
+    const highlighter = await getHighlighter()
+
+    const highlightTasks: Array<Promise<void>> = []
+
+    visit(tree, 'element', (node: Element) => {
+      if (node.tagName !== 'pre') return
+      const codeNode = node.children?.[0]
+      if (!codeNode || codeNode.type !== 'element' || codeNode.tagName !== 'code') {
+        return
+      }
+
+      const classNames = codeNode.properties?.className
+      const className = Array.isArray(classNames)
+        ? classNames.find((cls) => cls.startsWith('language-'))
+        : typeof classNames === 'string'
+          ? classNames
+          : undefined
+
+      const langRaw = className?.replace('language-', '') ?? 'plaintext'
+      const codeText = codeNode.children?.[0]?.value
+      if (typeof codeText !== 'string') {
+        return
+      }
+
+      highlightTasks.push(
+        (async () => {
+          const normalizedLang = LANG_ALIASES[langRaw] ?? (langRaw as Lang)
+          const effectiveLang = normalizedLang === 'mermaid' ? 'plaintext' : normalizedLang
+
+          if (
+            !highlighter
+              .getLoadedLanguages()
+              .includes(effectiveLang as unknown as Lang)
+          ) {
+            try {
+              await highlighter.loadLanguage(effectiveLang as unknown as Lang)
+            } catch {
+              // stick with plaintext fallback
+            }
+          }
+
+          const htmlFragments = await Promise.all(
+            DEFAULT_THEMES.map((theme) =>
+              highlighter.codeToHtml(codeText, {
+                lang: effectiveLang,
+                theme,
+                transformers: [transformerNotationDiff()],
+              }),
+            ),
+          )
+
+          node.tagName = 'div'
+          node.properties = {
+            ...node.properties,
+            className: [
+              ...(Array.isArray(node.properties?.className)
+                ? (node.properties?.className as string[])
+                : []),
+              'shiki-wrapper',
+            ],
+            'data-language': normalizedLang,
+          }
+
+          if (normalizedLang === 'mermaid') {
+            const svg = await renderMermaid(codeText)
+            const mermaidTree = fragmentParser.parse(
+              `<div class="mermaid-diagram py-4 bg-neutral-50 dark:bg-gray-900">${svg}</div>`,
+            ) as Root
+
+            node.children = mermaidTree.children
+            return
+          }
+
+          const fragmentTrees = htmlFragments.map((fragment) =>
+            fragmentParser.parse(fragment) as Root,
+          )
+
+          node.children = fragmentTrees.flatMap((fragmentTree) => fragmentTree.children)
+        })(),
+      )
+    })
+
+    await Promise.all(highlightTasks)
+  }
+}

src/utils/markdown/plugins/syntaxHighlight.ts

@@ -12,6 +12,7 @@ import {
   rehypeParseCommentComponents,
   rehypeTransformCommentComponents,
   rehypeCollectHeadings,
+  rehypeShikiHighlight,
   type MarkdownHeading,
 } from './plugins'
 
@@ -62,6 +63,7 @@ export function renderMarkdown(content): MarkdownRenderResult {
       },
     })
     .use(rehypeSlug)
+    .use(rehypeShikiHighlight())
     .use(rehypeTransformCommentComponents)
     .use(rehypeAutolinkHeadings, {
       behavior: 'wrap',