Line Numbers

Display line numbers.

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : 1
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

1function lorem(ipsum, dolor = 1) {
2  const sit = ipsum == null ? 0 : 1
3  dolor = sit - amet(dolor)
4  return sit ? consectetur(ipsum) : []
5}

Implementation

Using a custom line component:

line-numbers.tsx

import { AnnotationHandler, InnerLine } from "codehike/code"

export const lineNumbers: AnnotationHandler = {
  name: "line-numbers",
  Line: (props) => {
    const width = props.totalLines.toString().length + 1
    return (
      <div className="">
        <span
          className=""
          style={{ minWidth: `${width}ch` }}
        >
          {props.lineNumber}
        </span>
        <InnerLine merge={props} className="" />
      </div>
    )
  },
}

Pass it to the handlers prop of the Pre component:

code.tsx

import { lineNumbers } from "./line-numbers"

async function Code({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-dark")
  return <Pre code={highlighted} handlers={[lineNumbers]} />
}