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 = exports.COLOR_CODE_BG = void 0;
var consts_1 = require("../markdown/common/consts");
var colors_1 = require("./colors");
var colors_2 = require("./colors");
Object.defineProperty(exports, "COLOR_CODE_BG", { enumerable: true, get: function () { return colors_2.COLOR_CODE_BG; } });
exports.resetBodyStyles = "\nbody {\n  margin: 0;\n  line-height: normal;\n}\n";
var layoutStyles = function (_a) {
    var setTextAlignJustify = _a.setTextAlignJustify, maxWidth = _a.maxWidth, isPptx = _a.isPptx;
    var justify = setTextAlignJustify ? 'text-align: justify;' : '';
    return [
        "\n#setText > div {\n  justify-content: inherit;\n  margin-top: 0;\n  margin-bottom: 1em;\n  ".concat(justify, "\n  ").concat(maxWidth ? 'overflow-x: auto;' : '', "\n}"),
        maxWidth && "\n#setText > blockquote,\n#setText > h1, #setText > h2, #setText > h3,\n#setText > h4, #setText > h5, #setText > h6 {\n  overflow-x: auto;\n}",
        !isPptx && "\n#setText div:last-child {\n  margin-bottom: 0 !important;\n}",
        "\n#setText > br, #preview-content br {\n  line-height: 1.2;\n}",
        "\n#preview-content > div {\n  margin-top: 0;\n  margin-bottom: 1em;\n  ".concat(justify, "\n}"),
        "\n.proof > div,\n#preview-content .proof > div, #setText .proof > div,\n.theorem > div,\n#preview-content .theorem > div, #setText .theorem > div {\n  margin-top: 1rem;\n}",
    ].filter(Boolean).join('');
};
var mathStyles = function (maxWidth) { return [
    "\nmjx-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: ".concat(maxWidth, ";") : '', "\n}"),
    maxWidth && "\nmjx-container[jax=\"SVG\"] > svg {\n  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;\n}\n.math-inline {\n  display: inline-flex;\n  max-width: 100%;\n}\n.math-block[data-width=\"full\"] {\n  overflow-x: auto;\n  display: flex;\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}\nsvg .math-inline {\n  display: initial;\n  max-width: initial;\n}\nsvg .math-inline mjx-container {\n  max-width: initial;\n}\nsvg mjx-container {\n  overflow: visible;\n  padding: 0;\n}\nsvg .math-block[data-width=\"full\"] {\n  overflow: visible;\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.math-block[data-highlight-color] mjx-container[jax=\"SVG\"] > svg {\n  background-color: var(--mmd-highlight-color);\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.math-inline[data-highlight-text-color] mjx-container[jax=\"SVG\"] {\n  color: var(--mmd-highlight-text-color);\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: ").concat(colors_1.COLOR_MATH_ERROR_BG, ";\n  color: ").concat(colors_1.COLOR_MATH_ERROR_TEXT, ";\n}"),
].filter(Boolean).join(''); };
var imageStyles = function () { return "\n#preview-content img, #setText img {\n  max-width: 100%;\n}"; };
var blockquoteStyles = function (useColors) { return "\n#preview-content blockquote, #setText blockquote {\n  page-break-inside: avoid;\n  ".concat(useColors ? "color: ".concat(colors_1.COLOR_BLOCKQUOTE_TEXT, ";") : '', "\n  margin: 0 0 1em 0;\n  padding-left: 3em;\n  border-left: .5em solid ").concat(useColors ? colors_1.COLOR_BLOCKQUOTE_BORDER : 'currentColor', ";\n}"); };
var codeBlockStyles = function (useColors) { return "\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: ".concat(colors_1.COLOR_CODE_BG, ";") : '', "\n}\n#preview-content pre code, #setText pre code {\n  padding: 1rem;\n  display: block;\n  overflow-x: auto;\n  line-height: 24px;\n}"); };
var tableStyles = function (useColors) { return "\n#preview-content table, #setText table {\n  display: table;\n  overflow: auto;\n  max-width: 100%;\n  border-collapse: collapse;\n  page-break-inside: avoid;\n  margin-bottom: 1em;\n}\n#preview-content table th, #setText table th {\n  text-align: center;\n  font-weight: bold;\n}\n#preview-content table td, #setText table td,\n#preview-content table th, #setText table th {\n  border: 1px solid ".concat(useColors ? colors_1.COLOR_TABLE_BORDER : 'currentColor', ";\n  padding: 6px 13px;\n}\n#preview-content table tr, #setText table tr {\n  ").concat(useColors ? "background-color: ".concat(colors_1.COLOR_TABLE_ROW_BG, ";") : '', "\n  border-top: 1px solid ").concat(useColors ? colors_1.COLOR_TABLE_ROW_BORDER : 'currentColor', ";\n}\n#preview-content table tr:nth-child(2n), #setText table tr:nth-child(2n) {\n  ").concat(useColors ? "background-color: ".concat(colors_1.COLOR_TABLE_ROW_ALT_BG, ";") : '', "\n}"); };
var docStructureStyles = function () { return "\n.main-title,\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.author,\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.author p,\n#preview-content .author p, #setText .author p {\n  min-width: 30%;\n  max-width: 50%;\n  padding: 0 7px;\n}\n.author > p > span,\n#preview-content .author > p > span, #setText .author > p > span {\n  display: block;\n  text-align: center;\n}\n.section-title,\n#preview-content .section-title, #setText .section-title {\n  margin-top: 1.5em;\n}\n.abstract,\n#preview-content .abstract, #setText .abstract {\n  text-align: justify;\n  margin-bottom: 1em;\n}\n.abstract p,\n#preview-content .abstract p, #setText .abstract p {\n  margin-bottom: 0;\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}"; };
var inlineTextStyles = function (useColors) { return "\n.text-url,\n#preview-content .text-url, #setText .text-url {\n  ".concat(useColors ? "color: ".concat(colors_1.COLOR_LINK, ";") : '', "\n  cursor: text;\n  pointer-events: none;\n}\n.text-url a:hover,\n#preview-content .text-url a:hover, #setText .text-url a:hover {\n  ").concat(useColors ? "color: ".concat(colors_1.COLOR_LINK, ";") : '', "\n}\nmark,\n#preview-content mark, #setText mark {\n  ").concat(useColors ? "background-color: ".concat(colors_1.COLOR_MARK_BG, ";") : '', "\n}\nspan[data-underline-type] mark,\n#preview-content span[data-underline-type] mark,\n#setText span[data-underline-type] mark {\n  background: inherit;\n  ").concat(useColors ? "background-color: ".concat(colors_1.COLOR_MARK_BG, ";") : '', "\n  padding-top: 0;\n  padding-bottom: 0;\n}"); };
var miscStyles = function () { return "\n*[data-has-dotfill] {\n  position: relative;\n  overflow: hidden;\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.smiles,\n#preview-content .smiles, #setText .smiles {\n  text-align: center;\n}\ndiv.svg-container,\n#preview-content > div.svg-container,\n#setText > div.svg-container {\n  display: flex;\n  justify-content: center;\n}"; };
var printStyles = function () { return "\n@media print {\n  #preview {\n    font-size: 10pt !important;\n  }\n  .math-block svg, .math-inline svg {\n    shape-rendering: crispEdges;\n    margin-top: 1px;\n  }\n  #preview-content img, #setText img {\n    display: block;\n  }\n  #preview-content .figure_img img, #setText .figure_img img {\n    display: inline;\n  }\n  #preview-content h1, #preview-content h2, #preview-content h3,\n  #preview-content h4, #preview-content h5, #preview-content h6,\n  #setText h1, #setText h2, #setText h3,\n  #setText h4, #setText h5, #setText h6 {\n    page-break-inside: avoid;\n    position: relative;\n    border: 2px solid transparent;\n  }\n  #preview-content h1::after, #preview-content h2::after, #preview-content h3::after,\n  #preview-content h4::after, #preview-content h5::after, #preview-content h6::after,\n  #setText h1::after, #setText h2::after, #setText h3::after,\n  #setText h4::after, #setText h5::after, #setText h6::after {\n    content: \"\";\n    display: block;\n    height: 100px;\n    margin-bottom: -100px;\n    position: relative;\n  }\n}"; };
var MathpixStyle = function (setTextAlignJustify, useColors, maxWidth, isPptx) {
    if (setTextAlignJustify === void 0) { setTextAlignJustify = false; }
    if (useColors === void 0) { useColors = true; }
    if (maxWidth === void 0) { maxWidth = ''; }
    if (isPptx === void 0) { isPptx = false; }
    return [
        layoutStyles({ setTextAlignJustify: setTextAlignJustify, maxWidth: maxWidth, isPptx: isPptx }),
        mathStyles(maxWidth),
        imageStyles(),
        blockquoteStyles(useColors),
        codeBlockStyles(useColors),
        tableStyles(useColors),
        docStructureStyles(),
        inlineTextStyles(useColors),
        miscStyles(),
        printStyles(),
    ].join('');
};
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#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#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  #").concat(containerName, " { display: none; }\n}\n@media print {\n  #").concat(containerName, " { display: none; }\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: ").concat(colors_1.COLOR_TOC_SUBTITLE, ";\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: ").concat(colors_1.COLOR_TOC_LINK, ";\n}\n#toc_container li a:hover {\n  color: ").concat(colors_1.COLOR_TOC_LINK_HOVER, ";\n}\n#toc_container li a:active,\n#toc_container li .selected {\n  color: ").concat(colors_1.COLOR_TOC_LINK_ACTIVE, " !important;\n}\n");
};
exports.TocStyle = TocStyle;
//# sourceMappingURL=index.js.map