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'");

之後終於可以在預覽中顯示公式了.