Open yhatt opened 5 years ago
The other idea is using JSX in interpolation of tagged template literal to allow using components in local scope. It won't require explicit component passing.
import { Marp, jsx } from '@marp-team/marp-react'
import { BarChart, Bar } from 'someone-react-chart-component'
// Returns something with interpolated components for parsing in Marp component
const markdown = jsx`
# Bar chart
${(
<BarChart title="Example bar chart">
<Bar value="5" />
<Bar value="8" />
<Bar value="4" />
<Bar value="9" />
<Bar value="7" />
<Bar value="2" />
<Bar value="6" />
</BarChart>
)}
`
// Usage of Marp component is same as Markdown by plain string
ReactDOM.render(
<Marp markdown={markdown} />,
document.getElementById('app')
)
By custom function binding in HTM, we might support React component written in HTML block of plain Markdown.
:warning: It is different from MDX. Marp React is a runtime component to support for live rendering, but MDX has no runtime (Actually it is there but not recommended). There are difference to each Markdown architectures too (markdown-it vs remark), and using Marp parser in MDX would be difficult. Thus, we have no idea to support MDX for now.