Overview

DocsKit uses Code Hike to turn MDX into rich, interactive UIs.

Here's a quick overview of Code Hike features and how it works with DocsKit:

Anatomy of a codeblock

content.mdx

```js index.js -cn
function lorem(ipsum) {
  // !mark[/ipsum/] red
  return ipsum
}
```

content.mdx

<WithNotes>

```js
function lorem(ipsum) {
  // !tooltip[/ipsum/] foo
  return ipsum
}
```

## !foo bar

This is a **note**.

</WithNotes>

You can pass Markdown blocks to components as props.

In this example, the <WithNotes /> component receives:

props = {
  children: ...,
  foo: {
    title: "bar",
    children: <p>This is a <b>note</b></p>
  }
}

Learn more in the Code Hike docs.

DocsKit ships with GitHub Light and Dark by default.

All colors are exposed as CSS custom properties.

Use the Theme Editor to customize colors or add new themes.

After installing, treat these components as a starting point: extend them to your needs or use them as references for your own annotations and UI.