55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import 'chart.js/auto'
|
|
import {MermaidDiagram} from '@lightenna/react-mermaid-diagram'
|
|
import EChartsReact from 'echarts-for-react'
|
|
import {Chart} from 'react-chartjs-2'
|
|
import Markdown from 'react-markdown'
|
|
import remarkGfm from 'remark-gfm'
|
|
import {trim} from 'es-toolkit'
|
|
|
|
type MarkdownOptions = {
|
|
content: string
|
|
}
|
|
|
|
function MarkdownRender(options: MarkdownOptions) {
|
|
return (
|
|
<Markdown
|
|
remarkPlugins={[
|
|
remarkGfm,
|
|
]}
|
|
children={options.content}
|
|
components={{
|
|
code: ({children, className, node, ...rest}) => {
|
|
switch (trim(className || '')) {
|
|
case 'language-mermaid':
|
|
return (
|
|
<MermaidDiagram
|
|
children={children as string}
|
|
/>
|
|
)
|
|
case 'language-chartjs':
|
|
let chartjsData = eval(`(${children as string})`)
|
|
return (
|
|
<Chart
|
|
{...chartjsData}
|
|
/>
|
|
)
|
|
case 'language-echart':
|
|
let echartData = eval(`(${children as string})`)
|
|
return (
|
|
<EChartsReact option={echartData}/>
|
|
)
|
|
default:
|
|
return (
|
|
<code {...rest} className={className}>
|
|
{children}
|
|
</code>
|
|
)
|
|
}
|
|
},
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default MarkdownRender
|