mathpix-markdown-it/lib/styles/index.js

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)

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TocStyle = exports.PreviewStyle = exports.MathpixStyle = exports.resetBodyStyles = void 0;
var consts_1 = require("../markdown/common/consts");
exports.resetBodyStyles = "\n  body {\n    margin: 0;\n    line-height: normal;\n  }\n";
var MathpixStyle = function (setTextAlignJustify, useColors, maxWidth, scaleEquation, isPptx) {
    if (setTextAlignJustify === void 0) { setTextAlignJustify = false; }
    if (useColors === void 0) { useColors = true; }
    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");
};
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";
var TocStyle = function (containerName) {
    if (containerName === void 0) { containerName = 'toc'; }
    return "\n  #".concat(containerName, " {\n    width: 25%;\n    overflow-y: auto;\n    min-width: 370px; \n  }\n  @media only screen and (max-width: 960px) {\n    #{containerName}  {\n      display: none; \n    } \n  }\n  @media print {\n    #{containerName}  {\n      display: none; \n    } \n  } \n  #toc_container {\n    padding: 70px 0 0 60px; \n  }\n  #toc_container .toc-title-1 {\n    font-weight: 500; \n  }\n  #toc_container .toc-title-1 a {\n    font-size: 1.6em; \n  }\n  #toc_container .toc-title-2 a {\n    font-size: 1.3em; \n  }\n  #toc_container .toc-title-3,  #toc_container .toc-title-4,  #toc_container .toc-title-5, .previewPage #toc_container .toc-title-6 {\n    padding-left: 20px; \n  }\n  #toc_container .toc-title-3 a,  #toc_container .toc-title-4 > a,  #toc_container .toc-title-5 > a, .previewPage #toc_container .toc-title-6 > a {\n    font-size: 1em;\n    color: #979797; \n  }\n  #toc_container ul {\n    list-style: none;\n    padding: 0;\n    margin: 0; \n  }\n  #toc_container li {\n    padding-top: 20px; \n  }\n  #toc_container li a {\n    color: #000; \n  }\n  #toc_container li a:hover {\n    color: #0093FF; \n  }\n  #toc_container li a:active,\n  #toc_container li .selected {\n    color: #047DD6 !important; \n  }\n");
};
exports.TocStyle = TocStyle;
//# sourceMappingURL=index.js.map