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文件

  <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)这个函数修改成下面这样就可以了

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这个文件,找到这一段

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

将它修改成下面这样

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

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