How to Enable MathJax Rendering in Sublime Text Markdown Preview

Question

Using Sublime Text 3, I'm writing a Markdown document that includes math. The Markdown Preview package enables real-time rendering of the document in the browser (Chrome). So as I write, the changes are visible. The following is my markdown text.

$a = \sin^{2}(\Delta \phi/2) + \cos(\phi_{1})\cos(\phi_{2})\sin^{2}(\Delta \lambda/2)$
$c = 2 \arcsin(\sqrt{a})$
$d = rc$

MarkdownPreview manual says something like "When enable_mathjax is true", but I cannot figure it out where it is. For completeness, The Sublime console does not display any error message. I'm using Windows 7 and the lastest MathJax fetched from Git. MathJax itself works fine when I displayed some sample test html.

score 25 · Accepted Answer · answered Jan 16 '15 at 14:38

25

Providing MarkdownPreview is installed correctly, one can find option enable_mathjax this way:

enter image description here

Hope this helps.

answered Jan 16 '15 at 14:38

VividD

10,456
6
64
111

1

Wow! It worked beautifully. Thanx much. The default setting was un-editable text. So I added it the option to override it in user's setting. Then it worked beautifully. – Youngsup Kim Jan 16 '15 at 19:59
@YoungsupKim I'm really glad it helped! May I just ask you, if this answer really was helpful and solved your problem, to mark it by clicking check mark in the top left area (below downward arrow)? Thanks! – VividD Jan 16 '15 at 20:23
VividD, Of course! I did. I wish I clicked many times! It was very kind of you making video too! **Thanx much** – Youngsup Kim Jan 16 '15 at 22:03
1

@YoungsupKim, nice, but you didnt accept my answer yet http://stackoverflow.com/help/accepted-answer – VividD Jan 17 '15 at 11:48
Got it done! I was newbie in using stackoverflow...learning everyday. <> – Youngsup Kim Jan 19 '15 at 17:38
@sparkandshine You can use procedure from http://stackoverflow.com/questions/21319398/recording-and-saving-an-svg-animation-as-an-animated-gif/21322489#21322489 – VividD Feb 10 '17 at 14:22

score 10 · Answer 2 · answered May 19 '18 at 22:05

The MarkDown Preview 2.x branch won't work with the method in @VividD answer.

My User Settings, which enables MathJaX is as following:

{
    "enable_mathjax": true,
    "js": [
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js",
    ],
}

Also, using PackageResourceViewer I edited the math_config.js in the js folder of MarkDown Preview to make the Display Math aligned to center:

MathJax.Hub.Config({
  config: ["MMLorHTML.js"],
  extensions: ["tex2jax.js"],
  jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
  tex2jax: {
    inlineMath: [ ['$','$'], ["\\(","\\)"] ],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true
  },
  TeX: {
    extensions: ["AMSmath.js", "AMSsymbols.js"],
    TagSide: "right",
    TagIndent: ".8em",
    MultLineWidth: "85%",
    equationNumbers: {
      autoNumber: "AMS",
    },
    unicode: {
      fonts: "STIXGeneral,'Arial Unicode MS'"
    }
  },
  displayAlign: "center",
  showProcessingMessages: false,
  messageStyle: 'none'
});

Pay attention to displayAlign. At default it is displayAlign: "left".
You can customize MathJaX farther according to MathJaX Options.

This worked great, except for some reason I had to provide another mathjax engine in the User Settings: `"https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"` — oliche, Oct 16 '18 at 21:14
Yet another addentum in addition to @VividD's and @Royi's answers (the CloudFlare mathjax worked for me). I also had to modify the user settings file according to this: https://github.com/facelessuser/MarkdownPreview/issues/12 That is, to user settings I had to add also this: `"markdown_extensions": { "pymdownx.arithmatex": { "generic": true } }` — wjakobw, Jan 17 '19 at 20:44

score 6 · Answer 3 · answered Jan 03 '20 at 19:27

6

As of now, neither of the above answers is working anymore. I finally found a solution in a Github issue which provides an updated version of the code snippet that needs to be added to the MarkdownPreview user settings:

"js": [
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
        "res://MarkdownPreview/js/math_config.js",
],
"markdown_extensions": {
    "pymdownx.arithmatex": {
        "generic": true
    }
}

answered Jan 03 '20 at 19:27

cabeer

115
2
6

This worked partially for me (MathJax was ok but the TOC was not rendering). I found a wiki entry in the MarkdownPreview repository with the full settings: https://github.com/facelessuser/MarkdownPreview/wiki/MathJax-Configuration – Moyom May 15 '20 at 02:07
that worked for me, but now the tables are not working correctly – rambi Sep 09 '20 at 19:09

Wise Man · Answer 4 · 2021-08-21T15:39:47.473

In order to give a more precise answer, open the User Settings of Markdown Preview, now located here :

And add this to the settings :

{
    "enable_mathjax": true,
    "js": [
        "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML",
        "res://MarkdownPreview/js/math_config.js",
    ],
    "markdown_extensions": [
        "markdown.extensions.extra",
        {
            "pymdownx.arithmatex": {
                "generic": true
            }
        },
        {
            "markdown.extensions.toc": {
                "permalink": "\ue157"
            }
        }
        //---- etc.
    ]
}

This allows to keep other extensions active (here Table of Contents), which you can specify in the place of //etc..

score 0 · Answer 5 · answered Sep 08 '22 at 13:52

In more recent versions (today is September 2022) the configuration of this Sublime extension has slightly changed.

But first, note that MathJax support works only in plain "markdown" mode, not "GitHub" nor "GitLab".

Extras - Markdown Preview Documentation:

GitHub and GitLab is not supported with MathJax. You will have to come up with a MathJax config that works for it and escape problematic syntax that GitHub may try to convert.

This said, head to the configuration of the extension (in the menu bar look for "Preferences", then "Package Settings", then "MarkDownPreview").

Then add the following json snippet. Note that a new "markdown" json node has been added halfway, which I believe wasn't there in previous releases:

"enable_mathjax": true,
"js": {
        "markdown": [
            "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js"
        ]
    }

How to Enable MathJax Rendering in Sublime Text Markdown Preview

5 Answers5

Linked