Line Numbers - Code Blocks

Preview

Code Block + Sugar High

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 CodeBlockSugarHigh component:

Code Block with Line Numbers

<CodeBlockSugarHigh lineNumbers={true} code={code} />

Markdown/MDX

Add sh-line-numbers class to the PreSugarHighComponent:

.tsx

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