Render MathML directly (#1966)

* Render MathML

* Fix lint error

* Change from main api to rendering options

src/Settings.js

@@ -18,6 +18,7 @@ export type StrictFunction =
 
 export type SettingsOptions = {
     displayMode?: boolean;
+    output?: "html" | "mathml" | "htmlAndMathml";
     leqno?: boolean;
     fleqn?: boolean;
     throwOnError?: boolean;
@@ -42,6 +43,7 @@ export type SettingsOptions = {
  */
 class Settings {
     displayMode: boolean;
+    output: "html" | "mathml" | "htmlAndMathml";
     leqno: boolean;
     fleqn: boolean;
     throwOnError: boolean;
@@ -57,6 +59,7 @@ class Settings {
         // allow null options
         options = options || {};
         this.displayMode = utils.deflt(options.displayMode, false);
+        this.output = utils.deflt(options.output, "htmlAndMathml");
         this.leqno = utils.deflt(options.leqno, false);
         this.fleqn = utils.deflt(options.fleqn, false);
         this.throwOnError = utils.deflt(options.throwOnError, true);

src/buildMathML.js

@@ -212,6 +212,7 @@ export default function buildMathML(
     tree: AnyParseNode[],
     texExpression: string,
     options: Options,
+    forMathmlOnly: boolean,
 ): DomSpan {
     const expression = buildExpression(tree, options);
 
@@ -235,11 +236,13 @@ export default function buildMathML(
         "semantics", [wrapper, annotation]);
 
     const math = new mathMLTree.MathNode("math", [semantics]);
+    math.setAttribute("xmlns", "http://www.w3.org/1998/Math/MathML");
 
     // You can't style <math> nodes, so we wrap the node in a span.
     // NOTE: The span class is not typed to have <math> nodes as children, and
     // we don't want to make the children type more generic since the children
     // of span are expected to have more fields in `buildHtml` contexts.
+    const wrapperClass = forMathmlOnly ? "katex" : "katex-mathml";
     // $FlowFixMe
-    return buildCommon.makeSpan(["katex-mathml"], [math]);
+    return buildCommon.makeSpan([wrapperClass], [math]);
 }

src/buildTree.js

@@ -36,12 +36,17 @@ export const buildTree = function(
     settings: Settings,
 ): DomSpan {
     const options = optionsFromSettings(settings);
-    const mathMLNode = buildMathML(tree, expression, options);
-    const htmlNode = buildHTML(tree, options);
-
-    const katexNode = buildCommon.makeSpan(["katex"], [
-        mathMLNode, htmlNode,
-    ]);
+    let katexNode;
+    if (settings.output === "mathml") {
+        return  buildMathML(tree, expression, options, true);
+    } else if (settings.output === "html") {
+        const htmlNode = buildHTML(tree, options);
+        katexNode = buildCommon.makeSpan(["katex"], [htmlNode]);
+    } else {
+        const mathMLNode = buildMathML(tree, expression, options, false);
+        const htmlNode = buildHTML(tree, options);
+        katexNode = buildCommon.makeSpan(["katex"], [mathMLNode, htmlNode]);
+    }
 
     return displayWrap(katexNode, settings);
 };