#vscode Visual Studio Codeのmarkdownでmathjaxを使えるようにするパッチ（仮）

!readme.md

Visual Studio Codeのmarkdownでmathjaxを使えるようにするパッチ（仮）

無保証

導入方法

• markdownWorker.js にパッチを当てる
  • Windowsでは./Microsoft VS Code/resources/app/out/vs/languages/markdown/common
  • パッチを当てる前に，js-beautifyで整形してください

patch -u markdownWorker.js mathjax.patch

サルでも分かるmathjax有効化の方法は
VisualStudioCodeで最速で俺流Markdown編集環境を構築する - Qiita#Tex形式の数式をちゃんと表示したい(PC中級者向け)
を参照してください

js-beautify 導入

node.js入っているなら

npm install js-beautify -g

version 1.6.2を使って検証しています

対応VSCode version

• 0.10.11
• 0.10.14-insider
• 0.10.15-insider
• 1.0.0
• 1.0.0-insider
• 1.0.1-insider
• 1.1.0-insider
• 1.1.1-insider

他は未検証。検証していないバージョンで使うときは

• patchでエラーがでないか
• patch後にpatchした周辺で変数名がおかしくなっていないか

を確認してください。

---

追伸

markdownWorker.jsで

sed -e 's/"Segoe WPC",/"Meiryo", "Segoe WPC",/'

すると，日本語表示がよくなります．

・・・と原作者は言っているけど、settings.jsonにmarkdown.stylesという項目があるから、適当にcss指定するのがいいと思います。

mathjax.patch

--- origin.js	Mon Apr 11 10:16:03 2016
+++ fixed.js	Mon Apr 11 10:36:22 2016
@@ -84,14 +84,15 @@
         if (l.message += "\nPlease report this to https://github.com/chjj/marked.", (t || marked.defaults).silent) return "<p>An error occured:</p><pre>" + escape(l.message + "", !0) + "</pre>";
         throw l
     }
 }
 var block = {
     newline: /^\n+/,
     code: /^( {4}[^\n]+\n*)+/,
+    mathjax: /^ *(\${2}) *([\s\S]+?)\s*\1 *(?:\n+|$)/,
     fences: noop,
     hr: /^( *[-*_]){3,} *(?:\n+|$)/,
     heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
     nptable: noop,
     lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
     blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
     list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
@@ -116,15 +117,20 @@
     for (var n, i, s, o, l, a, h, c, u, e = e.replace(/^ +$/gm, ""); e;)
         if ((s = this.rules.newline.exec(e)) && (e = e.substring(s[0].length), s[0].length > 1 && this.tokens.push({
                 type: "space"
             })), s = this.rules.code.exec(e)) e = e.substring(s[0].length), s = s[0].replace(/^ {4}/gm, ""), this.tokens.push({
             type: "code",
             text: this.options.pedantic ? s : s.replace(/\n+$/, "")
         });
-        else if (s = this.rules.fences.exec(e)) e = e.substring(s[0].length), this.tokens.push({
+        else if (s = this.rules.mathjax.exec(e)) e = e.substring(s[0].length), this.tokens.push({
+        type: "html",
+        pre: true,
+        text: t[0]
+    });
+    else if (s = this.rules.fences.exec(e)) e = e.substring(s[0].length), this.tokens.push({
         type: "code",
         lang: s[2],
         text: s[3]
     });
     else if (s = this.rules.heading.exec(e)) e = e.substring(s[0].length), this.tokens.push({
         type: "heading",
         depth: s[1].length,
@@ -200,17 +206,18 @@
     tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
     link: /^!?\[(inside)\]\(href\)/,
     reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
     nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
     strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
     em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
     code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
+    mathjax: /^(\${1,2})\s*([\s\S]*?[^\$])\s*\1(?!\$)/,
     br: /^ {2,}\n(?!\s*$)/,
     del: noop,
-    text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
+    text: /^[\s\S]+?(?=[\\<!\[_*`\$]| {2,}\n|$)/
 };
 inline._inside = /(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/, inline._href = /\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/, inline.link = replace(inline.link)("inside", inline._inside)("href", inline._href)(), inline.reflink = replace(inline.reflink)("inside", inline._inside)(), inline.normal = merge({}, inline), inline.pedantic = merge({}, inline.normal, {
     strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
     em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
 }), inline.gfm = merge({}, inline.normal, {
     escape: replace(inline.escape)("])", "~|])")(),
     url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
@@ -237,14 +244,15 @@
                 s += i[0].charAt(0), e = i[0].substring(1) + e;
                 continue
             }
             this.inLink = !0, s += this.outputLink(i, t), this.inLink = !1
         } else if (i = this.rules.strong.exec(e)) e = e.substring(i[0].length), s += this.renderer.strong(this.output(i[2] || i[1]));
         else if (i = this.rules.em.exec(e)) e = e.substring(i[0].length), s += this.renderer.em(this.output(i[2] || i[1]));
         else if (i = this.rules.code.exec(e)) e = e.substring(i[0].length), s += this.renderer.codespan(escape(i[2], !0));
+        else if (i = this.rules.mathjax.exec(e)) e = e.substring(i[0].length), s += i[0];
         else if (i = this.rules.br.exec(e)) e = e.substring(i[0].length), s += this.renderer.br();
         else if (i = this.rules.del.exec(e)) e = e.substring(i[0].length), s += this.renderer.del(this.output(i[1]));
         else if (i = this.rules.text.exec(e)) e = e.substring(i[0].length), s += escape(this.smartypants(i[0]));
         else if (e) throw new Error("Infinite loop on byte: " + e.charCodeAt(0))
     } else e = e.substring(i[0].length), r = escape(i[1]), n = r, s += this.renderer.link(n, null, r);
     return s
 }, InlineLexer.prototype.outputLink = function(e, t) {
@@ -527,18 +535,38 @@
                 };
             return new r.Promise(function(r, l) {
                 o.marked(s.getValue(), {
                     gfm: !0,
                     renderer: c,
                     highlight: k
                 }, function(s, o) {
-                    var l = ["<!DOCTYPE html>", "<html>", "<head>", '<meta http-equiv="Content-type" content="text/html;charset=UTF-8">', 0 === h.length ? '<link rel="stylesheet" href="' + n + '/markdown.css" type="text/css" media="screen">' : "", 0 === h.length ? '<link rel="stylesheet" href="' + n + '/tokens.css" type="text/css" media="screen">' : "", i.theme === p.LIGHT ? e.LIGHT_SCROLLBAR_CSS : i.theme === p.DARK ? e.DARK_SCROLLBAR_CSS : e.HC_BLACK_SCROLLBAR_CSS, h.map(function(e) {
-                            return '<link rel="stylesheet" href="' + i.fixHref(t, e) + '" type="text/css" media="screen">'
-                        }).join("\n"), "</head>", a.isMacintosh ? '<body class="mac">' : "<body>"].join("\n"),
-                        c = [i.theme === p.LIGHT ? '<div class="monaco-editor vs">' : i.theme === p.DARK ? '<div class="monaco-editor vs-dark">' : '<div class="monaco-editor hc-black">', o, "</div>"].join("\n"),
+                    var l = [
+                        "<!DOCTYPE html>", 
+                        "<html>", 
+                        "<head>", 
+                            '<meta http-equiv="Content-type" content="text/html;charset=UTF-8">', 
+                            0 === h.length ? '<link rel="stylesheet" href="' + n + '/markdown.css" type="text/css" media="screen">' : "", 
+                            0 === h.length ? '<link rel="stylesheet" href="' + n + '/tokens.css" type="text/css" media="screen">' : "", 
+                            i.theme === p.LIGHT ? e.LIGHT_SCROLLBAR_CSS : i.theme === p.DARK ? e.DARK_SCROLLBAR_CSS : e.HC_BLACK_SCROLLBAR_CSS, 
+                            h.map(function(e) {
+                                return '<link rel="stylesheet" href="' + i.fixHref(t, e) + '" type="text/css" media="screen">'
+                            }).join("\n"), 
+                            '<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>', 
+                            '<script type="text/x-mathjax-config">', 
+                                "MathJax.Hub.Config({", 
+                                    "showProcessingMessages:false,", 
+                                    "tex2jax:{inlineMath:[['$','$'],['\\\\(','\\\\)']]},", 
+                                    "TeX:{equationNumbers:{autoNumber:'AMS'}}", 
+                                "});", 
+                                "document.addEventListener('DOMSubtreeModified',function(){MathJax.Hub.Queue(['Typeset',MathJax.Hub]);},false);", 
+                            "</script>", 
+                        "</head>", 
+                        a.isMacintosh ? '<body class="mac">' : "<body>"
+                        ].join("\n"),
+                        c = [i.theme === p.LIGHT ? '<div class="m]onaco-editor vs">' : i.theme === p.DARK ? '<div class="monaco-editor vs-dark">' : '<div class="monaco-editor hc-black">', o, "</div>"].join("\n"),
                         u = ["</body>", "</html>"].join("\n");
                     r({
                         head: l,
                         body: c,
                         tail: u
                     })
                 })