katex 0.10.1 → 0.12.0

package/src/Settings.js

@@ -16,18 +16,57 @@ export type StrictFunction =
     (errorCode: string, errorMsg: string, token?: Token | AnyParseNode) =>
     ?(boolean | string);
 
+export type TrustContextTypes = {
+    "\\href": {|
+        command: "\\href",
+        url: string,
+        protocol?: string,
+    |},
+    "\\includegraphics": {|
+        command: "\\includegraphics",
+        url: string,
+        protocol?: string,
+    |},
+    "\\url": {|
+        command: "\\url",
+        url: string,
+        protocol?: string,
+    |},
+    "\\htmlClass": {|
+        command: "\\htmlClass",
+        class: string,
+    |},
+    "\\htmlId": {|
+        command: "\\htmlId",
+        id: string,
+    |},
+    "\\htmlStyle": {|
+        command: "\\htmlStyle",
+        style: string,
+    |},
+    "\\htmlData": {|
+        command: "\\htmlData",
+        attributes: {[string]: string},
+    |},
+};
+export type AnyTrustContext = $Values<TrustContextTypes>;
+export type TrustFunction = (context: AnyTrustContext) => ?boolean;
+
 export type SettingsOptions = {
     displayMode?: boolean;
+    output?: "html" | "mathml" | "htmlAndMathml";
     leqno?: boolean;
     fleqn?: boolean;
     throwOnError?: boolean;
     errorColor?: string;
     macros?: MacroMap;
+    minRuleThickness?: number;
     colorIsTextColor?: boolean;
     strict?: boolean | "ignore" | "warn" | "error" | StrictFunction;
+    trust?: boolean | TrustFunction;
     maxSize?: number;
     maxExpand?: number;
-    allowedProtocols?: string[];
+    globalGroup?: boolean;
 };
 
 /**
@@ -40,34 +79,42 @@ export type SettingsOptions = {
  *                 math (true), meaning that the math starts in \displaystyle
  *                 and is placed in a block with vertical margin.
  */
-class Settings {
+export default class Settings {
     displayMode: boolean;
+    output: "html" | "mathml" | "htmlAndMathml";
     leqno: boolean;
     fleqn: boolean;
     throwOnError: boolean;
     errorColor: string;
     macros: MacroMap;
+    minRuleThickness: number;
     colorIsTextColor: boolean;
     strict: boolean | "ignore" | "warn" | "error" | StrictFunction;
+    trust: boolean | TrustFunction;
     maxSize: number;
     maxExpand: number;
-    allowedProtocols: string[];
+    globalGroup: boolean;
 
     constructor(options: SettingsOptions) {
         // 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);
         this.errorColor = utils.deflt(options.errorColor, "#cc0000");
         this.macros = options.macros || {};
+        this.minRuleThickness = Math.max(
+            0,
+            utils.deflt(options.minRuleThickness, 0)
+        );
         this.colorIsTextColor = utils.deflt(options.colorIsTextColor, false);
         this.strict = utils.deflt(options.strict, "warn");
+        this.trust = utils.deflt(options.trust, false);
         this.maxSize = Math.max(0, utils.deflt(options.maxSize, Infinity));
         this.maxExpand = Math.max(0, utils.deflt(options.maxExpand, 1000));
-        this.allowedProtocols = utils.deflt(options.allowedProtocols,
-            ["http", "https", "mailto", "_relative"]);
+        this.globalGroup = utils.deflt(options.globalGroup, false);
     }
 
     /**
@@ -137,6 +184,22 @@ class Settings {
             return false;
         }
     }
-}
 
-export default Settings;
+    /**
+     * Check whether to test potentially dangerous input, and return
+     * `true` (trusted) or `false` (untrusted).  The sole argument `context`
+     * should be an object with `command` field specifying the relevant LaTeX
+     * command (as a string starting with `\`), and any other arguments, etc.
+     * If `context` has a `url` field, a `protocol` field will automatically
+     * get added by this function (changing the specified object).
+     */
+    isTrusted(context: AnyTrustContext) {
+        if (context.url && !context.protocol) {
+            context.protocol = utils.protocolFromUrl(context.url);
+        }
+        const trust = typeof this.trust === "function"
+            ? this.trust(context)
+            : this.trust;
+        return Boolean(trust);
+    }
+}

package/src/Token.js

@@ -23,6 +23,8 @@ export interface LexerInterface {input: string, tokenRegex: RegExp}
 export class Token {
     text: string;
     loc: ?SourceLocation;
+    noexpand: ?boolean; // don't expand the token
+    treatAsRelax: ?boolean; // used in \noexpand
 
     constructor(
         text: string,           // the text of this token

package/src/buildCommon.js

@@ -8,7 +8,6 @@
 import {SymbolNode, Anchor, Span, PathNode, SvgNode, createClass} from "./domTree";
 import {getCharacterMetrics} from "./fontMetrics";
 import symbols, {ligatures} from "./symbols";
-import utils from "./utils";
 import {wideCharacterFont} from "./wide-character";
 import {calculateSize} from "./units";
 import {DocumentFragment} from "./tree";
@@ -21,13 +20,6 @@ import type {documentFragment as HtmlDocumentFragment} from "./domTree";
 import type {HtmlDomNode, DomSpan, SvgSpan, CssStyle} from "./domTree";
 import type {Measurement} from "./units";
 
-// The following have to be loaded from Main-Italic font, using class mathit
-const mathitLetters = [
-    "\\imath", "ı",       // dotless i
-    "\\jmath", "ȷ",       // dotless j
-    "\\pounds", "\\mathsterling", "\\textsterling", "£",   // pounds symbol
-];
-
 /**
  * Looks up the given symbol in fontMetrics, after applying any symbol
  * replacements defined in symbol.js
@@ -80,9 +72,8 @@ const makeSymbol = function(
             metrics.width, classes);
     } else {
         // TODO(emily): Figure out a good way to only print this in development
-        typeof console !== "undefined" && console.warn(
-            "No character metrics for '" + value + "' in style '" +
-                fontName + "'");
+        typeof console !== "undefined" && console.warn("No character metrics " +
+            `for '${value}' in style '${fontName}' and mode '${mode}'`);
         symbolNode = new SymbolNode(value, 0, 0, 0, 0, 0, classes);
     }
 
@@ -103,13 +94,11 @@ const makeSymbol = function(
 /**
  * Makes a symbol in Main-Regular or AMS-Regular.
  * Used for rel, bin, open, close, inner, and punct.
- *
- * TODO(#953): Make `options` mandatory and always pass it in.
  */
 const mathsym = function(
     value: string,
     mode: Mode,
-    options?: Options,
+    options: Options,
     classes?: string[] = [],
 ): SymbolNode {
     // Decide what font to render the symbol in by its entry in the symbols
@@ -119,7 +108,7 @@ const mathsym = function(
     // text ordinal and is therefore not present as a symbol in the symbols
     // table for text, as well as a special case for boldsymbol because it
     // can be used for bold + and -
-    if ((options && options.font && options.font === "boldsymbol") &&
+    if (options.font === "boldsymbol" &&
             lookupSymbol(value, "Main-Bold", mode).metrics) {
         return makeSymbol(value, "Main-Bold", mode, options,
             classes.concat(["mathbf"]));
@@ -131,63 +120,6 @@ const mathsym = function(
     }
 };
 
-/**
- * Determines which of the two font names (Main-Italic and Math-Italic) and
- * corresponding style tags (maindefault or mathit) to use for default math font,
- * depending on the symbol.
- */
-const mathdefault = function(
-    value: string,
-    mode: Mode,
-    options: Options,
-    classes: string[],
-): {| fontName: string, fontClass: string |} {
-    if (/[0-9]/.test(value.charAt(0)) ||
-            // glyphs for \imath and \jmath do not exist in Math-Italic so we
-            // need to use Main-Italic instead
-            utils.contains(mathitLetters, value)) {
-        return {
-            fontName: "Main-Italic",
-            fontClass: "mathit",
-        };
-    } else {
-        return {
-            fontName: "Math-Italic",
-            fontClass: "mathdefault",
-        };
-    }
-};
-
-/**
- * Determines which of the font names (Main-Italic, Math-Italic, and Caligraphic)
- * and corresponding style tags (mathit, mathdefault, or mathcal) to use for font
- * "mathnormal", depending on the symbol.  Use this function instead of fontMap for
- * font "mathnormal".
- */
-const mathnormal = function(
-    value: string,
-    mode: Mode,
-    options: Options,
-    classes: string[],
-): {| fontName: string, fontClass: string |} {
-    if (utils.contains(mathitLetters, value)) {
-        return {
-            fontName: "Main-Italic",
-            fontClass: "mathit",
-        };
-    } else if (/[0-9]/.test(value.charAt(0))) {
-        return {
-            fontName: "Caligraphic-Regular",
-            fontClass: "mathcal",
-        };
-    } else {
-        return {
-            fontName: "Math-Italic",
-            fontClass: "mathdefault",
-        };
-    }
-};
-
 /**
  * Determines which of the two font names (Main-Bold and Math-BoldItalic) and
  * corresponding style tags (mathbf or boldsymbol) to use for font "boldsymbol",
@@ -199,8 +131,10 @@ const boldsymbol = function(
     mode: Mode,
     options: Options,
     classes: string[],
+    type: "mathord" | "textord",
 ): {| fontName: string, fontClass: string |} {
-    if (lookupSymbol(value, "Math-BoldItalic", mode).metrics) {
+    if (type !== "textord" &&
+        lookupSymbol(value, "Math-BoldItalic", mode).metrics) {
         return {
             fontName: "Math-BoldItalic",
             fontClass: "boldsymbol",
@@ -239,15 +173,10 @@ const makeOrd = function<NODETYPE: "spacing" | "mathord" | "textord">(
     } else if (fontOrFamily) {
         let fontName;
         let fontClasses;
-        if (fontOrFamily === "boldsymbol" || fontOrFamily === "mathnormal") {
-            const fontData = fontOrFamily === "boldsymbol"
-                ? boldsymbol(text, mode, options, classes)
-                : mathnormal(text, mode, options, classes);
+        if (fontOrFamily === "boldsymbol") {
+            const fontData = boldsymbol(text, mode, options, classes, type);
             fontName = fontData.fontName;
             fontClasses = [fontData.fontClass];
-        } else if (utils.contains(mathitLetters, text)) {
-            fontName = "Main-Italic";
-            fontClasses = ["mathit"];
         } else if (isFont) {
             fontName = fontMap[fontOrFamily].fontName;
             fontClasses = [fontOrFamily];
@@ -274,9 +203,8 @@ const makeOrd = function<NODETYPE: "spacing" | "mathord" | "textord">(
 
     // Makes a symbol in the default font for mathords and textords.
     if (type === "mathord") {
-        const fontLookup = mathdefault(text, mode, options, classes);
-        return makeSymbol(text, fontLookup.fontName, mode, options,
-            classes.concat([fontLookup.fontClass]));
+        return makeSymbol(text, "Math-Italic", mode, options,
+            classes.concat(["mathnormal"]));
     } else if (type === "textord") {
         const font = symbols[mode][text] && symbols[mode][text].font;
         if (font === "ams") {
@@ -423,7 +351,10 @@ const makeLineSpan = function(
     thickness?: number,
 ) {
     const line = makeSpan([className], [], options);
-    line.height = thickness || options.fontMetrics().defaultRuleThickness;
+    line.height = Math.max(
+        thickness || options.fontMetrics().defaultRuleThickness,
+        options.minRuleThickness,
+    );
     line.style.borderBottomWidth = line.height + "em";
     line.maxFontSize = 1.0;
     return line;
@@ -752,13 +683,14 @@ const fontMap: {[string]: {| variant: FontVariant, fontName: string |}} = {
         variant: "italic",
         fontName: "Main-Italic",
     },
+    "mathnormal": {
+        variant: "italic",
+        fontName: "Math-Italic",
+    },
 
-    // Default math font, "mathnormal" and "boldsymbol" are missing because they
-    // require the use of several fonts: Main-Italic and Math-Italic for default
-    // math font, Main-Italic, Math-Italic, Caligraphic for "mathnormal", and
-    // Math-BoldItalic and Main-Bold for "boldsymbol".  This is handled by a
-    // special case in makeOrd which ends up calling mathdefault, mathnormal,
-    // and boldsymbol.
+    // "boldsymbol" is missing because they require the use of multiple fonts:
+    // Math-BoldItalic and Main-Bold.  This is handled by a special case in
+    // makeOrd which ends up calling boldsymbol.
 
     // families
     "mathbb": {
@@ -796,6 +728,8 @@ const svgData: {
     oiintSize2: ["oiintSize2", 1.472, 0.659],
     oiiintSize1: ["oiiintSize1", 1.304, 0.499],
     oiiintSize2: ["oiiintSize2", 1.98, 0.659],
+    leftParenInner: ["leftParenInner", 0.875, 0.3],
+    rightParenInner: ["rightParenInner", 0.875, 0.3],
 };
 
 const staticSvg = function(value: string, options: Options): SvgSpan {

package/src/buildHTML.js

@@ -9,9 +9,8 @@
 import ParseError from "./ParseError";
 import Style from "./Style";
 import buildCommon from "./buildCommon";
-import {Anchor} from "./domTree";
+import {Span, Anchor} from "./domTree";
 import utils from "./utils";
-import {checkNodeType} from "./parseNode";
 import {spacings, tightSpacings} from "./spacingData";
 import {_htmlGroupBuilders as groupBuilders} from "./defineFunction";
 import {DocumentFragment} from "./tree";
@@ -60,7 +59,7 @@ type DomType = $Keys<typeof DomEnum>;
 export const buildExpression = function(
     expression: AnyParseNode[],
     options: Options,
-    isRealGroup: boolean,
+    isRealGroup: boolean | "root",
     surrounding: [?DomType, ?DomType] = [null, null],
 ): HtmlDomNode[] {
     // Parse expressions into `groups`.
@@ -68,7 +67,7 @@ export const buildExpression = function(
     for (let i = 0; i < expression.length; i++) {
         const output = buildGroup(expression[i], options);
         if (output instanceof DocumentFragment) {
-            const children: HtmlDomNode[] = output.children;
+            const children: $ReadOnlyArray<HtmlDomNode> = output.children;
             groups.push(...children);
         } else {
             groups.push(output);
@@ -83,11 +82,8 @@ export const buildExpression = function(
 
     let glueOptions = options;
     if (expression.length === 1) {
-        const node = checkNodeType(expression[0], "sizing") ||
-            checkNodeType(expression[0], "styling");
-        if (!node) {
-            // No match.
-        } else if (node.type === "sizing") {
+        const node = expression[0];
+        if (node.type === "sizing") {
             glueOptions = options.havingSize(node.size);
         } else if (node.type === "styling") {
             glueOptions = options.havingStyle(styleMap[node.style]);
@@ -106,6 +102,7 @@ export const buildExpression = function(
 
     // Before determining what spaces to insert, perform bin cancellation.
     // Binary operators change to ordinary symbols in some contexts.
+    const isRoot = (isRealGroup === "root");
     traverseNonSpaceNodes(groups, (node, prev) => {
         const prevType = prev.classes[0];
         const type = node.classes[0];
@@ -114,7 +111,7 @@ export const buildExpression = function(
         } else if (type === "mbin" && utils.contains(binLeftCanceller, prevType)) {
             node.classes[0] = "mord";
         }
-    }, {node: dummyPrev}, dummyNext);
+    }, {node: dummyPrev}, dummyNext, isRoot);
 
     traverseNonSpaceNodes(groups, (node, prev) => {
         const prevType = getTypeOfDomTree(prev);
@@ -127,7 +124,7 @@ export const buildExpression = function(
         if (space) { // Insert glue (spacing) after the `prev`.
             return buildCommon.makeGlue(space, glueOptions);
         }
-    }, {node: dummyPrev}, dummyNext);
+    }, {node: dummyPrev}, dummyNext, isRoot);
 
     return groups;
 };
@@ -145,6 +142,7 @@ const traverseNonSpaceNodes = function(
         insertAfter?: HtmlDomNode => void,
     |},
     next: ?HtmlDomNode,
+    isRoot: boolean,
 ) {
     if (next) { // temporarily append the right node, if exists
         nodes.push(next);
@@ -154,27 +152,32 @@ const traverseNonSpaceNodes = function(
         const node = nodes[i];
         const partialGroup = checkPartialGroup(node);
         if (partialGroup) { // Recursive DFS
-            traverseNonSpaceNodes(partialGroup.children, callback, prev);
+            // $FlowFixMe: make nodes a $ReadOnlyArray by returning a new array
+            traverseNonSpaceNodes(partialGroup.children,
+                callback, prev, null, isRoot);
             continue;
         }
 
         // Ignore explicit spaces (e.g., \;, \,) when determining what implicit
         // spacing should go between atoms of different classes
-        if (node.classes[0] === "mspace") {
-            continue;
-        }
-
-        const result = callback(node, prev.node);
-        if (result) {
-            if (prev.insertAfter) {
-                prev.insertAfter(result);
-            } else { // insert at front
-                nodes.unshift(result);
-                i++;
+        const nonspace = !node.hasClass("mspace");
+        if (nonspace) {
+            const result = callback(node, prev.node);
+            if (result) {
+                if (prev.insertAfter) {
+                    prev.insertAfter(result);
+                } else { // insert at front
+                    nodes.unshift(result);
+                    i++;
+                }
             }
         }
 
-        prev.node = node;
+        if (nonspace) {
+            prev.node = node;
+        } else if (isRoot && node.hasClass("newline")) {
+            prev.node = makeSpan(["leftmost"]); // treat like beginning of line
+        }
         prev.insertAfter = (index => n => {
             nodes.splice(index + 1, 0, n);
             i++;
@@ -188,8 +191,9 @@ const traverseNonSpaceNodes = function(
 // Check if given node is a partial group, i.e., does not affect spacing around.
 const checkPartialGroup = function(
     node: HtmlDomNode,
-): ?(DocumentFragment<HtmlDomNode> | Anchor) {
-    if (node instanceof DocumentFragment || node instanceof Anchor) {
+): ?(DocumentFragment<HtmlDomNode> | Anchor | DomSpan) {
+    if (node instanceof DocumentFragment || node instanceof Anchor
+        || (node instanceof Span && node.hasClass("enclosing"))) {
         return node;
     }
     return null;
@@ -291,10 +295,6 @@ function buildHTMLUnbreakable(children, options) {
     // Add strut, which ensures that the top of the HTML element falls at
     // the height of the expression, and the bottom of the HTML element
     // falls at the depth of the expression.
-    // We used to have separate top and bottom struts, where the bottom strut
-    // would like to use `vertical-align: top`, but in IE 9 this lowers the
-    // baseline of the box to the bottom of this strut (instead of staying in
-    // the normal place) so we use an absolute value for vertical-align instead.
     const strut = makeSpan(["strut"]);
     strut.style.height = (body.height + body.depth) + "em";
     strut.style.verticalAlign = -body.depth + "em";
@@ -316,7 +316,7 @@ export default function buildHTML(tree: AnyParseNode[], options: Options): DomSp
     }
 
     // Build the expression contained in the tree
-    const expression = buildExpression(tree, options, true);
+    const expression = buildExpression(tree, options, "root");
 
     const children = [];
 

package/src/buildMathML.js

@@ -44,7 +44,7 @@ export const makeText = function(
  * Wrap the given array of nodes in an <mrow> node if needed, i.e.,
  * unless the array has length 1.  Always returns a single node.
  */
-export const makeRow = function(body: MathDomNode[]): MathDomNode {
+export const makeRow = function(body: $ReadOnlyArray<MathDomNode>): MathDomNode {
     if (body.length === 1) {
         return body[0];
     } else {
@@ -93,7 +93,20 @@ export const getVariant = function(
     if (font === "mathit") {
         return "italic";
     } else if (font === "boldsymbol") {
-        return "bold-italic";
+        return group.type === "textord" ? "bold" : "bold-italic";
+    } else if (font === "mathbf") {
+        return "bold";
+    } else if (font === "mathbb") {
+        return "double-struck";
+    } else if (font === "mathfrak") {
+        return "fraktur";
+    } else if (font === "mathscr" || font === "mathcal") {
+        // MathML makes no distinction between script and caligrahpic
+        return "script";
+    } else if (font === "mathsf") {
+        return "sans-serif";
+    } else if (font === "mathtt") {
+        return "monospace";
     }
 
     let text = group.text;
@@ -121,7 +134,19 @@ export const getVariant = function(
 export const buildExpression = function(
     expression: AnyParseNode[],
     options: Options,
-): MathDomNode[] {
+    isOrdgroup?: boolean,
+): MathNode[] {
+    if (expression.length === 1) {
+        const group = buildGroup(expression[0], options);
+        if (isOrdgroup && group instanceof MathNode && group.type === "mo") {
+            // When TeX writers want to suppress spacing on an operator,
+            // they often put the operator by itself inside braces.
+            group.setAttribute("lspace", "0em");
+            group.setAttribute("rspace", "0em");
+        }
+        return [group];
+    }
+
     const groups = [];
     let lastGroup;
     for (let i = 0; i < expression.length; i++) {
@@ -145,14 +170,24 @@ export const buildExpression = function(
                     lastGroup.children.push(...group.children);
                     continue;
                 }
+            } else if (lastGroup.type === 'mi' && lastGroup.children.length === 1) {
+                const lastChild = lastGroup.children[0];
+                if (lastChild instanceof TextNode && lastChild.text === '\u0338' &&
+                    (group.type === 'mo' || group.type === 'mi' ||
+                        group.type === 'mn')) {
+                    const child = group.children[0];
+                    if (child instanceof TextNode && child.text.length > 0) {
+                        // Overlay with combining character long solidus
+                        child.text = child.text.slice(0, 1) + "\u0338" +
+                            child.text.slice(1);
+                        groups.pop();
+                    }
+                }
             }
         }
         groups.push(group);
         lastGroup = group;
     }
-
-    // TODO(kevinb): combine \\not with mrels and mords
-
     return groups;
 };
 
@@ -163,8 +198,9 @@ export const buildExpression = function(
 export const buildExpressionRow = function(
     expression: AnyParseNode[],
     options: Options,
+    isOrdgroup?: boolean,
 ): MathDomNode {
-    return makeRow(buildExpression(expression, options));
+    return makeRow(buildExpression(expression, options, isOrdgroup));
 };
 
 /**
@@ -174,7 +210,7 @@ export const buildExpressionRow = function(
 export const buildGroup = function(
     group: ?AnyParseNode,
     options: Options,
-): MathDomNode {
+): MathNode {
     if (!group) {
         return new mathMLTree.MathNode("mrow");
     }
@@ -202,6 +238,8 @@ export default function buildMathML(
     tree: AnyParseNode[],
     texExpression: string,
     options: Options,
+    isDisplayMode: boolean,
+    forMathmlOnly: boolean,
 ): DomSpan {
     const expression = buildExpression(tree, options);
 
@@ -225,11 +263,16 @@ export default function buildMathML(
         "semantics", [wrapper, annotation]);
 
     const math = new mathMLTree.MathNode("math", [semantics]);
+    math.setAttribute("xmlns", "http://www.w3.org/1998/Math/MathML");
+    if (isDisplayMode) {
+        math.setAttribute("display", "block");
+    }
 
     // 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]);
 }

package/src/buildTree.js

@@ -13,6 +13,7 @@ const optionsFromSettings = function(settings: Settings) {
     return new Options({
         style: (settings.displayMode ? Style.DISPLAY : Style.TEXT),
         maxSize: settings.maxSize,
+        minRuleThickness: settings.minRuleThickness,
     });
 };
 
@@ -36,12 +37,18 @@ 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, settings.displayMode, true);
+    } else if (settings.output === "html") {
+        const htmlNode = buildHTML(tree, options);
+        katexNode = buildCommon.makeSpan(["katex"], [htmlNode]);
+    } else {
+        const mathMLNode = buildMathML(tree, expression, options,
+            settings.displayMode, false);
+        const htmlNode = buildHTML(tree, options);
+        katexNode = buildCommon.makeSpan(["katex"], [mathMLNode, htmlNode]);
+    }
 
     return displayWrap(katexNode, settings);
 };