Inline MathJax Not Working

[tangbinh]

MarkdownPreview isn't able to display inline equations, e.g. $f(x) = 5$, even though it works fine with block equations, e.g. \[f(x) = 5\]. I find out from my web browser that MathJax is loaded, but the Javascript file responsible for these inline equations (i.e. math_config.js) is not. Even more strangely, I can't find the Javascript file anywhere inApplication\ Support/Sublime\ Text\ 3/Packages, and there is not even a MarkdownPreview folder as I would expect. So I create a directory for it and download the source code from []the GitHub repo]()https://github.com/facelessuser/MarkdownPreview), but it just ignore any local file.

Can you please let me know what's the right way to resolve this problem? I've been trying everything for several hours but couldn't seem to make it work. Also, it looks like /math_config.js is only for MathJax 2, so can you please confirm if I should replace the Javascript with the block for Generic - MathJax 3 in this webpage? If so, where do I put the script and how can I make it visible to MarkdownPreview? Thank you.

I've installed MarkdownPreview via Package Control and here is my MarkdownPreview-sublime-settings file:

{
    "enabled_parsers": ["markdown"],
    "enable_autoreload": true,
    "js": [
        "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js",
         "res://MarkdownPreview/js/math_config.js"
    ],
    "markdown_extensions": {
        "pymdownx.arithmatex": {
            "generic": false
        }
    }
}

[facelessuser]

The current MathJax release is 2.7.7. You are using the v3 preview, which isn't complete by the way. It also changes a lot of stuff. Checkout the Arithmatex issue for more info: https://github.com/facelessuser/pymdown-extensions/issues/692.

As noted in the issue, it is possible to get v3 to work, but we'd have to update config and JS scripts. The Arithmatex documentation actually shows v2 and v3 script and setup examples: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/.

With that said, we do not currently support the unofficial v3 in Markdown Preview at this time. I will consider this a feature request, but as v3 is not officially done, it is unlikely for me to change scripts at this time.

@gir-bot remove S: triage @gir-bot add T: feature

[tangbinh]

Thank you for your prompt response. Can you please help me test if the current config of MarkdownPreview is still working with MathJax? I have very limited knowledge about JavaScript, but I believe it is outdated. For example, it seems necessary to include the tag type="text/x-mathjax-config" for the MathJax config as in the MathJax documentation, at least for Safari. Also, the config must appear before MathJax is imported.

Here is the chunk of code that was generated by Markdown Preview, which does not work for me.

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/latest.js'></script><script>MathJax.Hub.Config({
  config: ["MMLorHTML.js"],
  extensions: ["tex2jax.js"],
  jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
  tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true,
    processEnvironments: true,
    ignoreClass: ".*|",
    processClass: "arithmatex"
  },
  TeX: {
    extensions: ["AMSmath.js", "AMSsymbols.js"],
    TagSide: "right",
    TagIndent: ".8em",
    MultLineWidth: "85%",
    equationNumbers: {
      autoNumber: "AMS",
    },
    unicode: {
      fonts: "STIXGeneral,'Arial Unicode MS'"
    }
  },
  showProcessingMessages: false,
  messageStyle: 'none'
});
</script>

Another problem that I found is Markdown Preview blindly wrap everything between two underscores between <em> and </em>, even though it is in the middle of an equation. This is very problematic since math equations often have a lot of underscores in LaTeX syntax.

[tangbinh]

Regarding the last issue, I am trying to modify the python-markdown package, especially this line to basically ignore underscores when parsing. However, Markdown Preview doesn't seem to pick up the changes from the modified python-markdown package. Do you know a way to fix it?

[facelessuser]

1. As far as the config is concerned, I don't think I understand what your issue is. I believe the config is fine. Please read our documentation: https://facelessuser.github.io/MarkdownPreview/extras/#mathjax-support.

   This conifg requires generic mode:

       {
           "pymdownx.arithmatex": {
               "generic": true,
           },
       }

2. As far as emphasis is concerned, Python Markdown does not wrap anything in an equation if it is properly captured by Arithmatex. You are doing something wrong with your syntax or your setup. The underscore handling is not the problem. Please post an example of code that you think is not being parsed properly and I may be able to explain why it is not working as you expect it to.

[facelessuser]

Also do not edit the dependencies code, I will not offer support for those kind of changes.

[tangbinh]

Thank you for your help. Indeed, I've read the documentation very carefully. However, I am still unable to make arthimetex work. For examples, these equations are not rendered because of the <em> tags. For example, this line $p^*(x)$ and $$r_\phi(x) = \frac{p^*(x)}{p_\theta(x)}$$ would be translated into <p>$p^<em>(x)$ and $$r_\phi(x) = \frac{p^</em>(x)}{p_\theta(x)}$$</p> because of the superscripts, regardless of whether generic is true or false. Can you please explain to me how to avoid this sort of problems? It's been driving me crazy.

[facelessuser]

It works for me:

using:

$p^*(x)$

$$r_\phi(x) = \frac{p^*(x)}{p_\theta(x)}$$

Here are my current settings:

{
    "allow_css_overrides": true,
    "enable_autoreload": true,
    "browser": "default",
    "css": ["default"],
    "embed_css_for_sublime_output": true,
    "enable_highlight": false,
    "enable_mathjax": true,
    "enabled_parsers": ["markdown", "github"],
    "github_mode": "markdown",
    "markdown_filetypes":
    [
        ".md",
        ".markdown",
        ".mdown"
    ],
    "github_inject_header_ids": true,
    "html_simple": false,
    "parser": "default",
    "build_action": "build",
    "image_path_conversion": "absolute",
    "guess_language": false,
    "show_panel_on_build": true,
    "skip_default_stylesheet": true,
    "strip_yaml_front_matter": true,
    "strip_critic_marks": "accept",
    "markdown_extensions": [
        // Python Markdown Extra with SuperFences.
        // You can't include "extra" and "superfences"
        // as "fenced_code" can not be included with "superfences",
        // so we include the pieces separately.
        "markdown.extensions.footnotes",
        "markdown.extensions.attr_list",
        "markdown.extensions.def_list",
        "markdown.extensions.tables",
        "markdown.extensions.abbr",
        "pymdownx.betterem",
        {
            "markdown.extensions.codehilite": {
                "guess_lang": false
            }
        },
        // Extra's Markdown parsing in raw HTML cannot be
        // included by itself, but "pymdownx" exposes it so we can.
        "pymdownx.extrarawhtml",

        // More default Python Markdown extensions
        {
            "markdown.extensions.toc":
            {
                "permalink": "\ue157"
            }
        },
        "markdown.extensions.meta",
        "markdown.extensions.sane_lists",
        "markdown.extensions.smarty",
        "markdown.extensions.wikilinks",
        "markdown.extensions.admonition",

        // PyMdown extensions that help give a GitHub-ish feel
        {
            "pymdownx.superfences": { // Nested fences and UML support
                "custom_fences": [
                    {
                        "name": "flow",
                        "class": "uml-flowchart",
                        "format": {"!!python/name": "pymdownx.superfences.fence_code_format"}
                    },
                    {
                        "name": "sequence",
                        "class": "uml-sequence-diagram",
                        "format": {"!!python/name": "pymdownx.superfences.fence_code_format"}
                    }
                ]
            }
        },
        {
            "pymdownx.magiclink": {   // Auto linkify URLs and email addresses
                "repo_url_shortener": true,
                "repo_url_shorthand": true
            }
        },
        "pymdownx.tasklist",     // Task lists
        {
            "pymdownx.tilde": {  // Provide ~~delete~~
                "subscript": false
            }
        },
        {
            "pymdownx.emoji": {  // Provide GitHub's emojis
                "emoji_index": {"!!python/name": "pymdownx.emoji.gemoji"},
                "emoji_generator": {"!!python/name": "pymdownx.emoji.to_png"},
                "alt": "short",
                "options": {
                    "attributes": {
                        "align": "absmiddle",
                        "height": "20px",
                        "width": "20px"
                    },
                    "image_path": "https://github.githubassets.com/images/icons/emoji/unicode/",
                    "non_standard_image_path": "https://github.githubassets.com/images/icons/emoji/"
                }
            }
        },
        {
            "pymdownx.mark": {"smart_mark": false}
        },
        {
            "pymdownx.arithmatex": {"generic": true}
        }
    ],
    "js": {
        "markdown": [
            "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js",
            "res://MarkdownPreview/js/math_config.js"
        ]
    }
}

[facelessuser]

Hopefully this helps you figure out what you are doing wrong.

[tangbinh]

Thank you. The problem with <em> seems to be a bit alleviated, although it's not completely gone with your config. I noticed that you have "enable_mathjax": true in your config, which does not appear in the default config at all. Does it make any difference?

Also, with your config, I run into some other problems. If $$f(x) = 5$$ is not preceded and followed by an empty line, the inner part $f(x) = 5$ is translated into an inline equation and the outer dollar signs \( and \(. This is not desirable if the equation is part of a bullet point, since it would make a new paragraph. Also, block equations with \\[ and \\] no longer works for me. And for some markdown file, it crashes Sublime Text. I don't think my math equations are too complex to render, as everything works just fine in a Jupyter notebook.

[tangbinh]

Also, can you please comment on the difference between the markdown parser and github parser? It seems like the latter is particularly worse with Math equations.

[facelessuser]

Again, most of your issues will be fixed if the syntax is followed.

1. enable_mathjax is an old outdated option that no longer exists. You can ignore that.

2. $$...$$ is a block format notation, it should not be used as inline. This is noted here: https://facelessuser.github.io/pymdown-extensions/extensions/arithmatex/#input-format. If you don't use it properly, it will be mistaken as inline $...$, and translate to \(...\) which MathJax more reliably parses compared to $...$. You can read all about how Arithmatex works. If you don't like how $...$ and $$...$$ work, you can change it's configuration to disable $$...$$, $...$, or even both.

3. \[...\] works fine for me in block mode. I'd have to see how you are using it in context of a document explain why you are having issues, but reading Arithmatex's documentation will most likely explain it.

4. markdown uses Python Markdown which uses Arithmatex to preserve math equations as they pass through the markdown parser, so that things like underscores don't get converted to <em> etc. If you use github, it sends your Markdown through GitHub's Markdown API online. It doesn't support LaTeX style math, so it doesn't preserve the equations, so they can get corrupted.

   Also, generic form translation is described here:

[tangbinh]

I really appreciate your help. I do understand the difference between $...$ and $$...$$ and know how to use them. Can you try this chunk of Markdown text:

* This block equation does not work $$g(x) = 6$$.
* This block equation works but it needs two empty lines.

$$g(x) = 6$$

This line should be part of the second bullet point, but it is not.
* Similarly, this block environment need two empty lines

\begin{align} f(x) &= 3 \\ g(x) &= 4 \end{align}

and the text following it should be probably indented.
* This block equation does not work \\[h(x) = 3\\].
* This block equation does not work \[h(x) = 3\].

This is what I got using your config:

[facelessuser]

Block equations should not be used in an inline fashion, but as blocks. I can't stress this enough. This goes for lists as well. Anyways, I can't keep showing examples over and over how ot use the syntax, but one last time I'll demonstrate:

* This block equation works:

    $$g(x) = 6$$

* This block equation works but it needs two empty lines. As expected:

    $$g(x) = 6$$

    This line should be part of the second bullet point, but you have to use it properly.

* Similarly, this block environment need two empty lines because that is how it is supposed work.

    \begin{align} f(x) &= 3 \\ g(x) &= 4 \end{align}

    and the text following it should be probably indented.

* This block equation does not work \\[h(x) = 3\\], but that is because we escaped the syntax.
* This block equation does work if we use block syntax correctly:

    \[h(x) = 3\]

* But I can use inline format too \(h(x) = 3\).

[tangbinh]

Oh god. I didn't know indentation matters that much for Markdown and thought it worked just like a Markdown cell in Jupyter Lab. LaTeX also doesn't care about equations having their own lines, so I obviously had the wrong expectations. I am sorry for bothering you and really appreciate your help. Everything is clear now.

[facelessuser]

No worries, glad you got it sorted :slightly_smiling_face:.