cloudflare/vinext
Publicmirrored fromhttps://github.com/cloudflare/vinextAvailable
examples/nextra-docs-template/mdx-components.tsx
39lines · modecode
| 1 | import type { MDXComponents } from "mdx/types"; |
| 2 | import Link from "next/link"; |
| 3 | |
| 4 | export function useMDXComponents(components: MDXComponents): MDXComponents { |
| 5 | return { |
| 6 | ...components, |
| 7 | a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => { |
| 8 | const href = props.href; |
| 9 | if (href && href.startsWith("/")) { |
| 10 | return <Link {...props} href={href} />; |
| 11 | } |
| 12 | return <a target="_blank" rel="noopener noreferrer" {...props} />; |
| 13 | }, |
| 14 | code: (props: React.HTMLAttributes<HTMLElement>) => ( |
| 15 | <code |
| 16 | style={{ |
| 17 | backgroundColor: "var(--code-bg)", |
| 18 | padding: "0.15em 0.35em", |
| 19 | borderRadius: "4px", |
| 20 | fontSize: "0.9em", |
| 21 | }} |
| 22 | {...props} |
| 23 | /> |
| 24 | ), |
| 25 | pre: (props: React.HTMLAttributes<HTMLPreElement>) => ( |
| 26 | <pre |
| 27 | style={{ |
| 28 | backgroundColor: "var(--code-bg)", |
| 29 | padding: "1rem", |
| 30 | borderRadius: "8px", |
| 31 | overflow: "auto", |
| 32 | fontSize: "0.875rem", |
| 33 | lineHeight: 1.7, |
| 34 | }} |
| 35 | {...props} |
| 36 | /> |
| 37 | ), |
| 38 | }; |
| 39 | } |
| 40 | |