01月31, 2018

markdown转react组件(2)

去年写了一篇文章:markdown转react组件,这次算是一些补充吧。

先说个事,没想到会有人抄我(小翼)的文章,还不给加个原文链接,真TM不要脸,而且抄了不止一篇。。

这不禁让我想到在大学时,我写了三年的生活博文,结果被一个人抄袭,搞的我最后都没有啥兴趣写了。真是蛋疼。

那个在上篇文章中,其实我犯了一个错误,antd的sites目录里面的代码是用js写的,并不是ts。

不过按这个套路来写,确实很蛋疼,强加了很多插件包给你,而事实上我的要求仅仅是将md文件中的react变成一个效果而已。

在google的时候,发现一个loader:markdown-it-react-loader,试了一下,确实好用。(ps:它的github里面有一个链接,打开是报错的,需要自己克隆项目,然后运行)

来简单读一下它写的代码

alt

将markdown的内容先转化成html,再变成jsx的字符串。(需要注意的代码中并没有处理style)

比如你在markdown中写了如下代码:

<span style="color: red;">测试文字</span>

这个是会有问题的,所以其实这里可以考虑使用html2jsx的一些库之类的(不过markdown的东西尽量还是不要写style的比较好)

随后是将上面转换后的字符串丢到一个方法里面,这个方法是会生成一个react组件的字符串。

alt

这里还有一个关键是jsx的字符串:

md.use(mdContainer, 'demo', {
        validate: function (params) {
            return params.trim().match(/^demo\s*(.*)$/);
        },
        render: function (tokens, idx) {
            // container 从开头到结尾把之间的token跑一遍,其中idx定位到具体的位置

            // 获取描述
            const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);

            // 有此标记代表 ::: 开始
            if (tokens[idx].nesting === 1) {
                flag = idx;

                let jsx = '', i = 1;

                // 从 ::: 下一个token开始
                let token = tokens[idx + i];

                // 如果没有到结尾
                while (token.markup !== ':::') {
                    // 只认```,其他忽略
                    if (token.markup === '```') {
                        if (token.info === 'js') {
                            // 插入到import后,component前
                            moduleJS.push(token.content);
                        } else if (token.info === 'jsx') {
                            // 插入render内
                            jsx = token.content;
                        }
                    }
                    i++;
                    token = tokens[idx + i]
                }

                // 描述也执行md
                return formatOpening(jsx, md.render(m[1]), flag);
            }
            return formatClosing(flag);
        }
    });

它这个是针对下图中的markdown代码的处理:

alt

以及像这样的:

alt

formatOpening和formatCloseing是两个无状态的函数。

alt

最终呈现的效果截图如下:

alt

点击小箭头:

alt

结语

有了这个,剩下的要做doc路由什么的,自己就可以轻松搞定了。

无非是多写几个md文件,然后生成组件即可。

这个和之前的bisheng相比,算是多了一种选择吧。

本文链接:www.my-fe.pub/post/markdown-to-react-component-2.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。