Repository: zestedesavoir/zmarkdown
Pull request #327 (2019-05-25 10:40:21)

zmarkdown: Add more math tests and correct the sqrt problem
# Context

After PR #325 , ZMarkdown still generated bad HTML for some math elements; theses have been reported in issue #326 . Eight commands were reported by @artragis to cause problems, and I noted myself that `\\notin` was suspicious also. After a quick investigation, it has been found that theses elements actually needed SVG to be rendered correctly. Unfortunately, SVG is forbidden by the sanitizer by default. This PR tries to solve the problem by changing the sanitizer configuration and adding tests for the problem.

While resolving the issue, I discovered MathML may need [some attributes](https://developer.mozilla.org/en-US/docs/Web/MathML/Attribute) to work correctly; this PR also deals with theses arguments, so that future problems related to this are prevented.

# Resolution

To solve all this, I started by adding tests to see what failed; only four tests were added because all of the nine commands that fail use the same type of tags for rendering. Then, the snapshot were regenerated **after deactivating the sanitizer** and rerun with the sanitizer reactivated to see what was missing.

Then, the KaTeX sanitizer configuration, which would become huge, was moved to an external file for reasons of clarity. The sanitizer configuration now depends on three elements: GH markdown, local KaTeX configuration and default configuration for ZMd.

Finally, the missing HTML elements and attributes were added to the new configuration file, along with the MathML attributes listed above, and test were ran again, but passing this time!

# What remains

- Merging this PR would solve ZMarkdown bugs in production.
- The math issue is now fixed, and we should see no more KaTeX problems... until the next version.
- Issue #326 would be solved.


Patch:
diff --git a/packages/zmarkdown/config/remark.js b/packages/zmarkdown/config/remark.js
index 569d9ec0..0530f455 100644
--- a/packages/zmarkdown/config/remark.js
+++ b/packages/zmarkdown/config/remark.js
@@ -18,63 +18,15 @@ const textrQuestionMark = require('typographic-question-mark/src')
 const textrSemicolon = require('typographic-semicolon/src')
 
 const gh = require('hast-util-sanitize/lib/github')
+const katex = require('./sanitize-katex')
 const merge = require('deepmerge')
 
-const sanitizeConfig = merge(gh, {
-  tagNames: [
-    'span',
-    'abbr',
-    'figure',
-    'figcaption',
-    'iframe',
-    // MathML elements
-    'math',
-    'maction',
-    'maligngroup',
-    'malignmark',
-    'menclose',
-    'merror',
-    'mfenced',
-    'mfrac',
-    'mglyph',
-    'mi',
-    'mlabeledtr',
-    'mlongdiv',
-    'mmultiscripts',
-    'mn',
-    'mo',
-    'mover',
-    'mpadded',
-    'mphantom',
-    'mroot',
-    'mrow',
-    'ms',
-    'mscarries',
-    'mscarry',
-    'msgroup',
-    'mstack',
-    'msline',
-    'mspace',
-    'msqrt',
-    'msrow',
-    'mstyle',
-    'msub',
-    'msubsup',
-    'msup',
-    'mtable',
-    'mtd',
-    'mtext',
-    'mtr',
-    'munder',
-    'munderover',
-    'semantics',
-    'annotation',
-    'annotation-xml',
-  ],
+const sanitizeConfig = merge.all([gh, katex, {
+  tagNames: ['span', 'abbr', 'figure', 'figcaption', 'iframe'],
   attributes: {
     a: ['ariaHidden', 'class', 'className'],
     div: ['id', 'class', 'className'],
-    span: ['id', 'className', 'class', 'style'],
+    span: ['id'],
     h1: ['ariaHidden'],
     h2: ['ariaHidden'],
     h3: ['ariaHidden'],
@@ -91,7 +43,7 @@ const sanitizeConfig = merge(gh, {
   },
   clobberPrefix: '',
   clobber: [],
-})
+}])
 
 const remarkConfig = {
   maxNesting: 100,
diff --git a/packages/zmarkdown/config/sanitize-katex.json b/packages/zmarkdown/config/sanitize-katex.json
new file mode 100644
index 00000000..d50b3d41
--- /dev/null
+++ b/packages/zmarkdown/config/sanitize-katex.json
@@ -0,0 +1,280 @@
+{
+  "tagNames": [
+    "span",
+    "abbr",
+    "figure",
+    "figcaption",
+    "iframe",
+    "math",
+    "maction",
+    "maligngroup",
+    "malignmark",
+    "menclose",
+    "merror",
+    "mfenced",
+    "mfrac",
+    "mglyph",
+    "mi",
+    "mlabeledtr",
+    "mlongdiv",
+    "mmultiscripts",
+    "mn",
+    "mo",
+    "mover",
+    "mpadded",
+    "mphantom",
+    "mroot",
+    "mrow",
+    "ms",
+    "mscarries",
+    "mscarry",
+    "msgroup",
+    "mstack",
+    "msline",
+    "mspace",
+    "msqrt",
+    "msrow",
+    "mstyle",
+    "msub",
+    "msubsup",
+    "msup",
+    "mtable",
+    "mtd",
+    "mtext",
+    "mtr",
+    "munder",
+    "munderover",
+    "semantics",
+    "annotation",
+    "annotation-xml",
+    "svg",
+    "path"
+  ],
+  "attributes": {
+    "annotation": [
+      "encoding"
+    ],
+    "mo": [
+      "accent",
+      "dir",
+      "fence",
+      "form",
+      "indentalign",
+      "indentalignfirst",
+      "indentalignlast",
+      "indentshift",
+      "indentshiftfirst",
+      "indentshiftlast",
+      "indenttarget",
+      "largeop",
+      "linebreak",
+      "linebreakmultchar",
+      "linebreakstyle",
+      "lineleading",
+      "lspace",
+      "mathsize",
+      "mathvariant",
+      "maxsize",
+      "minsize",
+      "movablelimits",
+      "rspace",
+      "separator",
+      "stretchy",
+      "symmetric"
+    ],
+    "mover": [
+      "accent",
+      "align"
+    ],
+    "munderover": [
+      "accent",
+      "accentunder",
+      "align"
+    ],
+    "munder": [
+      "accentunder",
+      "align"
+    ],
+    "maction": [
+      "actiontype",
+      "selection"
+    ],
+    "mtable": [
+      "align",
+      "alignmentscope",
+      "columnalign",
+      "columnlines",
+      "columnspacing",
+      "columnwidth",
+      "displaystyle",
+      "equalcolumns",
+      "equalrows",
+      "frame",
+      "framespacing",
+      "groupalign",
+      "minlabelspacing",
+      "rowalign",
+      "rowlines",
+      "rowspacing",
+      "side",
+      "width"
+    ],
+    "mstack": [
+      "align",
+      "charalign",
+      "stackalign"
+    ],
+    "math": [
+      "altimg",
+      "dir",
+      "display",
+      "overflow",
+      "xmlns"
+    ],
+    "mfrac": [
+      "bevelled",
+      "denomalign",
+      "linethickness",
+      "numalign"
+    ],
+    "mfenced": [
+      "close",
+      "open",
+      "separators"
+    ],
+    "mtd": [
+      "columnalign",
+      "columnspan",
+      "groupalign",
+      "rowalign",
+      "rowspan"
+    ],
+    "mtr": [
+      "columnalign",
+      "groupalign",
+      "rowalign"
+    ],
+    "mlabeledtr": [
+      "columnalign"
+    ],
+    "mscarry": [
+      "crossout"
+    ],
+    "mstyle": [
+      "decimalpoint",
+      "displaystyle",
+      "infixlinebreakstyle",
+      "scriptlevel",
+      "scriptminsize",
+      "scriptsizemultiplier",
+      "mathcolor"
+    ],
+    "mpadded": [
+      "depth",
+      "height",
+      "lspace",
+      "voffset",
+      "width"
+    ],
+    "mi": [
+      "dir",
+      "mathsize",
+      "mathvariant"
+    ],
+    "mrow": [
+      "dir"
+    ],
+    "ms": [
+      "dir",
+      "lquote",
+      "mathsize",
+      "mathvariant",
+      "rquote"
+    ],
+    "mtext": [
+      "dir",
+      "mathsize",
+      "mathvariant"
+    ],
+    "malignmark": [
+      "edge"
+    ],
+    "maligngroup": [
+      "groupalign"
+    ],
+    "mglyph": [
+      "height",
+      "src",
+      "width"
+    ],
+    "mspace": [
+      "height",
+      "indentalign",
+      "indentalignfirst",
+      "indentalignlast",
+      "indentshift",
+      "indentshiftfirst",
+      "indentshiftlast",
+      "indenttarget",
+      "linebreak",
+      "linebreakmultchar",
+      "linebreakstyle",
+      "lineleading",
+      "width"
+    ],
+    "msline": [
+      "length",
+      "position"
+    ],
+    "mscarries": [
+      "location",
+      "position"
+    ],
+    "mlongdiv": [
+      "longdivstyle"
+    ],
+    "mn": [
+      "mathsize",
+      "mathvariant"
+    ],
+    "menclose": [
+      "notation"
+    ],
+    "msgroup": [
+      "position",
+      "shift"
+    ],
+    "msrow": [
+      "position"
+    ],
+    "mmultiscripts": [
+      "subscriptshift",
+      "supscriptshift"
+    ],
+    "msub": [
+      "subscriptshift"
+    ],
+    "msubsup": [
+      "subscriptshift",
+      "supscriptshift"
+    ],
+    "msup": [
+      "supscriptshift"
+    ],
+    "span": [
+      "className",
+      "class",
+      "style",
+      "ariaHidden"
+    ],
+    "svg": [
+      "width",
+      "height",
+      "viewBox",
+      "preserveAspectRatio"
+    ],
+    "path": [
+      "d"
+    ]
+  }
+}
\ No newline at end of file


Test patch:
diff --git a/packages/zmarkdown/__tests__/__snapshots__/sanitizer.tests.js.snap b/packages/zmarkdown/__tests__/__snapshots__/sanitizer.tests.js.snap
index cc30e646..b6211428 100644
--- a/packages/zmarkdown/__tests__/__snapshots__/sanitizer.tests.js.snap
+++ b/packages/zmarkdown/__tests__/__snapshots__/sanitizer.tests.js.snap
@@ -1,5 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`#math do not oversanitize math - test frac 1`] = `"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mi>r</mi><mi>a</mi><mi>c</mi><mrow><mn>1</mn><mo>+</mo><mn>1</mn></mrow><mrow><mi>x</mi><mo>+</mo><mi>y</mi></mrow></mrow><annotation>rac{1+1}{x+y}</annotation></semantics></math></span><span class=\\"katex-html\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.8388800000000001em;vertical-align:-0.19444em;\\"></span><span class=\\"mord mathdefault\\" style=\\"margin-right:0.02778em;\\">r</span><span class=\\"mord mathdefault\\">a</span><span class=\\"mord mathdefault\\">c</span><span class=\\"mord\\"><span class=\\"mord\\">1</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mord\\">1</span></span><span class=\\"mord\\"><span class=\\"mord mathdefault\\">x</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mord mathdefault\\" style=\\"margin-right:0.03588em;\\">y</span></span></span></span></span></span></span></p>"`;
+exports[`#math do not oversanitize math - test color 1`] = `"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mstyle mathcolor=\\"red\\"><mi>x</mi></mstyle></mrow><annotation encoding=\\"application/x-tex\\">\\\\color{red}{x}</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.43056em;vertical-align:0em;\\"></span><span class=\\"mord\\" style=\\"color:red;\\"><span class=\\"mord mathdefault\\" style=\\"color:red;\\">x</span></span></span></span></span></span></span></p>"`;
 
-exports[`#math do not oversanitize math - test sub/sup 1`] = `"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><msub><mn>1</mn><mi>n</mi></msub><mo>+</mo><msup><mn>1</mn><mi>n</mi></msup></mrow><annotation>1_n + 1^n</annotation></semantics></math></span><span class=\\"katex-html\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.79444em;vertical-align:-0.15em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span><span class=\\"msupsub\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.151392em;\\"><span style=\\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathdefault mtight\\">n</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.15em;\\"><span></span></span></span></span></span></span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.7143919999999999em;vertical-align:0em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.7143919999999999em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathdefault mtight\\">n</span></span></span></span></span></span></span></span></span></span></span></span></span></p>"`;
+exports[`#math do not oversanitize math - test frac 1`] = `"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mfrac><mrow><mn>1</mn><mo>+</mo><mn>1</mn></mrow><mrow><mi>x</mi><mo>+</mo><mi>y</mi></mrow></mfrac></mrow><annotation encoding=\\"application/x-tex\\">\\\\frac{1+1}{x+y}</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:2.20188em;vertical-align:-0.8804400000000001em;\\"></span><span class=\\"mord\\"><span class=\\"mopen nulldelimiter\\"></span><span class=\\"mfrac\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:1.32144em;\\"><span style=\\"top:-2.314em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord\\"><span class=\\"mord mathdefault\\">x</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mord mathdefault\\" style=\\"margin-right:0.03588em;\\">y</span></span></span><span style=\\"top:-3.23em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"frac-line\\" style=\\"border-bottom-width:0.04em;\\"></span></span><span style=\\"top:-3.677em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mord\\">1</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.8804400000000001em;\\"><span></span></span></span></span></span><span class=\\"mclose nulldelimiter\\"></span></span></span></span></span></span></span></p>"`;
+
+exports[`#math do not oversanitize math - test notin 1`] = `"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mi mathvariant=\\"normal\\">∉</mi></mrow><annotation encoding=\\"application/x-tex\\">\\\\notin</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:1em;vertical-align:-0.25em;\\"></span><span class=\\"mrel\\"><span class=\\"mord\\"><span class=\\"mrel\\">∈</span></span><span class=\\"mord\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.75em;\\"><span style=\\"top:-3em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"llap\\"><span class=\\"strut\\" style=\\"height:1em;vertical-align:-0.25em;\\"></span><span class=\\"inner\\"><span class=\\"mord\\"><span class=\\"mord\\">/</span><span class=\\"mspace\\" style=\\"margin-right:0.05555555555555555em;\\"></span></span></span><span class=\\"fix\\"></span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.25em;\\"><span></span></span></span></span></span></span></span></span></span></span></span></p>"`;
+
+exports[`#math do not oversanitize math - test overrightarrow 1`] = `
+"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mover accent=\\"true\\"><mrow><mi>A</mi><mi>B</mi></mrow><mo stretchy=\\"true\\">→</mo></mover></mrow><annotation encoding=\\"application/x-tex\\">\\\\overrightarrow{AB}</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:1.20533em;vertical-align:0em;\\"></span><span class=\\"mord accent\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:1.20533em;\\"><span style=\\"top:-3em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord\\"><span class=\\"mord mathdefault\\">A</span><span class=\\"mord mathdefault\\" style=\\"margin-right:0.05017em;\\">B</span></span></span><span class=\\"svg-align\\" style=\\"top:-3.6833299999999998em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"hide-tail\\" style=\\"height:0.522em;min-width:0.888em;\\"><svg width=\\"400em\\" height=\\"0.522em\\" viewBox=\\"0 0 400000 522\\" preserveAspectRatio=\\"xMaxYMin slice\\"><path d=\\"M0 241v40h399891c-47.3 35.3-84 78-110 128
+-16.7 32-27.7 63.7-33 95 0 1.3-.2 2.7-.5 4-.3 1.3-.5 2.3-.5 3 0 7.3 6.7 11 20
+ 11 8 0 13.2-.8 15.5-2.5 2.3-1.7 4.2-5.5 5.5-11.5 2-13.3 5.7-27 11-41 14.7-44.7
+ 39-84.5 73-119.5s73.7-60.2 119-75.5c6-2 9-5.7 9-11s-3-9-9-11c-45.3-15.3-85
+-40.5-119-75.5s-58.3-74.8-73-119.5c-4.7-14-8.3-27.3-11-40-1.3-6.7-3.2-10.8-5.5
+-12.5-2.3-1.7-7.5-2.5-15.5-2.5-14 0-21 3.7-21 11 0 2 2 10.3 6 25 20.7 83.3 67
+ 151.7 139 205zm0 0v40h399900v-40z\\"></path></svg></span></span></span></span></span></span></span></span></span></span></span></p>"
+`;
+
+exports[`#math do not oversanitize math - test sqrt 1`] = `
+"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mroot><mrow><msup><mi>x</mi><mn>3</mn></msup><mo>+</mo><msup><mi>y</mi><mn>3</mn></msup><mo>+</mo><msup><mi>z</mi><mn>3</mn></msup></mrow><mn>3</mn></mroot></mrow><annotation encoding=\\"application/x-tex\\">\\\\sqrt[3]{x^3 + y^3 + z^3}</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:1.24em;vertical-align:-0.23329099999999992em;\\"></span><span class=\\"mord sqrt\\"><span class=\\"root\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.7862708em;\\"><span style=\\"top:-2.9640508em;\\"><span class=\\"pstrut\\" style=\\"height:2.5em;\\"></span><span class=\\"sizing reset-size6 size1 mtight\\"><span class=\\"mord mtight\\"><span class=\\"mord mtight\\">3</span></span></span></span></span></span></span></span><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:1.006709em;\\"><span class=\\"svg-align\\" style=\\"top:-3.2em;\\"><span class=\\"pstrut\\" style=\\"height:3.2em;\\"></span><span class=\\"mord\\" style=\\"padding-left:1em;\\"><span class=\\"mord\\"><span class=\\"mord mathdefault\\">x</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.740108em;\\"><span style=\\"top:-2.9890000000000003em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\">3</span></span></span></span></span></span></span></span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mord\\"><span class=\\"mord mathdefault\\" style=\\"margin-right:0.03588em;\\">y</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.740108em;\\"><span style=\\"top:-2.9890000000000003em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\">3</span></span></span></span></span></span></span></span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mord\\"><span class=\\"mord mathdefault\\" style=\\"margin-right:0.04398em;\\">z</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.740108em;\\"><span style=\\"top:-2.9890000000000003em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mtight\\">3</span></span></span></span></span></span></span></span></span></span><span style=\\"top:-2.9667090000000003em;\\"><span class=\\"pstrut\\" style=\\"height:3.2em;\\"></span><span class=\\"hide-tail\\" style=\\"min-width:1.02em;height:1.28em;\\"><svg width=\\"400em\\" height=\\"1.28em\\" viewBox=\\"0 0 400000 1296\\" preserveAspectRatio=\\"xMinYMin slice\\"><path d=\\"M263,681c0.7,0,18,39.7,52,119c34,79.3,68.167,
+158.7,102.5,238c34.3,79.3,51.8,119.3,52.5,120c340,-704.7,510.7,-1060.3,512,-1067
+c4.7,-7.3,11,-11,19,-11H40000v40H1012.3s-271.3,567,-271.3,567c-38.7,80.7,-84,
+175,-136,283c-52,108,-89.167,185.3,-111.5,232c-22.3,46.7,-33.8,70.3,-34.5,71
+c-4.7,4.7,-12.3,7,-23,7s-12,-1,-12,-1s-109,-253,-109,-253c-72.7,-168,-109.3,
+-252,-110,-252c-10.7,8,-22,16.7,-34,26c-22,17.3,-33.3,26,-34,26s-26,-26,-26,-26
+s76,-59,76,-59s76,-60,76,-60z M1001 80H40000v40H1012z\\"></path></svg></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.23329099999999992em;\\"><span></span></span></span></span></span></span></span></span></span></span></p>"
+`;
+
+exports[`#math do not oversanitize math - test sub/sup 1`] = `"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><msub><mn>1</mn><mi>n</mi></msub><mo>+</mo><msup><mn>1</mn><mi>n</mi></msup></mrow><annotation encoding=\\"application/x-tex\\">1_n + 1^n</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.79444em;vertical-align:-0.15em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span><span class=\\"msupsub\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.151392em;\\"><span style=\\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathdefault mtight\\">n</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.15em;\\"><span></span></span></span></span></span></span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.7143919999999999em;vertical-align:0em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.7143919999999999em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathdefault mtight\\">n</span></span></span></span></span></span></span></span></span></span></span></span></span></p>"`;
diff --git a/packages/zmarkdown/__tests__/sanitizer.tests.js b/packages/zmarkdown/__tests__/sanitizer.tests.js
index 2857c4bf..5c169a22 100644
--- a/packages/zmarkdown/__tests__/sanitizer.tests.js
+++ b/packages/zmarkdown/__tests__/sanitizer.tests.js
@@ -27,7 +27,27 @@ describe('#math', () => {
   })
 
   it('do not oversanitize math - test frac', () => {
-    const rendered = renderString()('$$\frac{1+1}{x+y}$$')
+    const rendered = renderString()('$$\\frac{1+1}{x+y}$$')
+    expect(rendered).resolves.toMatchSnapshot()
+  })
+
+  it('do not oversanitize math - test sqrt', () => {
+    const rendered = renderString()('$$\\sqrt[3]{x^3 + y^3 + z^3}$$')
+    expect(rendered).resolves.toMatchSnapshot()
+  })
+
+  it('do not oversanitize math - test notin', () => {
+    const rendered = renderString()('$$\\notin$$')
+    expect(rendered).resolves.toMatchSnapshot()
+  })
+
+  it('do not oversanitize math - test overrightarrow', () => {
+    const rendered = renderString()('$$\\overrightarrow{AB}$$')
+    expect(rendered).resolves.toMatchSnapshot()
+  })
+
+  it('do not oversanitize math - test color', () => {
+    const rendered = renderString()('$$\\color{red}{x}$$')
     expect(rendered).resolves.toMatchSnapshot()
   })
 })