Callout

Add callouts inside your code blocks.

content.md

```js
const lorem = ipsum(dolor, sit)
// !callout[/amet/] This is a callout
const [amet, consectetur] = [0, 0]
lorem.adipiscing((sed, elit) => {
  if (sed) {
    amet += elit
  }
})
```

const lorem = ipsum(dolor, sit)
const [amet, consectetur] = [0, 0]
This is a callout
lorem.adipiscing((sed, elit) => {
  if (sed) {
    amet += elit
  }
})

Implementation

code.tsx

1
import { InlineAnnotation, AnnotationHandler } from "codehike/code"
2

3
const callout: AnnotationHandler = {
4
  name: "callout",
5
  transform: (annotation: InlineAnnotation) => {
We need to transform the annotations from InlineAnnotation to BlockAnnotation
6
    const { name, query, lineNumber, fromColumn, toColumn, data } = annotation
7
    return {
8
      name,
9
      query,
10
      fromLineNumber: lineNumber,
11
      toLineNumber: lineNumber,
12
      data: { ...data, column: (fromColumn + toColumn) / 2 },
This will be the position of the arrow in the callout
13
    }
14
  },
15
  Block: ({ annotation, children }) => {
16
    const { column } = annotation.data
17
    return (
18
      <>
19
        {children}
20
        <div
21
          style={{ minWidth: `${column + 4}ch` }}
22
          className=""
23
        >
24
          <div
25
            style={{ left: `${column}ch` }}
26
            className=""
27
          />
28
          {annotation.query}
29
        </div>
30
      </>
31
    )
32
  },
33
}

Then pass the callout handler to the Pre component:

code.tsx

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

Make it better

Some ways to improve the callout annotation:

add different annotations with different styles (like Warning, Error, Info, etc)
add an option to show the callout either before or after the line
put markdown inside the callout (see the tooltip example)