CodeBlock() — supabase Function Reference

Source Code

apps/docs/features/ui/CodeBlock/CodeBlock.tsx lines 22–113

export async function CodeBlock({
  className,
  lang: langSetting,
  lineNumbers = true,
  contents,
  children,
  skipTypeGeneration,
}: PropsWithChildren<{
  className?: string
  lang?: string
  lineNumbers?: boolean
  contents?: string
  skipTypeGeneration?: boolean
}>) {
  let code = (contents || extractCode(children)).trim()
  const lang = tryToBundledLanguage(langSetting || '') || extractLang(children)

  let twoslashed = null as null | Map<number, Map<number, Array<NodeHover>>>
  if (!skipTypeGeneration && lang && TWOSLASHABLE_LANGS.includes(lang)) {
    try {
      const { code: editedCode, nodes } = twoslasher(code)
      const hoverNodes: Array<NodeHover> = nodes.filter((node) => node.type === 'hover')
      twoslashed = annotationsByLine(hoverNodes)
      code = editedCode
    } catch (_err) {
      // Silently ignore, if imports aren't defined type compilation fails
      // Uncomment lines below to debug in dev
      // console.log('\n==========CODE==========\n')
      // console.log(code)
      // console.error(_err.recommendation)
    }
  }

  const { tokens } = highlighter.codeToTokens(code, {
    lang: lang || undefined,
    theme: 'Supabase Theme',
  })

  return (
    <div
      className={cn(
        'shiki',
        'group',
        'relative',
        'not-prose',
        'w-full overflow-x-auto',
        'border border-default rounded-lg',
        'bg-200',
        'text-sm',
        className
      )}
    >
      <pre>
        <code className={lineNumbers ? 'grid grid-cols-[auto_1fr]' : ''}>
          {lineNumbers ? (
            <>
              {tokens.map((line, idx) => (
                <Fragment key={idx}>
                  <div
                    className={cn(
                      'select-none text-right text-muted bg-control px-2 min-h-5 leading-5',
                      idx === 0 && 'pt-6',
                      idx === tokens.length - 1 && 'pb-6'
                    )}
                  >
                    {idx + 1}
                  </div>
                  <div
                    className={cn(
                      'code-content min-h-5 leading-5 pl-6 pr-6',
                      idx === 0 && 'pt-6',
                      idx === tokens.length - 1 && 'pb-6'
                    )}
                  >
                    <CodeLine tokens={line} twoslash={twoslashed?.get(idx)} />
                  </div>
                </Fragment>
              ))}
            </>
          ) : (
            <div className="code-content p-6">
              {tokens.map((line, idx) => (
                <CodeLine key={idx} tokens={line} twoslash={twoslashed?.get(idx)} />
              ))}
            </div>
          )}
        </code>
      </pre>
      <CodeBlockControls content={code.trim()} />
    </div>
  )
}