Mark

Highlight lines.

content.md

```js
function lorem(ipsum, dolor = 1) {
  // !mark
  return dolor
}

function ipsum(lorem, dolor = 1) {
  // !mark(1:2) gold
  const sit = lorem == null ? 0 : lorem.sit
  dolor = sit - amet(dolor)
  // !mark[/sit/] pink
  return sit ? consectetur(lorem) : []
}
```

function lorem(ipsum, dolor = 1) {
  return dolor
}

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

Implementation

For the block annotations: implement the Line component, and for the inline annotations: implement the Inline component. Use the annotation.query as an optional color for the mark.

code.tsx

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

const mark: AnnotationHandler = {
  name: "mark",
  Line: ({ annotation, ...props }) => {
    const color = annotation?.query || "rgb(14 165 233)"
    return (
      <div
        className=""
        style={{
          borderLeft: "solid 2px transparent",
          borderLeftColor: annotation && color,
          backgroundColor: annotation && `rgb(from ${color} r g b / 0.1)`,
        }}
      >
        <InnerLine merge={props} className="" />
      </div>
    )
  },
  Inline: ({ annotation, children }) => {
    const color = annotation?.query || "rgb(14 165 233)"
    return (
      <span
        className=""
        style={{
          outline: `solid 1px rgb(from ${color} r g b / 0.5)`,
          background: `rgb(from ${color} r g b / 0.13)`,
        }}
      >
        {children}
      </span>
    )
  },
}

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:

Mix it with the Focus annotation