Function CodeBlock

apps/docs/src/components/mdx/code-block/code-block.tsx:21–222

({
  children: {
    props: { className = 'language-js', children: code = '', meta },
  },
  noMargin,
}: {
  children: React.ReactNode & {
    props: {
      className: string
      children?: string
      meta?: string
    }
  }
  className?: string
  noMargin?: boolean
})

const htmlLang = html()

const CodeBlock = function CodeBlock({
  children: {
    props: { className = 'language-js', children: code = '', meta },
  },
  noMargin,
}: {
  children: React.ReactNode & {
    props: {
      className: string
      children?: string
      meta?: string
    }
  }
  className?: string
  noMargin?: boolean
}) {
  code = code.trimEnd()
  let lang = jsxLang
  if (className === 'language-css') {
    lang = cssLang
  } else if (className === 'language-html') {
    lang = htmlLang
  }
  const tree = lang.language.parser.parse(code)
  let tokenStarts = new Map()
  let tokenEnds = new Map()
  const highlightTheme = getSyntaxHighlight(CustomTheme)
  highlightTree(tree as any, highlightTheme.match, (from, to, className) => {
    tokenStarts.set(from, className)
    tokenEnds.set(to, className)
  })

  const highlightedLines = new Map<number, { className: string; css: TwStyle[] }>()
  const lines = code.split('\n')
  const lineDecorators = getLineDecorators(code, meta)
  for (let decorator of lineDecorators) {
    highlightedLines.set(decorator.line - 1, {
      className: decorator.className,
      css: decorator.css,
    })
  }

  const inlineDecorators = getInlineDecorators(code, meta)
  const decoratorStarts = new Map<number, { className: string; css: TwStyle[] }>()
  const decoratorEnds = new Map<number, { className: string; css: TwStyle[] }>()
  for (let decorator of inlineDecorators) {
    // Find where inline highlight starts and ends.
    let decoratorStart = 0
    for (let i = 0; i < decorator.line - 1; i++) {
      decoratorStart += lines[i].length + 1
    }
    decoratorStart += decorator.startColumn
    const decoratorEnd = decoratorStart + (decorator.endColumn - decorator.startColumn)
    if (decoratorStarts.has(decoratorStart)) {
      throw Error('Already opened decorator at ' + decoratorStart)
    }
    decoratorStarts.set(decoratorStart, {
      className: decorator.className,