vim-instant-markdown显示mathjax公式

问题背景:

今天在用vim写markdown,装了vim-instant-markdown预览,但是我发现它不能显示MathJax的公式,于是开始了找原因的旅程


首先要确认该插件是否支持显示mathjax的公式,于是我去了该插件的github主页,发现它是支持的,只需要在.vimrc
里加上let g:instant_markdown_mathjax = 1就行了.但是我加了之后还是不显示.

然后在Issures里发现了解决这个问题的办法Issures.
Issures里的描述如下:
首先编辑该目录/usr/local/lib/node_modules/instant-markdown-d/里的index.html文件,在标签之间引入mathjax的js文件

1
2
3
4
5
6
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

这之后你就可以在第一次预览markdonw文件的时候看到公式的加载,但是一旦编辑就又会返回原样
然后继续编辑该文件,找到socket.on('newContent', function(newHTML)这个函数修改成下面这样就可以了

1
2
3
4
socket.on('newContent', function(newHTML) {
document.querySelector(".markdown-body").innerHTML = newHTML;
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});

在我按这些操作做过之后发现还是预览不了公式,我在预览页面打开f12发现它报错是:
Refused to load the script 'http://xxxxx' because it violates the following Content Security Policy directive: "script-src localhost:8090 'unsafe-inline'"
查找资料后发现是web的一个叫csp的内容安全策略没有允许加载站外脚本,然后我就在index.html的里加
<meta http-equiv="Content-Security-Policy" content="script-src 'self' http://localhost:8090 https://* 'unsafe-inline' 'unsafe-eval'">
试图更改csp策略,发现报错还是同样的,困扰了许久,最后发现csp有两种定义方式,在http头中定义和用<meta>标签定义并且http头中定义的优先级高,我一看预览页面的http头部信息果然找到了报错中的定义,
接下来就是怎么修改了,还是index.html那个目录,这次修改instant-markdown-d这个文件,找到这一段

1
csp.push('script-src ' + CSP_SELF + " 'unsafe-inline' ");

将它修改成下面这样

1
csp.push('script-src ' + CSP_SELF + " https://* 'unsafe-inline' 'unsafe-eval'");

之后终于可以在预览中显示公式了.

本文标题:vim-instant-markdown显示mathjax公式

文章作者:

发布时间:2019年09月25日 - 19:09

最后更新:2019年09月25日 - 21:09

原始链接:http://startcraft.cn/post/632551b6.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------The End-------------