Render latex with katex

Author: Yukaii

package-lock.json

@@ -52,6 +52,7 @@
 		"imports-loader": "^0.8.0",
 		"jquery": "^3.4.1",
 		"js-sequence-diagrams": "git+https://github.com/Moeditor/js-sequence-diagrams.git",
+		"katex": "^0.10.2",
 		"lodash": "^4.17.15",
 		"mermaid": "^8.2.3",
 		"mini-css-extract-plugin": "^0.8.0",

package.json

@@ -188,10 +188,10 @@ export function activate(context: vscode.ExtensionContext) {
       md.use(require('markdown-it-mathjax')({
         beforeMath: '<span class="mathjax raw">',
         afterMath: '</span>',
-        beforeInlineMath: '<span class="mathjax raw">\\(',
-        afterInlineMath: '\\)</span>',
-        beforeDisplayMath: '<span class="mathjax raw">\\[',
-        afterDisplayMath: '\\]</span>'
+        beforeInlineMath: '<span class="mathjax raw">',
+        afterInlineMath: '</span>',
+        beforeDisplayMath: '<span class="mathjax raw display">',
+        afterDisplayMath: '</span>'
       }));
 
       md.use(markdownitContainer, 'success', { render });

src/extension.ts

@@ -4,12 +4,14 @@ import 'bootstrap3/dist/css/bootstrap.min.css';
 import './mermaid.css';
 import './github-gist.css';
 import 'prismjs/themes/prism.css';
+import 'katex/dist/katex.css';
 
 import './markdown.css';
 import './style.css';
 
 import * as mermaid from 'mermaid';
 import * as flowchart from 'flowchart.js';
+import * as katex from 'katex';
 
 import 'js-sequence-diagrams';
 import Viz from 'viz.js';
@@ -116,3 +118,25 @@ graphvizs.each(function (key, value) {
     // console.warn(err)
   }
 })
+
+$('span.mathjax.raw').removeClass('raw')
+  .each(function (key, value) {
+    var $value = $(value)
+    var $ele = $(value).parent().parent()
+    $value.unwrap()
+
+    let result
+    if ($(value).hasClass('display')) {
+      result = katex.renderToString($value.text(), {
+        throwOnError: false,
+        displayMode: true
+      })
+    } else {
+      result = katex.renderToString($value.text(), {
+        throwOnError: false
+      })
+    }
+
+    $value.html(result)
+    $value.children().unwrap()
+  })

src/page.ts

@@ -0,0 +1,3 @@
+interface Window {
+  MathJax: any
+}