CodeBlock

Examples

• Basic

  View Source

  const beep = 'boop'

  import { CodeBlock } from 'renoun/components'
  
  export function Basic() {
    return <CodeBlock language="ts">const beep = 'boop'</CodeBlock>
  }

• Type Checking

  View Source

  const a = 1
  a + b

  import { CodeBlock } from 'renoun/components'
  
  export function TypeChecking() {
    return (
      <CodeBlock language="ts" allowCopy={false} allowErrors showErrors>
        const a = 1; a + b;
      </CodeBlock>
    )
  }

• Ordered

  View Source

  example.ts

  const a = 1

  example.ts

  const a = 1
  const b = 2

  import { CodeBlock } from 'renoun/components'
  
  export function Ordered() {
    return (
      <div style={{ display: 'grid', gap: '2rem' }}>
        <CodeBlock path="01.example.ts">const a = 1;</CodeBlock>
        <CodeBlock path="02.example.ts">const a = 1; const b = 2;</CodeBlock>
      </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

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

• Line Highlighting

  View Source

  line-highlight.ts

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

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

• Line Focusing

  View Source

  line-focus.ts

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

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

• 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

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

• Tokens Only

  View Source

  const a = 1
  const b = 2
  a + b

  import { Tokens } from 'renoun/components'
  
  export function TokensOnly() {
    return (
      <pre>
        <Tokens language="ts">{`const a = 1\nconst b = 2\na + b`}</Tokens>
      </pre>
    )
  }

• Custom Styles

  View Source

  ./counter/Counter.tsx

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  '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>
    )
  }

  import { CodeBlock, LineNumbers, Tokens, Toolbar } from 'renoun/components'
  import { dirname, join } from 'node:path'
  import { fileURLToPath } from 'node:url'
  import { readFile } from 'node:fs/promises'
  
  const directoryPath = dirname(fileURLToPath(import.meta.url))
  
  export async function CustomStyles() {
    const code = await readFile(
      join(directoryPath, './counter/Counter.tsx'),
      'utf-8'
    )
  
    return (
      <CodeBlock path="./counter/Counter.tsx" workingDirectory={directoryPath}>
        <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}</Tokens>
            </code>
          </pre>
        </div>
      </CodeBlock>
    )
  }

API Reference