Working with Markdown in Sublime Text#

This note covers working with Markdown in the Sublime Text editor. I’ve tried two ways to edit Markdown files in the Sublime Text (ST) editor. One is to use MarkdownLivePreview + Markdown Extended to get split panels in the ST editor. One panel for the source text and another panel for the rendered content. The second way is to use MarkdownPreview + LiveReload to render in a browser with “live” reload. LaTeX math in Markdown can be enabled by calling MathJax.

Installing the Relevant ST Plugins#

To install a package in ST, just do ctrl + shift + P to open the command palette. Select Package Control: Install Package and then select the relevant package (e.g., MarkdownPreview). Packages to install:

Live Reloading on a Browser#

To preview the markdown content on a browser, use ctrl + shift + P to open the command palette. Select “Markdown Preview: Preview in Browser” and then choose “markdown”.

For “live” reloading (reloads on ctrl + save), some additional steps are required. First, the LiveReload Sublime Text package is required. See here for packages to install. Install LiveReload and restart ST. Then open the command palette again and select LiveReload: Enable/disable plug-ins and choose Simple Reload with delay (400ms). The preview on the browser should now reload with every save.

Live Reloading in Sublime Text Editor#

To set up live reload in ST itself, install the MarkdownLivePreview + Markdown Extended packages. Then to start the preview panel, open command palette and select MarkdownLivePreview: Open Preview. The preview panel will show actual live updating of the content as I type.

Rendering LaTeX equations#

Markdown can be combined with MathJax to render mathematics. MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers (see the docs).

To support LaTeX math, add the following call to the javascripts in the Markdown file

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Default math delimiters are $$...$$ and \[...\] for displayed mathematics, and $...$ for in-line mathematics. The familiar $...$ in-line delimiters are not supported by default.

So this math in display mode is supported

$$E = mc^2$$

$$E = mc^2$$

but in-line math is not

$E = mc^2$

\$E = mc^2\$

To support in-line math, it must be explicitly enabled in the configuration

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
	window.MathJax = {
	  tex: {
	    inlineMath: [['$', '$'], ['\\(', '\\)']]
	  }
	};
</script>

So in-line math should now work

$E = mc^2$

$E = mc^2$

Automatic equation numbering can also be explicitly configured

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
	window.MathJax = {
	  tex: {
	    inlineMath: [['$', '$'], ['\\(', '\\)']],
	    tags: 'ams'
	  }
	};
</script>

\begin{equation}
   E = mc^2
\end{equation}	

\begin{equation}
   y = f(ml)
\end{equation}

\begin{equation} E = mc^2 \end{equation}

\begin{equation} y = f(ml) \end{equation}

Rendering LaTeX Equations Permanently#

[*No longer seems to work for me (see this)]
The above calls to the MathJax javascripts and configurations can be permanently set into ST settings. So new Markdown files do not require explicit calls to the scripts.

MarkdownPreview allows for this through its settings. Go to menu -> Preferences -> Package Settings -> Markdown Preview -> Settings. Add the following to the config file

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

The custom configuration for in-line math can be added using PackageResourceViewer. Open command palette and select PackageResourceViewer -> Open Resource -> MarkdownPreview -> js -> math_config.js. Then add the following to the config file.

MathJax.Hub.Config({
	tex: {
	  inlineMath: [['$', '$'], ['\\(', '\\)']],
	  tags: 'ams'
	}
});

Working with Markdown in Sublime Text

Sections