Function HighCode

apps/web/components/code.tsx:54–148

({
  highlighted,
  className,
  style,
  extraHandlers = [],
}: {
  highlighted: HighlightedCode
  className?: string
  style?: React.CSSProperties
  extraHandlers?: AnnotationHandler[]
})

}

export function HighCode({
  highlighted,
  className,
  style,
  extraHandlers = [],
}: {
  highlighted: HighlightedCode
  className?: string
  style?: React.CSSProperties
  extraHandlers?: AnnotationHandler[]
}) {
  const { title, flags } = extractFlags(highlighted)
  const h = { ...highlighted, meta: title }

  const handlers = [
    ...extraHandlers,
    mark,
    tooltip,
    pill,
    fold,
    link,
    focus,
    ruler,
    flags.includes("a") && tokenTransitions,
    flags.includes("n") && lineNumbers,
    diff,
    ...collapse,
    flags.includes("w") && wordWrap,
    callout,
  ].filter(Boolean) as AnnotationHandler[]

  const pre = (
    <Pre
      code={h}
      className="m-0 py-2 px-0 bg-editor-background rounded-none group flex-1 selection:bg-editor-selectionBackground"
      handlers={handlers}
      style={{
        backgroundColor: "var(--bg-color)",
      }}
    />
  )

  if (title) {
    return (
      <div
        className={cn(
          "border border-editorGroup-border rounded overflow-hidden my-2",
          className,
        )}
        style={
          {
            "--border-color": "var(--ch-23)",
            borderColor: "var(--border-color)",
            ...style,
          } as any
        }
      >
        <div