| 1 | import { createElement, FunctionComponent } from 'react' |
| 2 | import RemarkReact, { Options } from 'remark-react' |
| 3 | import { sanitize } from './sanitize' |
| 4 | import { MarpSlides } from 'components/Marp' |
| 5 | import { Anchor } from 'components/markdown/Anchor' |
| 6 | import * as Heading from 'components/markdown/Heading' |
| 7 | import { Image } from 'components/markdown/Image' |
| 8 | import { Pre, toHastCodeHandler } from 'components/markdown/Pre' |
| 9 | |
| 10 | const remarkReactComponents: Record<string, FunctionComponent<any>> = { |
| 11 | a: Anchor, |
| 12 | h1: Heading.H1, |
| 13 | h2: Heading.H2, |
| 14 | h3: Heading.H3, |
| 15 | h4: Heading.H4, |
| 16 | h5: Heading.H5, |
| 17 | h6: Heading.H6, |
| 18 | 'marp-slides': MarpSlides, |
| 19 | pre: Pre, |
| 20 | img: Image, |
| 21 | } |
| 22 | |
| 23 | export const { Compiler: renderer } = new RemarkReact({ |
| 24 | createElement: createElement as Options['createElement'], |
| 25 | remarkReactComponents, |
| 26 | sanitize, |
| 27 | toHast: { handlers: { code: toHastCodeHandler } }, |
| 28 | }) |
| 29 |