highlightCode() — ui Function Reference

Architecture documentation for the highlightCode() function in highlight-code.ts from the ui codebase.

Function typescript DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ highlightCode() — ui Function Reference

Dependency Diagram

graph TD
  69be30a5_baa6_89c2_30d0_20fe196fd40e["highlightCode()"]
  15d6f42b_3c16_b1d3_bb31_4653368e3f83["highlight-code.ts"]
  69be30a5_baa6_89c2_30d0_20fe196fd40e -->|defined in| 15d6f42b_3c16_b1d3_bb31_4653368e3f83
  style 69be30a5_baa6_89c2_30d0_20fe196fd40e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/lib/highlight-code.ts lines 68–106

export async function highlightCode(code: string, language: string = "tsx") {
  // Create cache key from code content and language.
  const cacheKey = createHash("sha256")
    .update(`${language}:${code}`)
    .digest("hex")

  // Check cache first.
  const cached = highlightCache.get(cacheKey)
  if (cached) {
    return cached
  }

  const html = await codeToHtml(code, {
    lang: language,
    themes: {
      dark: "github-dark",
      light: "github-light",
    },
    transformers: [
      {
        pre(node) {
          node.properties["class"] =
            "no-scrollbar min-w-0 overflow-x-auto overflow-y-auto overscroll-x-contain overscroll-y-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0 !bg-transparent"
        },
        code(node) {
          node.properties["data-line-numbers"] = ""
        },
        line(node) {
          node.properties["data-line"] = ""
        },
      },
    ],
  })

  // Cache the result.
  highlightCache.set(cacheKey, html)

  return html
}