手写一个React的markdown组件

前言

最近需要一个React的markdown组件，类似于CSDN的写博客时候的，在网上也找到了很多现成的，但是很多功能需要定制化，
所以选择了看教程自己造一个轮子出来。

UI设计

markdown的样式，也是与网上现成的差不多，主要是仿照了CSDN的markdown编辑器。markdown左边使用的是textarea，右边展示区使用的则是div。
下面是本文在我的markdown中的效果。

词法解析

实现md格式的解析使用的是marked库，代码部分的高亮使用的是highlight库，具体的配置如下：

useEffect(() => {
   
        // 配置highlight
        hljs.configure({
   
            tabReplace: '',
            classPrefix: 'hljs-',
            languages: ['CSS', 'HTML', 'JavaScript', 'Python', 'TypeScript', 'Markdown'],
        });
        // 配置marked
        marked.setOptions({
   
            renderer: new marked.Renderer(),
            highlight: code => hljs.highlightAuto(code).value,
            gfm: true, //默认为true。 允许 Git Hub标准的markdown.
            tables: true, //默认为true。 允许支持表格语法。该选项要求 gfm 为true。
            breaks: true, //默认为false。 允许回车换行。该选项要求 gfm 为true。
        });
    }, []);

用usestate钩子保存编辑区的内容，然后进行解析，并渲染到展示区

const [text, setText] = useState('');  // 编辑区内容
const [showText, setShowText] = useState('');  // 展示区内容

useEffect(() => {
   
    setShowText(marked(text).replace(/<pre>/g, "<pre id='hljs'>")); // 实时解析
}, [text])

<div>
dangerouslySetInnerHTML={
   {
   
   __html: showText, // 渲染内容
}}
</div>

这样下来，渲染工作就做好啦

上方按钮点击功能

以CSDN为例，如何实现上方按钮的功能呢