为啥不支持原生的markmap呢比如公式格式之类的

maxchang3 commented 2 years ago

插件的逻辑是调用 markmap-lib 将所给出的 markdown 代码转换为可以被 markmap js 解析的 json 数据，插入到 html 标签后再前端进行解析。

const {Transformer} = require('markmap-lib')

let transfer = (markdown) => {
    const transformer = new Transformer(plugins=[]); // 这里将插件设置为空，从而取消了对公式一类的支持
    const { root, features } = transformer.transform(markdown);
    let dataset = {
        svgjson: `${JSON.stringify(root)}`,
    }
    return dataset
}

但是实际测试发现，例如我们测试一个带有公式的 markdown 代码：

- 123
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

他会返回：

{
  svgjson: `{"t":"root","d":0,"v":"","c":[{"t":"list_item","d":2,"p":{"lines":[0,1]},"v":"1234"},{"t":"list_item","d":2,"p":{"lines":[1,2]},"v":"Katex - <span class=\\"katex\\"><span class=\\"katex-mathml\\"><math xmlns=\\"http://www.w3.org/1998/Math/MathML\\"><semantics><mrow><mi>x</mi><mo>=</mo><mfrac><mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mi>a</mi><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></mrow><annotation encoding=\\"application/x-tex\\">x = {-b \\\\pm \\\\sqrt{b^2-4ac} \\\\over 2a}</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.43056em;vertical-align:0em;\\"></span><span class=\\"mord mathnormal\\">x</span><span class=\\"mspace\\" style=\\"margin-right:0.2777777777777778em;\\"></span><span class=\\"mrel\\">=</span><span class=\\"mspace\\" style=\\"margin-right:0.2777777777777778em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:1.384482em;vertical-align:-0.345em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\"><span class=\\"mopen nulldelimiter\\"></span><span class=\\"mfrac\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:1.039482em;\\"><span style=\\"top:-2.6550000000000002em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\"><span class=\\"mord mtight\\">2</span><span class=\\"mord mathnormal mtight\\">a</span></span></span></span><span style=\\"top:-3.23em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"frac-line\\" style=\\"border-bottom-width:0.04em;\\"></span></span><span style=\\"top:-3.3939999999999997em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\"><span class=\\"mord mtight\\">−</span><span class=\\"mord mathnormal mtight\\">b</span><span class=\\"mbin mtight\\">±</span><span class=\\"mord sqrt mtight\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.9221171428571429em;\\"><span class=\\"svg-align\\" style=\\"top:-3em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord mtight\\" style=\\"padding-left:0.833em;\\"><span class=\\"mord mtight\\"><span class=\\"mord mathnormal mtight\\">b</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.7463142857142857em;\\"><span style=\\"top:-2.786em;margin-right:0.07142857142857144em;\\"><span class=\\"pstrut\\" style=\\"height:2.5em;\\"></span><span class=\\"sizing reset-size3 size1 mtight\\"><span class=\\"mord mtight\\">2</span></span></span></span></span></span></span></span><span class=\\"mbin mtight\\">−</span><span class=\\"mord mtight\\">4</span><span class=\\"mord mathnormal mtight\\">a</span><span class=\\"mord mathnormal mtight\\">c</span></span></span><span style=\\"top:-2.882117142857143em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"hide-tail mtight\\" style=\\"min-width:0.853em;height:1.08em;\\"><svg width='400em' height='1.08em' viewBox='0 0 400000 1080' preserveAspectRatio='xMinYMin slice'><path d='M95,702\\nc-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14\\nc0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54\\nc44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10\\ns173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429\\nc69,-144,104.5,-217.7,106.5,-221\\nl0 -0\\nc5.3,-9.3,12,-14,20,-14\\nH400000v40H845.2724\\ns-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7\\nc-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z\\nM834 80h400000v40h-400000z'/></svg></span></span></span><span class=\\"vlist-s\\"></span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.11788285714285718em;\\"><span></span></span></span></span></span></span></span></span></span><span class=\\"vlist-s\\"></span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.345em;\\"><span></span></span></span></span></span><span class=\\"mclose nulldelimiter\\"></span></span></span></span></span></span>"}],"p":{}}`
}

但是返回的该段 json 由于内部混合了 HTML 代码的原因，实际上解析的时候会发生错误。我尝试通过修改转义、再次转义还有一些办法仍为结局。

其次是，如果可以正常解析的情况下，插件的逻辑也存在一些问题。例如我们输入：

- [123](http://baidu.com)

返回：

{"t":"list_item","d":2,"p":{"lines":[0,1]},"v":"<a href=\\"http://baidu.com\\">123</a>"}

但是由于插入到 html 标签中，他的一部分直接被作为 html 标签解析，于是也无法被作为 JSON 正常解析。

这和插件逻辑有些关系，我前一阵子没找到合适的解决办法。

如果你有思路的话欢迎 PR ！

maxchang3 commented 2 years ago

核心问题是 markmap 将组件分为了 markmap-view 和 markmap-lib 两个组件，而 markmap-view 与浏览器 API 绑定到了一起。这个时候要么全部放到前端实现，即只把该插件作为一个拼接代码的东西，全部丢到前端去解析和渲染。要么就尝试去除或模拟浏览器API （linkedom、jsdom之类的）另外 markmap-cli 是直接渲染出 html。我最近会再研究下。

maxchang3 commented 2 years ago

1/08/21 有安全隐患暂时删除了

https://github.com/MaxChang3/hexo-markmap/tree/dev 我尝试做了一个 dev。大概原理是把 markmap 解析出来的 object 转为 string，然后放到每一个div下面，用 eval 取回后渲染出来。。感觉这样写好奇怪，但是倒是支持那些了。。我暂时观望一下

maxchang3 commented 2 years ago

已经由 @ETFTS 修复这个问题！(https://github.com/MaxChang3/hexo-markmap/pull/4) 明天我会发布 npm包。

thanks to @ETFTS (https://github.com/MaxChang3/hexo-markmap/pull/4) , this problem has been solved. I will push a new npm package next day.

maxchang3 / hexo-markmap