Link

Add links to code snippets.

content.md

```js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  // !link[/ipsum/] https://example.com
  return sit ? consectetur(ipsum) : []
}
```

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

ipsum is a link to example.com

Implementation

code.tsx

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

const link: AnnotationHandler = {
  name: "link",
  Inline: ({ annotation, children }) => {
    const { query } = annotation
    return <a href={query}>{children}</a>
  },
}

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

Autolinking

Instead of manually adding links to code snippets, you can use a regex to automatically link URLs.

content.md

```js
// !link[/"(http.*?)"/gm]
function lorem(ipsum, dolor = 1) {
  const links = [
    "https://codehike.org",
    "https://twitter.com/codehike_",
    "https://github.com/code-hike",
  ]
  return links
}
```

function lorem(ipsum, dolor = 1) {
  const links = [
    "https://codehike.org",
    "https://twitter.com/codehike_",
    "https://github.com/code-hike",
  ]
  return links
}