[DEV] Add katex for math ws example

Author: RomainCscn

examples/examples.css

@@ -204,6 +204,7 @@ select:focus {
 }
 
 #result span {
+    margin: auto;
     font-size: xx-large;
 }
 

examples/v4/websocket_math_iink.html

@@ -12,9 +12,9 @@
 
     <link rel="stylesheet" href="../../dist/myscript.min.css"/>
     <link rel="stylesheet" href="../examples.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous">
 
-    <!-- Live reload with webpack -->
-    <script type="text/javascript" src="http://localhost:8080/webpack-dev-server.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" integrity="sha384-jmxIlussZWB7qCuB+PgKG1uLjjxbVVIayPJwi6cG6Zb4YKq0JIw+OMnkkEC7kYCq" crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
     <script type="text/javascript" src="../../dist/myscript.min.js"></script>
   </head>
@@ -53,12 +53,30 @@
         clearElement.disabled = event.detail.isEmpty;
       });
 
+      function cleanLatex(latexExport) {
+        if (latexExport.includes('\\\\')) {
+          const steps = '\\begin{align*}' + latexExport + '\\end{align*}';
+          return steps.replace("\\overrightarrow", "\\vec")
+            .replace("\\llbracket", "\\lbracket")
+            .replace("\\rrbracket", "\\rbracket")
+            .replace("\\widehat", "\\hat")
+            .replace(new RegExp("(align.{1})", "g"), "aligned");
+        }
+        return latexExport
+          .replace("\\overrightarrow", "\\vec")
+          .replace("\\llbracket", "\\lbracket")
+          .replace("\\rrbracket", "\\rbracket")
+          .replace("\\widehat", "\\hat")
+          .replace(new RegExp("(align.{1})", "g"), "aligned");
+      }
+
       editorElement.addEventListener('exported', function (evt) {
 
         const exports = evt.detail.exports;
         if (exports && exports['application/x-latex']) {
           convertElement.disabled = false;
-          resultElement.innerHTML = '<span>' + exports['application/x-latex'] + '</span>';
+          katex.render(cleanLatex(exports['application/x-latex']),  resultElement);
+          // resultElement.innerHTML = '<span>' + exports['application/x-latex'] + '</span>';
         } else if (exports && exports['application/mathml+xml']) {
           convertElement.disabled = false;
           resultElement.innerText = exports['application/mathml+xml'];