LaTex fomula lines not Breaking about vscode-markdown-pdf

[karutt]

I've encountered the same conversion issues in markdown-pdf that have been mentioned. Specifically, the transformation of & to &, \\ to \, and new lines to <br />, significantly impacts MathJax rendering, with the double backslashes being a notable concern.

As a workaround, I've added the following code to template.html, which avoids these issues by replacing certain characters within LaTeX blocks. However, this approach feels like a temporary fix rather than a robust solution.

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var pElements = document.querySelectorAll("p");
        pElements.forEach(function (element) {
            var html = element.innerHTML;
            var updatedHtml = html.replace(
                /(\$\$?)([\s\S]+?)\1/g,
                function (match, delimiter, code) {
                    var newCode = code
                        .replace(/&amp;/g, "&")
                        .replace(/<br>/g, "")
                        .replace(/\\(?![a-zA-Z])/g, "\\\\"); // Convert \ at the end of a sentence to \, but exclude \frac etc.
                    return delimiter + newCode + delimiter;
                }
            );
            element.innerHTML = updatedHtml;
        });
    });
</script>

[marcdus]

Thank you @karutt for the workaround script, I am encountering the same issue. I don't quite understand though where I need to put it for the script to be applied. I tried in template.html right before {{{body}}} (and after some already existing mermaid script), as well as at the beginning of my document. However, I don't see a change in the pdf or html output. For example:

$$
\begin{align}
v_{i+1} &= 
\underbrace{M \cdot v_i}_{\text{momentum}} - 
\underbrace{\eta \cdot \left \langle \frac{\partial L}{\partial w} |_{w_i} \right \rangle_{D_i}}_{\text{gradient}} - 
\underbrace{\mu \cdot \eta \cdot w_i}_\text{weight decay} \\
w_{i+1} &= w_i + v_{i+1}
\end{align}
$$

still becomes:

<p>$$
\begin{align}
v_{i+1} &amp;=
\underbrace{M \cdot v_i}<em>{\text{momentum}} -
\underbrace{\eta \cdot \left \langle \frac{\partial L}{\partial w} |</em>{w_i} \right \rangle_{D_i}}<em>{\text{gradient}} -
\underbrace{\mu \cdot \eta \cdot w_i}</em>\text{weight decay} \
w_{i+1} &amp;= w_i + v_{i+1}
\end{align}
$$</p>

[karutt]

The complete code, including the loading of MathJax, is as follows. Please copy this and add it to the bottom of the head tag in your template.js file.

<script>
    window.onload = function () {
        var pElements = document.querySelectorAll("p");
        pElements.forEach(function (element) {
            var html = element.innerHTML;
            var updatedHtml = html.replace(
                /(\$\$?)([\s\S]+?)\1/g,
                function (match, delimiter, code) {
                    var newCode = code
                        .replace(/&amp;/g, "&")
                        .replace(/<br>/g, "")
                        .replace(/<em>/g, "_")
                        .replace(/<\/em>/g, "_")
                        .replace(/\\(?![a-zA-Z])/g, "\\\\"); // Convert \ at the end of a sentence to \, but exclude \frac etc.
                    return delimiter + newCode + delimiter;
                }
            );
            element.innerHTML = updatedHtml;
        });
        window.MathJax = {
            tex: {
                inlineMath: [["$", "$"]],
            },
            svg: {
                fontCache: "global",
            },
        };

        (function () {
            var script = document.createElement("script");
            script.src =
                "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js";
            script.async = true;
            document.head.appendChild(script);
        })();
    };
</script>

Additionally, I noticed an issue while running your sample LaTeX code: in certain cases, _ is converted to <em> among others. I have corrected this issue as well.

[marcdus]

Alright, that worked. Thanks a bunch!

[shyu216]

<script>
    window.onload = function () {
        var pElements = document.querySelectorAll("p");
        pElements.forEach(function (element) {
            var html = element.innerHTML;
            var updatedHtml = html.replace(
                /(\$\$?)([\s\S]+?)\1/g,
                function (match, delimiter, code) {
                    var newCode = code
                        .replace(/&amp;/g, "&")
                        .replace(/<br>/g, "")
                        .replace(/<em>/g, "*") // Multiplication sign
                        .replace(/<\/em>/g, "*")
                        .replace(/\\(?![a-zA-Z])/g, "\\\\"); // Convert \ at the end of a sentence to \, but exclude \frac etc.
                    return delimiter + newCode + delimiter;
                }
            );
            element.innerHTML = updatedHtml;
        });
        window.MathJax = {
            tex: {
                inlineMath: [["$", "$"]],
            },
            svg: {
                fontCache: "global",
            },
        };
        (function () {
            var script = document.createElement("script");
            script.src =
                "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js";
            script.async = true;
            document.head.appendChild(script);
        })();
    };
</script>

Thanks a lot! There are some modification for my case (just for personally backup):

1. remove newline before " (function () { "...
2. replace "" by "*"