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:

CodeBlock.tsx

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

Examples

Basic

View Source

./counter/useCounter.ts

'use client'
import { useState } from 'react'

export function useCounter(initialValue: number = 0) {
  const [count, setCount] = useState(initialValue)
  return {
    count,
    increment: () => setCount(count + 1),
    decrement: () => setCount(count - 1),
  }
}

export function Basic() {
  return (
    <CodeBlock
      source="./counter/useCounter.ts"
      workingDirectory={import.meta.url}
    />
  )
}

Type Checking

View Source

const a = 1
a + b

export function TypeChecking() {
  return (
    <CodeBlock
      value={`const a = 1; a + b;`}
      language="ts"
      allowCopy={false}
      allowErrors
      showErrors
    />
  )
}

Ordered

View Source

example.ts

const a = 1

example.ts

const a = 1
const b = 2

export function Ordered() {
  return (
    <div style={{ display: 'grid', gap: '2rem' }}>
      <CodeBlock filename="01.example.ts" value="const a = 1;" />
      <CodeBlock filename="02.example.ts" value="const a = 1; const b = 2;" />
    </div>
  )
}

Line Numbering

View Source

line-numbers.ts

1
2
3
4
5
const a = 1
const b = 2

const add = a + b
const subtract = a - b

export function LineNumbering() {
  return (
    <CodeBlock
      filename="line-numbers.ts"
      value={`const a = 1;\nconst b = 2;\n\nconst add = a + b\nconst subtract = a - b`}
      showLineNumbers
      highlightedLines="4"
    />
  )
}

Line Highlighting

View Source

line-highlight.ts

const a = 1
const b = 2

const add = a + b
const subtract = a - b

export function LineHighlighting() {
  return (
    <CodeBlock
      filename="line-highlight.ts"
      value={`const a = 1;\nconst b = 2;\n\nconst add = a + b\nconst subtract = a - b`}
      highlightedLines="2, 4"
    />
  )
}

Line Focusing

View Source

line-focus.ts

const a = 1
const b = 2

const add = a + b
const subtract = a - b

export function LineFocusing() {
  return (
    <CodeBlock
      filename="line-focus.ts"
      value={`const a = 1;\nconst b = 2;\n\nconst add = a + b\nconst subtract = a - b`}
      focusedLines="2, 4"
    />
  )
}

Line Highlight and Focus

View Source

line-highlight-and-focus.ts

const a = 1
const b = 2

const add = a + b
const subtract = a - b

export function LineHighlightAndFocus() {
  return (
    <CodeBlock
      filename="line-highlight-and-focus.ts"
      value={`const a = 1;\nconst b = 2;\n\nconst add = a + b\nconst subtract = a - b`}
      highlightedLines="2, 4"
      focusedLines="2, 4"
    />
  )
}

Custom Styles

View Source

toolbar.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'use client'
import React from 'react'
import { useCounter } from './useCounter.js'

export default function Counter({ initialCount }: { initialCount: number }) {
  const { count, decrement, increment } = useCounter(initialCount)
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

export function CustomStyles() {
  return (
    <CodeBlock
      allowErrors="2307"
      filename="toolbar.tsx"
      source="./counter/Counter.tsx"
      workingDirectory={import.meta.url}
    >
      <div
        style={{
          fontSize: '1rem',
          borderRadius: '0.25rem',
          boxShadow: '0 0 0 1px var(--color-separator)',
        }}
      >
        <Toolbar
          allowCopy
          css={{
            padding: '0.5lh',
            boxShadow: 'inset 0 -1px 0 0 var(--color-separator)',
          }}
        />
        <pre
          style={{
            display: 'grid',
            gridTemplateColumns: 'min-content max-content',
            padding: '0.5lh 0',
            lineHeight: 1.4,
            whiteSpace: 'pre',
            wordWrap: 'break-word',
            overflow: 'auto',
          }}
        >
          <LineNumbers
            css={{
              padding: '0 0.5lh',
              backgroundColor: 'var(--color-background)',
            }}
          />
          <code style={{ paddingRight: '0.5lh' }}>
            <Tokens />
          </code>
        </pre>
      </div>
    </CodeBlock>
  )
}

API Reference

CodeBlock

typeof CodeBlock

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

Parameters

CodeBlockProps

Returns

Element

BaseCodeBlockProps

BaseCodeBlockProps

Properties

filename

string | undefined

Name or path of the code block. Ordered filenames will be stripped from the name e.g. 01.index.tsx becomes index.tsx.

language

Languages | undefined

Language of the source code. When used with source, the file extension will be used by default.

highlightedLines

string | undefined

A string of comma separated lines and ranges to highlight e.g. '1, 3-5, 7'.

focusedLines

string | undefined

A string of comma separated lines and ranges to focus e.g. '6-8, 12'.

unfocusedLinesOpacity

number | undefined

Opacity of unfocused lines when using focusedLines.

allowCopy

boolean | undefined

Show or hide a button that copies the source code to the clipboard.

allowErrors

string | boolean | undefined

Whether or not to allow errors. Accepts a boolean or comma-separated list of allowed error codes.

showErrors

boolean | undefined

Show or hide error diagnostics.

showLineNumbers

boolean | undefined

Show or hide line numbers.

showToolbar

boolean | undefined

Show or hide the toolbar.

shouldFormat

boolean | undefined

Whether or not to format the source code using prettier if installed.

css

{ container?: CSSObject; toolbar?: CSSObject; lineNumbers?: CSSObject; token?: CSSObject; popover?: CSSObject; } | undefined

CSS styles to apply to code block elements.

className

{ container?: string; toolbar?: string; lineNumbers?: string; token?: string; popover?: string; } | undefined

Class names to apply to code block elements.

style

{ container?: React.CSSProperties; toolbar?: React.CSSProperties; lineNumbers?: React.CSSProperties; token?: React.CSSProperties; popover?: React.CSSProperties; } | undefined

Styles to apply to code block elements.

children

React.ReactNode

Overrides default rendering to allow full control over styles using CodeBlock components like Tokens, LineNumbers, and Toolbar.

CodeBlockProps

CodeBlockProps

Properties

value *

string

Source code to highlight.

BaseCodeBlockProps

Properties

source *

string

Path to the source file on disk to highlight.

workingDirectory

string | undefined

The working directory for the source.

BaseCodeBlockProps

Last updated 01/03/25