When $ \lim _{n \rightarrow \infty}\left[\left(a_{n}-b_{n}\right)+\left(a_{n}+b_{n}\right)\right]=\lim _{n \rightarrow \infty} 2 a_{n} $, there are two solutions to \( ax^2 + bx + c = 0 \) and
    they are $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$

let updateDocument = Function.prototype;

window.MathJax = {
  loader: { load: ["input/tex", "output/svg"] },
  tex: {
    inlineMath: [
      ["$", "$"],
      ["\\(", "\\)"]
    ]
  },
  options: {
    enableMenu: false,
    renderActions: {
      update: [
        200,
        async function (doc) {
          updateDocument =
            MathJax._.handlers.html.HTMLMathItem.HTMLMathItem.prototype
              .updateDocument;

          const promises = [];
          for (const math of doc.math.reversed()) {
            promises.push(mathSVG2Image(math));
          }
          await Promise.all(promises);
        },
        false
      ]
    }
  }
};

function mathSVG2Image(math) {
  const svg = math.typesetRoot.firstChild;

  if (!svg)
    throw new Error(
      `No SVG element found, please confirm you have configured MathJax output to SVG`
    );

  const latex = `${math.start.delim} ${math.math.trim()} ${math.end.delim}`;

  const encodedData = window.btoa(unescape(encodeURIComponent(svg.outerHTML)));

  const image = new Image();
  image.src = `data:image/svg+xml;base64,${encodedData}`;

  return new Promise((resolve, reject) => {
    image.onload = function () {
      // use canvas for converting svg base64 to png base64
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d", { antialias: false });
      
      const scaleFactor = 5
      const pixelRatio = window.devicePixelRatio || 1;
      
      canvas.width  = image.width * scaleFactor
      canvas.height = image.height * scaleFactor
      context.width *= pixelRatio * scaleFactor
      context.height *= pixelRatio * scaleFactor
      
      context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
      
      context.mozImageSmoothingEnabled = false;
      context.webkitImageSmoothingEnabled = false;
      context.msImageSmoothingEnabled = false;
      context.imageSmoothingEnabled = false;
      
      context.scale(scaleFactor, scaleFactor)
      
      context.drawImage(image, 0, 0);
      
      // document.body.appendChild(canvas)
      
      const imageBase64 = canvas.toDataURL("image/png");

      const imageContainerTag = math.typesetRoot.attributes.getNamedItem(
        "display"
      )
        ? "div"
        : "span";

      const imageEle = math.adaptor.node("img", {
        src: imageBase64,
        alt: latex,
        style: {
          height: svg.height.baseVal.valueAsString,
          width: svg.width.baseVal.valueAsString
        }
      });

      imageEle.classList.add("latex-image");

      // for supermemo 18
      imageEle.setAttribute("onerror", `this.src = '${imageBase64}'`);

      const imageContainer = math.adaptor.node(
        imageContainerTag,
        {
          style: {
            textAlign: "center",
            verticalAlign: "text-top"
          },
          class: "latex-container"
        },
        [imageEle]
      );

      resolve(imageContainer);
    };
  }).then((imageContainer) => {
    math.typesetRoot = imageContainer;
    updateDocument.apply(math);
  });
}