Hover | DocsKit

Install

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

Add the hover handler:

@/components/code.handlers.tsx

+
import { hover } from "./hover"

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

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

@/components/docskit.tsx

+
import { HoverLink, WithHover } from "./hover"

export function addDocsKit(
  components: MDXComponents,
) {
  return {
    ...components,
    DocsKitCode,
+
    WithHover,
    a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+
      if (props.href?.startsWith("hover:")) {
+
        return <HoverLink {...props} />
+
      }
      return React.createElement(components?.a || "a", props)
    },
  }
}

ExamplesTry them in the Playground

content.mdx

<WithHover>

Is [pink](hover:item) in the list?

```py
# !hover[/pink/gm] item
L = ['red', 'pink', 'blue']
if 'pink' in L:
    print('yes')
else:
    print('no')
```

</WithHover>

preview

Is pink in the list?

L = ['red', 'pink', 'blue']
if 'pink' in L:
    print('yes')
else:
    print('no')

Also works with lines:

content.mdx

<WithHover>

```sql
-- !hover(3:4) clause
SELECT *
FROM People
WHERE Age >= 18
  AND Age < 65;
```

Something about the [where clause](hover:clause).

</WithHover>

preview

SELECT *
FROM People
WHERE Age >= 18
  AND Age < 65;

Something about the where clause.