Mark

Highlight lines.

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  // !mark(1:2)
  dolor = sit - amet(dolor)
  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

We could do this in a few ways. One way is to have two components, one for marked lines and one for lines that are not marked.

code.tsx

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

const mark: AnnotationHandler = {
  name: "mark",
  AnnotatedLine: ({ annotation, ...props }) => (
    <InnerLine merge={props} data-mark={true} />
  ),
  Line: (props) => (
    <InnerLine
      merge={props}
      className=""
    />
  ),
}

To use it, pass it to the handlers prop of the Pre component.

code.tsx

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

Make it better

Some ideas to improve the mark annotation:

Add a handler for inline marks
Mix it with the Focus annotation