Line Numbers - Code Blocks

Preview

Code Block with Prismjs and Line Numbers

export default function App() {
  return (
    <>
      <h1 id="title">
        Hello
        <span> world</span>
      </h1>
      <div style={styles.bar} />
    </>
  )
}

Preparing…

Usage

Component

Add the lineNumbers prop to the CodeBlockPrismjs component:

<CodeBlockPrismjs lineNumbers={true} language="tsx" code={code} />

Markdown/MDX

Add prismjs-line-numbers class to the PrePrismComponent:

<CodeBlockContent>
  <pre className="prism-pre prism-line-numbers">
    <code dangerouslySetInnerHTML={{ __html: codeHTML }} />
  </pre>
</CodeBlockContent>