1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43import type { MDXComponents } from "renoun/mdx"
import { CodeBlock, CodeInline } from "renoun"
export function useMDXComponents() {
return {
h1: (props) => {
return <h1 level={1} {...props} />
},
h2: (props) => {
return (
<h2 level={2} {...props} className="mt-8 mb-4 text-2xl font-bold" />
)
},
h3: (props) => {
return (
<h3 level={3} {...props} className="mt-6 mb-3 text-xl font-semibold" />
)
},
ul: (props) => {
return <ul {...props} className="my-4 ml-6 list-disc" />
},
ol: (props) => {
return <ol {...props} className="my-4 ml-6 list-decimal" />
},
a: (props) => {
return (
<a
{...props}
className="text-primary underline transition-colors hover:text-primary/80"
/>
)
},
p: (props) => {
return <p {...props} className="my-4 leading-relaxed" />
},
// not working
//CodeBlock,
// Workaround to disable analysis in code blocks
CodeBlock: (props) => <CodeBlock {...props} shouldAnalyze={false} />,
CodeInline,
} satisfies MDXComponents
}