CODEWITHSUNDEEP
markdownsublimetextpreviewmathjaxsublime-text-plugin
Youngsup Kim
Youngsup Kim

Reputation: 2235

How to Enable MathJax Rendering in Sublime Text Markdown Preview

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.

Upvotes: 15

Views: 11554

Answers (5)

VividD
VividD

Reputation: 10536

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

enter image description here

Upvotes: 25

Antonio
Antonio

Reputation: 1290

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"
        ]
    }

Upvotes: 0

Wise Man
Wise Man

Reputation: 189

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

enter image description 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..

Upvotes: 2

cabeer
cabeer

Reputation: 115

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
    }
}

Upvotes: 6

Royi
Royi

Reputation: 4953

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 Package​Resource​Viewer 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.

Upvotes: 10

Related Questions