mathpix-markdown-it 2.0.34 → 2.0.36

package/lib/styles/index.js

@@ -9,7 +9,7 @@ var MathpixStyle = function (setTextAlignJustify, useColors, maxWidth, scaleEqua
     if (maxWidth === void 0) { maxWidth = ''; }
     if (scaleEquation === void 0) { scaleEquation = true; }
     if (isPptx === void 0) { isPptx = false; }
-    return "\n    #setText > div {\n        justify-content: inherit;\n        margin-top: 0;\n        margin-bottom: 1em;\n        ".concat(setTextAlignJustify ? 'text-align: justify;' : '', "\n        ").concat(maxWidth ? 'overflow-x: auto;' : '', "\n    }\n    \n    ").concat(maxWidth ? '#setText > blockquote, h1, h2, h3, h4, h5, h6 { overflow-x: auto; }' : '', "\n    \n    ").concat(!isPptx ? '#setText div:last-child {\n        margin-bottom: 0 !important;\n    }' : '', "\n\n    #setText > br, #preview-content br {\n        line-height: 1.2;\n    }\n\n    #preview-content > div {\n        margin-top: 0;\n        margin-bottom: 1em;\n        ").concat(setTextAlignJustify ? 'text-align: justify;' : '', "\n    }    \n    \n    .proof > div, .theorem > div {\n        margin-top: 1rem;\n    }\n\n    #preview-content table {\n      margin-bottom: 1em;\n    }\n\n    #setText table {\n      margin-bottom: 1em;\n    }\n    \n    #preview-content .sub-table table, #setText .sub-table table {\n      margin-bottom: 0;\n    }\n\n    mjx-container {\n      text-indent: 0;\n      overflow-y: hidden;\n      overflow-x: auto;\n      padding-top: 1px;\n      padding-bottom: 1px;\n      ").concat(maxWidth ? 'max-width:' + maxWidth + ';' : '', "\n      ").concat(maxWidth ? 'overflow-x: auto;' : '', "\n    }\n    \n    ").concat(maxWidth ? 'mjx-container[jax="SVG"] > svg { overflow-x: auto; }' : '', "\n    \n    .math-inline mjx-container {\n        display: inline-block !important;\n        page-break-inside: avoid;\n        max-width: 100%;\n        padding: 0;\n        line-height: 0;\n    }\n    .math-inline[data-overflow=\"visible\"] mjx-container {\n      overflow: visible;\n    }\n    .math-inline mjx-container mjx-assistive-mml {\n      max-width: 100%;\n    }\n    .math-block {\n        align-items: center;\n        page-break-after: auto;\n        page-break-inside: avoid;\n        margin: 0;\n        display: block; /* mjx-container has block */\n    }\n    \n    .math-inline {\n      display: inline-flex; /* mjx-container has inline-block. To prevent displacement during use overflow-x: auto;*/\n      max-width: 100%;\n    }\n    \n    .math-block[data-width=\"full\"] {\n      overflow-x: auto;\n      display: flex; /* mjx-container has flex */\n    }\n    \n    svg .math-inline {\n      display: initial;\n      max-width: initial;\n    }\n    \n    svg .math-inline mjx-container {\n      max-width: initial;\n    }\n    \n    svg mjx-container {\n      overflow: visible;\n      padding: 0;\n    }\n    \n    svg math-block[data-width=\"full\"] {\n      overflow: visible;\n    }\n    \n    .math-block,.math-inline {\n      --mmd-highlight-color: ").concat(consts_1.HIGHLIGHT_COLOR, ";\n      --mmd-highlight-text-color: ").concat(consts_1.HIGHLIGHT_TEXT_COLOR, ";\n    }\n\n    .math-block[data-highlight-color] mjx-container[jax=\"SVG\"] > svg {\n      background-color: var(--mmd-highlight-color);\n    }    \n    \n    .math-block[data-highlight-text-color] mjx-container[jax=\"SVG\"] > svg {\n      color: var(--mmd-highlight-text-color);\n    }    \n    .math-inline[data-highlight-color] mjx-container[jax=\"SVG\"] {\n      background-color: var(--mmd-highlight-color);\n    }    \n    \n    .math-inline[data-highlight-text-color] mjx-container[jax=\"SVG\"] {\n      color: var(--mmd-highlight-text-color);\n    }\n    \n    .math-block p {\n        flex-shrink: 1;\n    }\n    .math-block mjx-container {\n        margin: 0 !important;\n    }\n    .math-error {\n        background-color: yellow;\n        color: red;\n    }\n\n    #preview-content img, #setText img {\n        max-width: 100%;\n    }\n    \n    #preview-content blockquote,  #setText blockquote {\n        page-break-inside: avoid;\n        ").concat(useColors ? 'color: #666;' : '', "\n        margin: 0 0 1em 0;\n        padding-left: 3em;\n        border-left: .5em solid #eee;\n    }\n\n    #preview-content pre, #setText pre {\n        border: none;\n        padding: 0;\n        overflow: auto;\n        font-size: 85%;\n        line-height: 1.45;\n        border-radius: 6px;\n        box-sizing: border-box;\n        ").concat(useColors ? 'background: #f8f8fa;' : '', "\n    }\n    #preview-content pre code, #setText pre code{\n        padding: 1rem;\n        display: block;\n        overflow-x: auto;\n        line-height: 24px;\n    }\n    .empty {\n        text-align: center;\n        font-size: 18px;\n        padding: 50px 0 !important;\n    }\n\n    #setText table, #preview-content table {\n        display: table; \n        overflow: auto;\n        max-width: 100%;\n        border-collapse: collapse;\n        page-break-inside: avoid;\n    }\n      \n    #setText table th, #preview-content table th {\n        text-align: center;\n        font-weight: bold;\n    }\n    \n    #setText table td, #preview-content table td,\n    #setText table th, #preview-content table th {\n        border: 1px solid #dfe2e5;\n        padding: 6px 13px;\n    }\n      \n    #setText table tr, #preview-content table tr {\n        ").concat(useColors ? 'background-color: #fff;' : '', "\n        border-top: 1px solid ").concat(useColors ? '#c6cbd1' : 'currentColor', ";\n    }\n    \n    #setText table tr:nth-child(2n), #preview-content table tr:nth-child(2n) {\n        ").concat(useColors ? 'background-color: #f6f8fa;' : '', "\n    }\n    \n    #preview-content .main-title, #setText .main-title {\n        text-align: center;\n        line-height: 1.2;\n        margin: 0 auto 1em auto;\n    }\n\n    #preview-content .author, #setText .author  {\n        text-align: center;\n        margin: 0 auto;\n        display: flex;\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    #preview-content .author p, #setText .author p {\n        min-width: 30%;\n        max-width: 50%;\n        padding: 0 7px;\n    }\n\n    #preview-content .author > p > span, #setText .author > p > span {\n        display: block;\n        text-align: center;\n    }\n\n    #preview-content .section-title, #setText .section-title {\n        margin-top: 1.5em;\n    }\n\n    #preview-content .abstract, #setText .abstract {\n        text-align: justify;\n        margin-bottom: 1em;\n    }\n\n    #preview-content .abstract p, #setText .abstract p {\n        margin-bottom: 0;\n    }\n\n    @media print {\n\n      #preview {\n        font-size: 10pt!important;\n      }\n\n      svg {\n        shape-rendering: crispEdges;\n      }\n\n      .math-block svg, math-inline svg {\n        margin-top: 1px;\n      }\n\n      #preview-content img, #setText img {\n        display: block;\n      }\n      \n      #preview-content .figure_img img, #setText .figure_img img {\n        display: inline;\n      }\n\n      .preview-right {\n        word-break: break-word;\n      }\n\n      #preview-content h1, #setText h1 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h1::after, #setText h1::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h2, #setText h2 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h2::after, #setText h2::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h3, #setText h3 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h3::after, #setText h3::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h4, #setText h4 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h4::after, #setText h4::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h5, #setText h5 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h5::after, #setText h5::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h6, #setText h6 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h6::after, #setText h6::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n    }\n    #preview-content sup, #setText sup {\n      top: -.5em;\n      position: relative;\n      font-size: 75%;\n      line-height: 0;\n      vertical-align: baseline;\n    }\n    \n    #preview-content .text-url, #setText .text-url {\n      ").concat(useColors ? 'color: #0B93ff;' : '', "\n      cursor: text;\n      pointer-events: none;\n    }\n    \n    #preview-content .text-url a:hover, #setText .text-url a:hover {\n      ").concat(useColors ? 'color: #0B93ff;' : '', "\n    }\n    \n    mark {\n      background-color: #feffe6;\n    }\n    \n    span[data-underline-type] mark {\n      background: inherit;\n      background-color: #feffe6;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n    \n    *[data-has-dotfill] {\n      position: relative;\n      overflow: hidden;\n    }\n    \n    *[data-has-dotfill] .dotfill::after {\n      position: absolute;\n      padding-left: .25ch;\n      content: \" . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \";\n      text-align: right;\n    }\n    \n   .smiles {\n     text-align: center;\n   }\n\n   div.svg-container, #setText > div.svg-container {\n      display: flex;\n      justify-content: center;\n   }\n");
+    return "\n    #setText > div {\n        justify-content: inherit;\n        margin-top: 0;\n        margin-bottom: 1em;\n        ".concat(setTextAlignJustify ? 'text-align: justify;' : '', "\n        ").concat(maxWidth ? 'overflow-x: auto;' : '', "\n    }\n    \n    ").concat(maxWidth ? '#setText > blockquote, h1, h2, h3, h4, h5, h6 { overflow-x: auto; }' : '', "\n    \n    ").concat(!isPptx ? '#setText div:last-child {\n        margin-bottom: 0 !important;\n    }' : '', "\n\n    #setText > br, #preview-content br {\n        line-height: 1.2;\n    }\n\n    #preview-content > div {\n        margin-top: 0;\n        margin-bottom: 1em;\n        ").concat(setTextAlignJustify ? 'text-align: justify;' : '', "\n    }    \n    \n    .proof > div, .theorem > div {\n        margin-top: 1rem;\n    }\n\n    #preview-content table {\n      margin-bottom: 1em;\n    }\n\n    #setText table {\n      margin-bottom: 1em;\n    }\n    \n    #preview-content .sub-table table, #setText .sub-table table {\n      margin-bottom: 0;\n    }\n\n    mjx-container {\n      text-indent: 0;\n      overflow-y: hidden;\n      overflow-x: auto;\n      padding-top: 1px;\n      padding-bottom: 1px;\n      ").concat(maxWidth ? 'max-width:' + maxWidth + ';' : '', "\n      ").concat(maxWidth ? 'overflow-x: auto;' : '', "\n    }\n    \n    ").concat(maxWidth ? 'mjx-container[jax="SVG"] > svg { overflow-x: auto; }' : '', "\n    \n    .math-inline mjx-container {\n        display: inline-block !important;\n        page-break-inside: avoid;\n        max-width: 100%;\n        padding: 0;\n        line-height: 0;\n    }\n    .math-inline[data-overflow=\"visible\"] mjx-container {\n      overflow: visible;\n    }\n    .math-inline mjx-container mjx-assistive-mml {\n      max-width: 100%;\n    }\n    .math-block {\n        align-items: center;\n        page-break-after: auto;\n        page-break-inside: avoid;\n        margin: 0;\n        display: block; /* mjx-container has block */\n    }\n    \n    .math-inline {\n      display: inline-flex; /* mjx-container has inline-block. To prevent displacement during use overflow-x: auto;*/\n      max-width: 100%;\n    }\n    \n    .math-block[data-width=\"full\"] {\n      overflow-x: auto;\n      display: flex; /* mjx-container has flex */\n    }\n\n    .math-block[data-width=\"full\"] mjx-container[jax=SVG][display=true] {\n      display: flex;\n      flex: 1 1;\n      justify-content: center;\n    }\n    \n    svg .math-inline {\n      display: initial;\n      max-width: initial;\n    }\n    \n    svg .math-inline mjx-container {\n      max-width: initial;\n    }\n    \n    svg mjx-container {\n      overflow: visible;\n      padding: 0;\n    }\n    \n    svg math-block[data-width=\"full\"] {\n      overflow: visible;\n    }\n    \n    .math-block,.math-inline {\n      --mmd-highlight-color: ").concat(consts_1.HIGHLIGHT_COLOR, ";\n      --mmd-highlight-text-color: ").concat(consts_1.HIGHLIGHT_TEXT_COLOR, ";\n    }\n\n    .math-block[data-highlight-color] mjx-container[jax=\"SVG\"] > svg {\n      background-color: var(--mmd-highlight-color);\n    }    \n    \n    .math-block[data-highlight-text-color] mjx-container[jax=\"SVG\"] > svg {\n      color: var(--mmd-highlight-text-color);\n    }    \n    .math-inline[data-highlight-color] mjx-container[jax=\"SVG\"] {\n      background-color: var(--mmd-highlight-color);\n    }    \n    \n    .math-inline[data-highlight-text-color] mjx-container[jax=\"SVG\"] {\n      color: var(--mmd-highlight-text-color);\n    }\n    \n    .math-block p {\n        flex-shrink: 1;\n    }\n    .math-block mjx-container {\n        margin: 0 !important;\n    }\n    .math-error {\n        background-color: yellow;\n        color: red;\n    }\n\n    #preview-content img, #setText img {\n        max-width: 100%;\n    }\n    \n    #preview-content blockquote,  #setText blockquote {\n        page-break-inside: avoid;\n        ").concat(useColors ? 'color: #666;' : '', "\n        margin: 0 0 1em 0;\n        padding-left: 3em;\n        border-left: .5em solid #eee;\n    }\n\n    #preview-content pre, #setText pre {\n        border: none;\n        padding: 0;\n        overflow: auto;\n        font-size: 85%;\n        line-height: 1.45;\n        border-radius: 6px;\n        box-sizing: border-box;\n        ").concat(useColors ? 'background: #f8f8fa;' : '', "\n    }\n    #preview-content pre code, #setText pre code{\n        padding: 1rem;\n        display: block;\n        overflow-x: auto;\n        line-height: 24px;\n    }\n    .empty {\n        text-align: center;\n        font-size: 18px;\n        padding: 50px 0 !important;\n    }\n\n    #setText table, #preview-content table {\n        display: table; \n        overflow: auto;\n        max-width: 100%;\n        border-collapse: collapse;\n        page-break-inside: avoid;\n    }\n      \n    #setText table th, #preview-content table th {\n        text-align: center;\n        font-weight: bold;\n    }\n    \n    #setText table td, #preview-content table td,\n    #setText table th, #preview-content table th {\n        border: 1px solid #dfe2e5;\n        padding: 6px 13px;\n    }\n      \n    #setText table tr, #preview-content table tr {\n        ").concat(useColors ? 'background-color: #fff;' : '', "\n        border-top: 1px solid ").concat(useColors ? '#c6cbd1' : 'currentColor', ";\n    }\n    \n    #setText table tr:nth-child(2n), #preview-content table tr:nth-child(2n) {\n        ").concat(useColors ? 'background-color: #f6f8fa;' : '', "\n    }\n    \n    #preview-content .main-title, #setText .main-title {\n        text-align: center;\n        line-height: 1.2;\n        margin: 0 auto 1em auto;\n    }\n\n    #preview-content .author, #setText .author  {\n        text-align: center;\n        margin: 0 auto;\n        display: flex;\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n\n    #preview-content .author p, #setText .author p {\n        min-width: 30%;\n        max-width: 50%;\n        padding: 0 7px;\n    }\n\n    #preview-content .author > p > span, #setText .author > p > span {\n        display: block;\n        text-align: center;\n    }\n\n    #preview-content .section-title, #setText .section-title {\n        margin-top: 1.5em;\n    }\n\n    #preview-content .abstract, #setText .abstract {\n        text-align: justify;\n        margin-bottom: 1em;\n    }\n\n    #preview-content .abstract p, #setText .abstract p {\n        margin-bottom: 0;\n    }\n\n    @media print {\n\n      #preview {\n        font-size: 10pt!important;\n      }\n\n      svg {\n        shape-rendering: crispEdges;\n      }\n\n      .math-block svg, math-inline svg {\n        margin-top: 1px;\n      }\n\n      #preview-content img, #setText img {\n        display: block;\n      }\n      \n      #preview-content .figure_img img, #setText .figure_img img {\n        display: inline;\n      }\n\n      .preview-right {\n        word-break: break-word;\n      }\n\n      #preview-content h1, #setText h1 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h1::after, #setText h1::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h2, #setText h2 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h2::after, #setText h2::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h3, #setText h3 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h3::after, #setText h3::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h4, #setText h4 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h4::after, #setText h4::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h5, #setText h5 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h5::after, #setText h5::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n  \n      #preview-content h6, #setText h6 {\n        page-break-inside: avoid;\n        position: relative;\n        border: 2px solid transparent;\n      }\n  \n      #preview-content h6::after, #setText h6::after {\n        content: \"\";\n        display: block;\n        height: 100px;\n        margin-bottom: -100px;\n        position: relative;\n      }\n    }\n    #preview-content sup, #setText sup {\n      top: -.5em;\n      position: relative;\n      font-size: 75%;\n      line-height: 0;\n      vertical-align: baseline;\n    }\n    \n    #preview-content .text-url, #setText .text-url {\n      ").concat(useColors ? 'color: #0B93ff;' : '', "\n      cursor: text;\n      pointer-events: none;\n    }\n    \n    #preview-content .text-url a:hover, #setText .text-url a:hover {\n      ").concat(useColors ? 'color: #0B93ff;' : '', "\n    }\n    \n    mark {\n      background-color: #feffe6;\n    }\n    \n    span[data-underline-type] mark {\n      background: inherit;\n      background-color: #feffe6;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n    \n    *[data-has-dotfill] {\n      position: relative;\n      overflow: hidden;\n    }\n    \n    *[data-has-dotfill] .dotfill::after {\n      position: absolute;\n      padding-left: .25ch;\n      content: \" . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \"\n          \". . . . . . . . . . . . . . . . . . . . . . . \";\n      text-align: right;\n    }\n    \n   .smiles {\n     text-align: center;\n   }\n\n   div.svg-container, #setText > div.svg-container {\n      display: flex;\n      justify-content: center;\n   }\n");
 };
 exports.MathpixStyle = MathpixStyle;
 exports.PreviewStyle = "\n  #preview {\n    font-family: 'CMU Serif', 'Georgia', Helvetica, Arial, sans-serif;\n    font-size: 17px;\n    visibility: visible;\n    word-break: break-word;\n    padding: 2.5em;\n    max-width: 800px;\n    margin: auto;\n    box-sizing: content-box;\n  }\n\n  #preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview strong {\n    font-family: 'CMU Serif Bold', 'Georgia', Helvetica, Arial, sans-serif;\n  }\n\n  #preview  i, #preview  em {\n    font-family: 'CMU Serif Italic', 'Georgia', Helvetica, Arial, sans-serif;\n  }\n";

package/lib/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":";;;AAAA,oDAAkF;AAErE,QAAA,eAAe,GAAG,6DAK9B,CAAC;AACK,IAAM,YAAY,GAAG,UAC1B,mBAAoC,EACpC,SAAyB,EACzB,QAAqB,EACrB,aAAoB,EACpB,MAAc;IAJd,oCAAA,EAAA,2BAAoC;IACpC,0BAAA,EAAA,gBAAyB;IACzB,yBAAA,EAAA,aAAqB;IACrB,8BAAA,EAAA,oBAAoB;IACpB,uBAAA,EAAA,cAAc;IAEd,OAAO,kIAKC,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,uBACjD,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,gCAGvC,QAAQ,CAAC,CAAC,CAAC,qEAAqE,CAAC,CAAC,CAAC,EAAE,yBAErF,CAAC,MAAM,CAAC,CAAC,CAAC,wEAAwE,CAAC,CAAC,CAAC,EAAE,0LASnF,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,yeAyBnD,QAAQ,CAAC,CAAC,CAAC,YAAY,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,qBAC7C,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,gCAGrC,QAAQ,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAC,EAAE,4wCAoD7C,wBAAe,kDACV,6BAAoB,w8BAmC9C,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,iWAc/B,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,w2BAkCvC,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,6CACpB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,qHAI5D,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,myHAgK/C,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,0JAMlC,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,yiCAwCzC,CAAA;AAAA,CAAC,CAAC;AAnZU,QAAA,YAAY,gBAmZtB;AAEU,QAAA,YAAY,GAAG,wiBAmB3B,CAAC;AAEK,IAAM,QAAQ,GAAG,UAAC,aAA6B;IAA7B,8BAAA,EAAA,qBAA6B;IAAK,OAAA,eACtD,aAAa,qsCAoDjB;AArD0D,CAqD1D,CAAC;AArDW,QAAA,QAAQ,YAqDnB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":";;;AAAA,oDAAkF;AAErE,QAAA,eAAe,GAAG,6DAK9B,CAAC;AACK,IAAM,YAAY,GAAG,UAC1B,mBAAoC,EACpC,SAAyB,EACzB,QAAqB,EACrB,aAAoB,EACpB,MAAc;IAJd,oCAAA,EAAA,2BAAoC;IACpC,0BAAA,EAAA,gBAAyB;IACzB,yBAAA,EAAA,aAAqB;IACrB,8BAAA,EAAA,oBAAoB;IACpB,uBAAA,EAAA,cAAc;IAEd,OAAO,kIAKC,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,uBACjD,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,gCAGvC,QAAQ,CAAC,CAAC,CAAC,qEAAqE,CAAC,CAAC,CAAC,EAAE,yBAErF,CAAC,MAAM,CAAC,CAAC,CAAC,wEAAwE,CAAC,CAAC,CAAC,EAAE,0LASnF,mBAAmB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,yeAyBnD,QAAQ,CAAC,CAAC,CAAC,YAAY,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,qBAC7C,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,gCAGrC,QAAQ,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAC,EAAE,06CA0D7C,wBAAe,kDACV,6BAAoB,w8BAmC9C,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,iWAc/B,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,w2BAkCvC,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,6CACpB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,qHAI5D,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,myHAgK/C,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,0JAMlC,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,yiCAwCzC,CAAA;AAAA,CAAC,CAAC;AAzZU,QAAA,YAAY,gBAyZtB;AAEU,QAAA,YAAY,GAAG,wiBAmB3B,CAAC;AAEK,IAAM,QAAQ,GAAG,UAAC,aAA6B;IAA7B,8BAAA,EAAA,qBAA6B;IAAK,OAAA,eACtD,aAAa,qsCAoDjB;AArD0D,CAqD1D,CAAC;AArDW,QAAA,QAAQ,YAqDnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mathpix-markdown-it",
-  "version": "2.0.34",
+  "version": "2.0.36",
   "description": "Mathpix-markdown-it is an open source implementation of the mathpix-markdown spec written in Typescript. It relies on the following open source libraries: MathJax v3 (to render math with SVGs), markdown-it (for standard Markdown parsing)",
   "keywords": [
     "MathJax",
@@ -69,7 +69,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-emotion": "^10.0.0",
-    "speech-rule-engine": "^4.0.2",
+    "speech-rule-engine": "4.0.7",
     "tslib": "^2.6.0",
     "uuid": "^9.0.1"
   },

package/pr-specs/2026-01-html-math-output-options.md

@@ -0,0 +1,529 @@
+# PR: HTML Math Output Options and Browser Render Script
+
+Status: Implemented
+Owner: @OlgaRedozubova
+
+---
+
+## Context
+
+Users exporting HTML from Mathpix products (Snip apps, v3/converter API) receive math rendered as SVG images. Many users want alternative formats:
+- **MathML** for smaller file size and client-side rendering
+- **LaTeX source** for smaller file size and client-side rendering
+
+The current rendering pipeline already generates hidden MathML and LaTeX in the output, but only SVG is visible. Users cannot access the semantic formats without inspecting the HTML source.
+
+Additionally, when users export HTML and open it in a browser, they lose the ability to right-click and copy math in different formats (a feature available in Snip preview).
+
+This PR adds:
+1. Options to control which math format is placed in HTML output
+2. A browser bundle (`auto-render.js`) for client-side rendering with Mathpix's MathJax customizations
+
+Note: Context menu functionality already exists as a separate bundle (`es5/context-menu.js`).
+
+---
+
+## Goal
+
+1. Add `output_format` option to `TOutputMath` interface to control which math format is placed in HTML (SVG, MathML, or LaTeX)
+2. Create a browser bundle (`auto-render.js`) for client-side LaTeX/MathML rendering
+
+---
+
+## Non-Goals
+
+- Changing default behavior (SVG remains default)
+- Changes to DOCX, PDF, or other format rendering
+- Offline bundling of MathJax (CDN approach for LaTeX option)
+
+---
+
+## Current Behavior
+
+### Math Rendering Flow
+
+1. LaTeX input is parsed by markdown-it with mathpix plugin
+2. Math tokens are passed to MathJax for rendering
+3. `OuterHTML` function assembles output with multiple formats
+4. All formats except SVG are hidden with `style="display: none"`
+
+### Current Output Structure
+
+```html
+<span class="math-inline">
+  <latex style="display: none">\( x^2 + y = 1 \)</latex>
+  <mathml style="display: none"><math>...</math></mathml>
+  <asciimath style="display: none">x^2 + y = 1</asciimath>
+  <mathmlword style="display: none">...</mathmlword>
+  <mjx-container jax="SVG"><!-- Visible SVG --></mjx-container>
+</span>
+```
+
+### Current Options
+
+```typescript
+interface TOutputMath {
+  include_mathml?: boolean;
+  include_mathml_word?: boolean;
+  include_asciimath?: boolean;
+  include_latex?: boolean;
+  include_svg?: boolean;
+  include_speech?: boolean;
+  // ... other options
+}
+```
+
+### Key Files
+
+| File | Purpose |
+|------|---------|
+| `src/mathpix-markdown-model/index.ts` | Options interface, main API |
+| `src/mathjax/index.ts` | MathJax rendering, `OuterHTML` assembly |
+| `src/markdown/mdPluginRaw.ts` | `renderMath()` function |
+| `src/markdown/common/convert-math-to-html.ts` | Math token to HTML conversion |
+
+---
+
+## Desired Behavior
+
+### New Option
+
+Add to `TOutputMath` interface:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `output_format` | `'svg' \| 'mathml' \| 'latex'` | `'svg'` | Math format placed in HTML output |
+
+### Behavior by Format
+
+| `output_format` | Server Output | Script Required | Offline |
+|---------------------|---------------|-----------------|---------|
+| `'svg'` (default) | Pre-rendered SVG with hidden formats | No | Yes |
+| `'mathml'` | Native `<math>` elements only | Yes (rendering + features) | No |
+| `'latex'` | Raw LaTeX with original delimiters | Yes (rendering) | No |
+
+### Why Script is Needed for MathML
+
+- **Chrome has no native MathML support** - script provides polyfill
+- **Context menu** - script generates hidden formats for copy functionality
+- **Accessibility** - script adds `<mjx-assistive-mml>` and ARIA attributes (see below)
+- **Consistent rendering** - ensures same appearance across browsers
+
+### Accessibility Options
+
+The `accessibility` config for `auto-render.js` controls how math is made accessible to screen readers.
+
+**Note:** This config format is specific to the browser bundle. Server-side rendering uses the pre-existing `TAccessibility` interface with `assistiveMml: boolean` and `sre: object`.
+
+**Option 1: `{ assistive_mml: true, include_speech: true }` - Speech label + Assistive MathML**
+```html
+<mjx-container class="MathJax" jax="SVG" role="math" tabindex="0"
+               aria-label="a x squared plus b x plus c equals 0">
+  <svg>...</svg>
+  <mjx-assistive-mml unselectable="on" display="inline">
+    <math xmlns="http://www.w3.org/1998/Math/MathML">...</math>
+  </mjx-assistive-mml>
+</mjx-container>
+```
+- `aria-label` contains SRE-generated speech text
+- `<mjx-assistive-mml>` exposes MathML to assistive technologies
+
+**Option 2: `{ assistive_mml: true }` - Assistive MathML only (no speech)**
+```html
+<mjx-container class="MathJax" jax="SVG" role="math" tabindex="0"
+               aria-labelledby="mjx-mml-ml89vyqgk858vbmasab-2">
+  <svg aria-hidden="true">...</svg>
+  <mjx-assistive-mml unselectable="on" display="inline" id="mjx-mml-ml89vyqgk858vbmasab-2">
+    <math xmlns="http://www.w3.org/1998/Math/MathML">...</math>
+  </mjx-assistive-mml>
+</mjx-container>
+```
+- `aria-labelledby` references the `<mjx-assistive-mml>` element by ID
+- Screen readers read the MathML directly
+
+**Option 3: No accessibility config - Not accessible**
+```html
+<mjx-container class="MathJax" jax="SVG">
+  <svg xmlns="http://www.w3.org/2000/svg" role="img" focusable="false" viewBox="...">
+    ...
+  </svg>
+</mjx-container>
+```
+- No `role="math"` or `tabindex` on container
+- No `aria-label` or `aria-labelledby`
+- No `<mjx-assistive-mml>` element
+- SVG has `role="img"` and `focusable="false"` but math is not accessible to screen readers
+
+### Hidden Formats and Context Menu
+
+| `output_format` | Hidden Formats Source | Context Menu |
+|---------------------|----------------------|--------------|
+| `'svg'` | Server-generated via `include_*` options | Reads hidden elements |
+| `'mathml'` | Client-generated by `auto-render.js` | Reads hidden elements |
+| `'latex'` | Client-generated by `auto-render.js` | Reads hidden elements |
+
+**Important:** When `output_format` is `'mathml'` or `'latex'`, the server outputs ONLY the raw format (minimal HTML, no hidden elements, no SVG). The `auto-render.js` script then transforms this into the full structure:
+1. Renders math to SVG via MathJax (`<mjx-container>`)
+2. Generates all hidden format elements for context menu (`<latex>`, `<mathml>`, `<mathmlword>`, `<asciimath>`, `<speech>` with `style="display: none;"`)
+3. Adds accessibility via `<mjx-assistive-mml>` element inside `<mjx-container>`
+
+The pre-existing `context-menu.js` script provides the right-click copy menu by reading these hidden elements.
+
+### Output Examples
+
+**SVG output (`output_format: 'svg'`, default) - Server generates full structure:**
+```html
+<span class="math-inline">
+  <latex style="display: none">ax^2 + bx + c = 0</latex>
+  <mathml style="display: none"><math>...</math></mathml>
+  <mjx-container jax="SVG"><svg>...</svg></mjx-container>
+</span>
+```
+
+**MathML output (`output_format: 'mathml'`) - Server generates minimal output:**
+```html
+<span class="math-inline">
+  <math>...</math>
+</span>
+```
+
+**LaTeX output (`output_format: 'latex'`) - Server generates minimal output:**
+```html
+<!-- Original delimiters from MMD content are preserved -->
+<span class="math-inline">$ ax^2 + bx + c = 0 $</span>
+<!-- or -->
+<span class="math-inline">\( ax^2 + bx + c = 0 \)</span>
+<!-- or for display math -->
+<span class="math-block">$$ ax^2 + bx + c = 0 $$</span>
+```
+
+**After `auto-render.js` processes MathML or LaTeX output - Full structure with all formats:**
+```html
+<span class="math-inline" data-mathpix-typeset="true">
+  <mathml style="display: none;"><math>...</math></mathml>
+  <mathmlword style="display: none;"><math>...</math></mathmlword>
+  <asciimath style="display: none;">ax^(2)+bx+c=0</asciimath>
+  <latex style="display: none;">ax^2 + bx + c = 0</latex>
+  <speech style="display: none;">a x squared plus b x plus c equals 0</speech>
+  <mjx-container class="MathJax" jax="SVG" role="math" tabindex="0"
+                 aria-label="a x squared plus b x plus c equals 0">
+    <svg>...</svg>
+    <mjx-assistive-mml unselectable="on" display="inline">
+      <math xmlns="http://www.w3.org/1998/Math/MathML">...</math>
+    </mjx-assistive-mml>
+  </mjx-container>
+</span>
+```
+
+**Key elements after client-side rendering:**
+| Element | Purpose |
+|---------|---------|
+| `<latex style="display: none;">` | Hidden LaTeX source for context menu copy |
+| `<mathml style="display: none;">` | Hidden MathML for context menu copy |
+| `<mathmlword style="display: none;">` | Hidden Word-compatible MathML for context menu copy |
+| `<asciimath style="display: none;">` | Hidden AsciiMath for context menu copy |
+| `<speech style="display: none;">` | Hidden speech text for context menu copy |
+| `<mjx-container>` | Visible SVG rendering with `role="math"`, `tabindex="0"` |
+| `aria-label` | Speech text (when `include_speech: true`) |
+| `aria-labelledby` | References `<mjx-assistive-mml>` ID (when `assistive_mml: true` only) |
+| `<mjx-assistive-mml>` | Exposes MathML to screen readers (only added when `assistive_mml: true`) |
+
+---
+
+## Implementation
+
+### Part 1: New Option in Interface
+
+**File:** `src/mathpix-markdown-model/index.ts`
+
+Add `output_format` option to `TOutputMath` interface:
+- Type: `'svg' | 'mathml' | 'latex'`
+- Default: `'svg'`
+
+Update `optionsMathpixMarkdown` default values.
+
+### Part 2: Rendering Logic Changes
+
+**File:** `src/markdown/mdPluginRaw.ts`
+
+Modify `renderMath()` function:
+- Check `output_format` option
+- When `'latex'`: return raw LaTeX with original delimiters from the MMD content (preserves `$$`, `$`, `\[\]`, `\(\)`, etc.)
+- When `'svg'` or `'mathml'`: proceed with MathJax rendering
+- Preserve equation numbering context for all formats
+
+**File:** `src/mathjax/index.ts`
+
+Modify `OuterHTML()` function:
+- Check `output_format` option
+- When `'mathml'`: show MathML as primary, hide SVG container
+- When `'svg'`: show SVG as primary (current behavior)
+- Ensure MathML is unwrapped from `<mathml>` wrapper when it's the primary format
+
+**File:** `src/markdown/common/convert-math-to-html.ts`
+
+- Pass `output_format` option through to rendering functions
+- When `'latex'`: bypass MathJax entirely, return raw delimiters
+
+### Part 3: Browser Bundle
+
+Create new directory: `src/browser/`
+
+The browser bundle (`auto-render.js`) serves different purposes depending on the server output format:
+
+| Format | Script Role |
+|--------|-------------|
+| `'svg'` | Not needed - already rendered; script skips elements with existing MathJax output |
+| `'mathml'` | Required - renders MathML to SVG with hidden formats for context menu |
+| `'latex'` | Required - renders LaTeX to SVG with hidden formats for context menu |
+
+**File:** `src/browser/auto-render.ts`
+
+Entry point for client-side processing:
+
+| Export | Description |
+|--------|-------------|
+| `renderMathInElement(element, config)` | Scan and render math in DOM element |
+| `MathpixRender` | Global object exposed on window |
+
+**Configuration interface (`MathpixRenderConfig`) for browser bundle:**
+
+```typescript
+interface MathpixAccessibilityConfig {
+  /** Expose MathJax assistive MathML for screen readers */
+  assistive_mml?: boolean;
+  /** Add aria-label speech string generated by SRE */
+  include_speech?: boolean;
+}
+
+interface MathpixRenderConfig {
+  accessibility: MathpixAccessibilityConfig;
+  outMath: TOutputMath;
+  /** Container width used for layout metrics (cwidth) */
+  width?: number;
+  previewUuid?: string;
+}
+```
+
+**Note:** The browser bundle uses a different accessibility interface than the server-side rendering functions:
+
+| Context | Interface | Fields |
+|---------|-----------|--------|
+| Browser (`auto-render.js`) | `MathpixAccessibilityConfig` | `assistive_mml: boolean`, `include_speech: boolean` |
+| Server/Programmatic | `TAccessibility` | `assistiveMml: boolean`, `sre: object` |
+
+For server-side rendering, you pass the SRE object instance directly rather than a boolean flag.
+
+**Behavior:**
+- On DOMContentLoaded, auto-renders math in `document.body`
+- Searches for `.math-inline` and `.math-block` elements
+- Detects content type: MathML elements or TeX with delimiters (`$$`, `\[\]`, `\(\)`, `$`)
+- Skips already-rendered elements (checks for `data-mathpix-typeset` attribute or MathJax containers)
+- Renders using `MathJax.Typeset()` or `MathJax.TypesetMathML()`
+- Adds accessibility attributes (`aria-label`, `aria-labelledby`, `role="math"`)
+- Marks processed elements with `data-mathpix-typeset="true"`
+
+**Note:** Context menu is a separate pre-existing bundle (`es5/context-menu.js`) that can be included independently.
+
+### Part 4: Build Configuration
+
+**File:** `webpack.config.js`
+
+Added `autoRenderConfig` to existing webpack configuration:
+- Input: `src/browser/auto-render.ts`
+- Output: `es5/browser/auto-render.js`
+- Uses existing TypeScript and Babel loaders
+- Includes NodePolyfillPlugin for browser compatibility
+
+---
+
+## Distribution
+
+Browser bundles included in npm package, accessible via jsdelivr:
+
+| Bundle | Path | Purpose |
+|--------|------|---------|
+| `auto-render.js` | `es5/browser/auto-render.js` | Render MathML/LaTeX to SVG (for `output_format: 'mathml'` or `'latex'`) |
+| `add-speech.js` | `es5/browser/add-speech.js` | Add speech to already-rendered SVG (requires `mjx-assistive-mml` present) |
+| `context-menu.js` | `es5/context-menu.js` | Right-click copy menu (pre-existing, separate bundle) |
+
+CDN URLs:
+- `https://cdn.jsdelivr.net/npm/mathpix-markdown-it@{version}/es5/browser/auto-render.js`
+- `https://cdn.jsdelivr.net/npm/mathpix-markdown-it@{version}/es5/browser/add-speech.js`
+- `https://cdn.jsdelivr.net/npm/mathpix-markdown-it@{version}/es5/context-menu.js`
+
+This follows the existing pattern for `es5/bundle.js`.
+
+---
+
+## Usage Examples
+
+### Server-Side: MathML Output
+
+```typescript
+import { MathpixMarkdownModel } from 'mathpix-markdown-it';
+
+const html = MathpixMarkdownModel.markdownToHTML(mmd, {
+  outMath: {
+    output_format: 'mathml',
+    // Note: include_* options are ignored for 'mathml' format
+    // Hidden formats are generated client-side by auto-render.js
+  }
+});
+// HTML contains only: <span class="math-inline"><math>...</math></span>
+// Include auto-render.js to render SVG and generate hidden formats for context menu
+```
+
+### Server-Side: LaTeX Output (for Client Rendering)
+
+```typescript
+const html = MathpixMarkdownModel.markdownToHTML(mmd, {
+  outMath: {
+    output_format: 'latex',
+    // Note: include_* options are ignored for 'latex' format
+  }
+});
+// HTML contains only: <span class="math-inline">$ ax^2 + bx + c = 0 $</span>
+// Original delimiters from MMD are preserved ($$, $, \[\], \(\), etc.)
+// Include auto-render.js to render SVG and generate hidden formats for context menu
+```
+
+### Client-Side: Auto-Render
+
+```html
+<script>
+  window.MathpixRenderConfig = {
+    accessibility: {
+      assistive_mml: true,
+      include_speech: true
+    },
+    outMath: {
+      output_format: 'svg',
+      include_svg: true,
+      include_latex: true,
+      include_mathml: true,
+      include_asciimath: true,
+      include_mathml_word: true
+    },
+    width: 1200
+  };
+</script>
+<script src="https://cdn.jsdelivr.net/npm/mathpix-markdown-it@latest/es5/browser/auto-render.js"></script>
+<!-- Optional: include context menu for copy functionality -->
+<script src="https://cdn.jsdelivr.net/npm/mathpix-markdown-it@latest/es5/context-menu.js"></script>
+```
+
+### Client-Side: Manual Render
+
+```javascript
+MathpixRender.renderMathInElement(document.getElementById('content'), {
+  accessibility: {
+    assistive_mml: true,
+    include_speech: true
+  },
+  outMath: {
+    output_format: 'svg',
+    include_latex: true,
+    include_mathml: true
+  }
+});
+```
+
+### Client-Side: Add Speech to Already-Rendered SVG
+
+Use `add-speech.js` when math was rendered server-side with `output_format: 'svg'` but without accessibility:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/mathpix-markdown-it@latest/es5/browser/add-speech.js"></script>
+```
+
+Or manually:
+
+```javascript
+// After add-speech.js loads
+MathpixSpeech.addSpeechToRenderedMath(document.getElementById('content'));
+```
+
+This script:
+- Loads SRE (Speech Rule Engine) dynamically
+- Finds all `mjx-container` elements with `mjx-assistive-mml`
+- Adds `aria-label`, `role="math"`, `tabindex="0"` attributes
+- Creates hidden `<speech>` elements for context menu
+
+---
+
+## Constraints / Invariants
+
+- Default behavior unchanged (`output_format: 'svg'`)
+- When `output_format: 'svg'`: server generates full structure with hidden formats via `include_*` options
+- When `output_format: 'mathml'` or `'latex'`: server outputs ONLY the raw format (minimal HTML), `include_*` options are ignored
+- When `output_format: 'latex'`: original delimiters from MMD content are preserved
+- Browser bundle (`auto-render.js`) must work standalone (no external dependencies except DOM)
+- `auto-render.js` is **required** for `'mathml'` and `'latex'` formats to render SVG and generate hidden formats
+- `auto-render.js` skips already-rendered elements (detects MathJax containers, `data-mathpix-typeset` attribute)
+- Only `'svg'` format works fully offline; `'mathml'` and `'latex'` require client-side script
+
+---
+
+## Testing
+
+### Unit Tests
+
+- `output_format: 'svg'` produces full structure with SVG and hidden formats (default behavior)
+- `output_format: 'mathml'` produces minimal output with only native MathML element
+- `output_format: 'latex'` produces minimal output with only raw LaTeX delimiters
+- `include_*` options work only with `'svg'` format (ignored for `'mathml'` and `'latex'`)
+- Inline vs display math handled correctly for all formats
+- Equation numbering preserved with all formats
+
+### Browser Bundle Tests (`auto-render.js`)
+
+- Correctly detects MathML elements inside `.math-inline` / `.math-block`
+- Correctly detects LaTeX delimiters (`$$`, `\[\]`, `\(\)`, `$`)
+- Generates all hidden format elements (`<latex>`, `<mathml>`, `<mathmlword>`, `<asciimath>`, `<speech>`)
+- Renders SVG via `<mjx-container>`
+- Accessibility when `{ assistive_mml: true, include_speech: true }`: adds `role="math"`, `tabindex="0"`, `aria-label`, `<mjx-assistive-mml>`
+- Accessibility when `{ assistive_mml: true }` only: adds `role="math"`, `tabindex="0"`, `aria-labelledby`, `<mjx-assistive-mml>` with ID
+- No accessibility when config not set: no `<mjx-assistive-mml>`, no ARIA attributes
+- Marks processed elements with `data-mathpix-typeset="true"`
+- Skips already-rendered elements
+
+### Integration Tests
+
+- Browser bundle loads without errors
+- Auto-render finds and renders `.math-inline` and `.math-block` elements
+- Already-rendered elements are skipped (detects `data-mathpix-typeset` attribute)
+- MathML input elements are correctly detected and rendered
+
+### Manual Tests
+
+- Verify rendered output matches expected format
+- Test accessibility with screen readers
+- Test MathML and LaTeX input rendering in browser
+
+---
+
+## Done When
+
+- [x] `output_format` option added to `TOutputMath` interface
+- [x] `renderByFormat()` handles all three format values (`'svg'`, `'mathml'`, `'latex'`)
+- [x] `OuterHTML()` shows correct primary format based on option
+- [x] Browser bundle entry point created (`src/browser/auto-render.ts`)
+- [x] Webpack config for browser bundle added to `webpack.config.js`
+- [x] Bundle files included in npm package (`es5/browser/auto-render.js`)
+- [x] Accessibility improvements (`applyMathJaxA11y`, `aria-labelledby` support)
+- [x] `Status` updated to `Implemented`
+- [x] Separate `add-speech.js` bundle for adding speech to already-rendered SVG
+- [x] Shared `addSpeechToMathContainer()` function in `src/sre/index.ts`
+- [x] Changelog updated
+- [x] Unit tests for new options
+- [x] README updated with new options and browser bundle usage
+
+Note: Context menu was already implemented separately (`src/context-menu.tsx` → `es5/context-menu.js`)
+
+---
+
+## Related
+
+- Monorepo PR spec: `monorepo/pr-specs/2026-01-snip-html-export-mathml-option.md`
+- Consumers: mmd-converter (v3/converter API), snip-web, desktop apps