Footnotes

Append footnotes to your code.

content.md

```rb
# !ref Library import
require 'sinatra'

# !ref URL mapping
get '/hi' do
  "Hello World!"
end
```

require 'sinatra'

get '/hi' do
  "Hello World!"
end

Library import
URL mapping

Implementation

code.tsx

import {
  RawCode,
  Pre,
  highlight,
  AnnotationHandler,
  InnerLine,
} from "codehike/code"

async function Code({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-dark")

  const noteAnnotations = highlighted.annotations.filter(
    ({ name }) => name == "ref",
  )
  const notes = noteAnnotations.map(({ query }) => query)

  noteAnnotations.forEach((a, index) => {
    a.data = { n: index + 1 }
  })
  return (
    <div>
      <Pre
        className=""
        code={highlighted}
        handlers={[footnotes]}
      />
      <ul className="">
        {notes.map((ref, index) => (
          <li key={index} className="">
            <Number n={index + 1} />
            <span className="">{ref}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

const footnotes: AnnotationHandler = {
  name: "ref",
  AnnotatedLine: ({ annotation, ...props }) => {
    return (
      <div className="">
        <InnerLine merge={props} />
        <Number n={annotation.data.n} />
      </div>
    )
  },
}

function Number({ n }: { n: number }) {
  return (
    <span
      data-value={n}
      className=""
    />
  )
}