Callout | DocsKit

Install

$ pnpm dlx shadcn@latest add https://docskit.codehike.org/r/callout?token=*****

Add the callout handler:

@/components/code.handlers.tsx

+
import { callout } from "./callout"

export function getHandlers(options: CodeGroup["options"]) {
  return [
    line,
+
    callout,
  ]
}

Add the WithNotes component so that it's available in your MDX files:

@/components/docskit.tsx

+
import { WithNotes } from "./notes"

export function addDocsKit(
  components: MDXComponents,
) {
  return {
    ...components,
    DocsKitCode,
+
    WithNotes,
  }
}

ExamplesTry them in the Playground

content.mdx

```js
// !callout[/lorem/] This is a callout
function lorem(ipsum) {
  return ipsum
}
```

preview

function lorem(ipsum) {
This is a callout
  return ipsum
}

Using markdown inside a callout:

content.mdx

<WithNotes>

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

## !foo

Hello world, **this is a callout**.

</WithNotes>

preview

function lorem(ipsum) {
Hello world, this is a callout.
  return ipsum
}

With code inside a callout:

content.mdx

<WithNotes>

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

```js !foo
function dolor(x) {
  return x * x
}
```

</WithNotes>

preview

function lorem(ipsum) {
  return dolor(ipsum)
function dolor(x) {
  return x * x
}
}

Code with title inside a callout:

content.mdx

<WithNotes>

```js index.js
function lorem(ipsum) {
  // !callout[/dolor/] foo
  return dolor(ipsum)
}
```

```js !foo math.js
function dolor(x) {
  return x * x
}
```

</WithNotes>

preview

index.js

function lorem(ipsum) {
  return dolor(ipsum)
math.js
function dolor(x) {
  return x * x
}
}