feat(katex): improved handling of KaTeX errors

src/errorRenderer.js

@@ -1,6 +1,7 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
 import { log } from './logger';
+import * as configApi from './config';
 
 const conf = {};
 
@@ -22,15 +23,28 @@ export const setConf = function (cnf) {
  *
  * @param {string} id The text for the error
  * @param {string} ver The version
+ * @param {Error} error The caught error
  */
-export const draw = (id, ver) => {
+export const draw = (id, ver, error = null) => {
   try {
     log.debug('Renering svg for syntax error\n');
 
+    const cnf = configApi.getConfig();
     const svg = select('#' + id);
 
     const g = svg.append('g');
 
+    if (error && error.message.includes('KaTeX')) {
+      const title = error.message.split(': ')[0];
+      const body = error.message.replace(/[A-z]*:/, '').replace('KaTeX parse ', '');
+      g.append('foreignObject')
+        .attr('width', 2000)
+        .attr('height', 500)
+        .append('xhtml:div')
+        .style('font-size', '70px')
+        .style('color', cnf.themeVariables.errorTextColor)
+        .html(`<h1>${title}</h1><p>${body}</p>`);
+    } else {
       g.append('path')
         .attr('class', 'error-icon')
         .attr(
@@ -87,6 +101,7 @@ export const draw = (id, ver) => {
         .attr('font-size', '100px')
         .style('text-anchor', 'middle')
         .text('mermaid version ' + ver);
+    }
 
     svg.attr('height', 100);
     svg.attr('width', 400);

src/mermaidAPI.js

@@ -499,7 +499,7 @@ const render = function (id, _txt, cb, container) {
     }
   } catch (e) {
     // errorRenderer.setConf(cnf.class);
-    errorRenderer.draw(id, pkg.version);
+    errorRenderer.draw(id, pkg.version, e);
     throw e;
   }