# Working with Markdown in Sublime Text

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

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:

* [`MarkdownPreview`](https://packagecontrol.io/packages/MarkdownPreview)
* [`LiveReload`](https://packagecontrol.io/packages/LiveReload)
* <s>[`PackageResourceViewer`](https://packagecontrol.io/packages/PackageResourceViewer)</s>
* [`MarkdownLivePreview`](https://packagecontrol.io/packages/MarkdownLivePreview)

### 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](https://packagecontrol.io/packages/LiveReload) Sublime Text package is required. See [here](#install-relevant-st-plugins) 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](https://www.mathjax.org/) 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](https://docs.mathjax.org/en/latest/basic/mathjax.html)).

To support LaTeX math, add the following call to the javascripts in the Markdown file
```html
<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 
```latex
$$E = mc^2$$
```

$$E = mc^2$$

but in-line math is not
```latex
$E = mc^2$
```
\\$E = mc^2\\$

To support in-line math, it must be explicitly enabled in the configuration
```html
<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
```html
$E = mc^2$
```

$E = mc^2$

Automatic equation numbering can also be explicitly configured
```html
<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)](https://stackoverflow.com/questions/27972177/how-to-enable-mathjax-rendering-in-sublime-text-markdown-preview)]<br>
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'
	}
});
```

### Resources

* [MarkdownPreview (https://packagecontrol.io/packages/MarkdownPreview)](https://packagecontrol.io/packages/MarkdownPreview)
* [LiveReload (https://packagecontrol.io/packages/LiveReload)](https://packagecontrol.io/packages/LiveReload)
* [Using MarkdownPreview (https://facelessuser.github.io/MarkdownPreview/usage/)](https://facelessuser.github.io/MarkdownPreview/usage/)
* [MathJax (https://www.mathjax.org/)](https://www.mathjax.org/)
* [Custom delimiters for in-line math (https://docs.mathjax.org/en/latest/input/tex/delimiters.html#tex-and-latex-math-delimiters)](https://docs.mathjax.org/en/latest/input/tex/delimiters.html#tex-and-latex-math-delimiters)
* [PackageResourceViewer (https://packagecontrol.io/packages/PackageResourceViewer)](https://packagecontrol.io/packages/PackageResourceViewer)
* [MarkdownPreview MathJax support](https://facelessuser.github.io/MarkdownPreview/extras/#)
* [MarkdownLivePreview](https://packagecontrol.io/packages/MarkdownLivePreview)