Markdown Renderer
Utilizes mdx.js
Render to HTML
import { Button } from '@mantine/core';
import { ReactMarkdownRenderer } from '@kenthackenough/mdx/render';
import * as runtime from 'react/jsx-runtime';
const mdx = new ReactMarkdownRenderer({
runtime, // JSX Runtime
styles: [
`.red { color: red }`,
`.blue { color: blue }`,
],
components: {
Button,
}
})
const output: string = await mdx.render(`
# Hi there!
<span class="blue">yeyeye!</span>
<Button class="red">click me!</Button>
`);This outputs the following HTML into the output varaible above.
<html>
<head></head>
<body>
<h1>Hi there!</h1>
<span style="color:blue">yeyeye!</span>
<button type="button" data-button="true" style="color:red">
<div><span>click me!</span></div>
</button>
</body>
</html>Compile to a React Element
import { Button } from '@mantine/core';
import { ReactMarkdownCompiler } from '@kenthackenough/mdx/compile';
import * as runtime from 'react/jsx-runtime';
const mdx = new ReactMarkdownCompiler({
runtime, // JSX Runtime
components: {
Button,
}
})
const output: JSX.Element = await mdx.compile(`
# Hi there!
<Button>click me!</Button>
`);
function SomeComponent() {
return <div>
{output}
</div>
}Note
ReactMarkdownRenderer inherits from ReactMarkdownCompiler, including additional helper functions to apply styles and properly serialize the react component into static markup.
Although ReactMarkdownRenderer can do everything ReactMarkdownCompiler can, it relies on additional libraries. It is not recommended to use the Renderer if you have access to React rendering elsewhere in the application.
- For example, the
Compilershould be used in Next.js because you can have Next.js render the component for you, so you need not import the necessary libraries to render React.