ClassName

Add a class name to a piece of code.

content.md

```js
function lorem(ipsum, dolor = 1) {
  // !className line-through
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !className[/sit/] bg-red-700 rounded-lg px-1
  return sit ? consectetur(ipsum) : []
}
```

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

Implementation

classname.tsx

import { AnnotationHandler } from "codehike/code"

export const className: AnnotationHandler = {
  name: "className",
  Block: ({ annotation, children }) => (
    <div className={annotation.query}>{children}</div>
  ),
  Inline: ({ annotation, children }) => (
    <span className={annotation.query}>{children}</span>
  ),
}

And then add the handler to your Code component:

code.tsx

import { RawCode, Pre, highlight } from "codehike/code"
import { className } from "./classname"

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