CodeBlock

Renders a pre element with syntax highlighting, type information, and type checking.

Style Overrides

The CodeBlock component can be styled using the, css, className, and style props to target specific descendant components.

import {
  type CodeBlockProps,
  CodeBlock as BaseCodeBlock,
  Tokens,
} from 'renoun/components'
import styles from './CodeBlock.module.css'

export function CodeBlock(props: CodeBlockProps) {
  return (
    <BaseCodeBlock
      {...props}
      css={{
        // Clear the default styles
        container: {
          boxShadow: undefined,
          borderRadius: undefined,
        },
        ...props.css,
      }}
      className={{
        container: styles.container,
        token: styles.token,
        ...props.className,
      }}
    />
  )
}

Component Overrides

If you need more customization, the CodeBlock component can be fully overridden by importing it from renoun/components and extending it:

import {
  type CodeBlockProps,
  CodeBlock as BaseCodeBlock,
  Tokens,
} from 'renoun/components'

export function CodeBlock(props: CodeBlockProps) {
  return (
    <BaseCodeBlock {...props}>
      <pre
        style={{
          whiteSpace: 'pre',
          wordWrap: 'break-word',
          overflow: 'auto',
        }}
      >
        <Tokens />
      </pre>
    </BaseCodeBlock>
  )
}

Formatting

The CodeBlock source text is formatted using either the TypeScript compiler or using prettier if it is available to the workspace