mdmath allows to use Visual Studio Code as a markdown editor capable of typesetting and rendering TeX math. In fact it now reuses the built in markdown viewer. KaTeX works inside as a fast math renderer.

You can install the extension directly from Visual Studio Code Marketplace.

Simplify the process of authoring and live previewing markdown documents containing math formulas. This extension is a comfortable tool for scientists, engineers and students with markdown as their first choice document format.

• Inline math
• Display math
• Formula numbering
• Inline math with tables
• Export resulting HTML code for web usage

• Integrated in native markdown viewer. So after installing the extension, TeX math is properly displayed in the markdown preview window.

• Based on markdown-it plugin markdown-it-texmath.

• Using vscode's Markdown Extension API.

• Editor view and Preview are synchronized while scrolling.

• Heavily reduced code size.

• Due to markdown-it-texmath's support of different formula delimiters, these are also available and user configurable with mdmath:

  • dollars (default)
    • inline $...$
    • display $$...$$
  • brackets
    • inline \(...\)
    • display \[...\]
  • gitlab
    • inline $`...`$
    • display ```math ... ```

• The former test table was moved to markdown-it-texmath.

• Support of Table of contents (ToC) and footnotes removed. Use other extensions instead.

• Breaking Change: Before and after display formulas empty lines are required.

Press F1 key inside of Visual Studio Code and type extension. Choose Extensions: Install Extension and then select the Markdown+Math extension from the list.

cd $HOME/.vscode/extensions
git clone https://github.com/goessner/mdmath.git
cd mdmath
npm install

cd  %USERPROFILE%\.vscode\extensions
git clone https://github.com/goessner/mdmath.git
cd mdmath
npm install

• Launch VS Code, create or open a markdown file (.md).
• Open a preview window.
• Typeset in your markdown source window and see the preview window live updating.
• Press Ctrl+K . or run the command Clip Markdown+Math to HTML to copy the corresponding HTML source to the underlying systems clipboard.

  // Path to custom stylesheet file (css).
  "mdmath.delimiters": "dollars"

• markdown-it: The markdown renderer also used in VS Code.
• katex: This is where credits for fast rendering TeX math in HTML go to.
• clipboardy: Access the system clipboard (copy/paste).

• Which functions does KaTeX support ?
  • See them listed at KaTeX Reference.
• What if I need to use the currency symbol $ also in my markup ?
  • It should be safe to use it. If in doubt escape it.
• What are the restrictions with inline formulas ?
  • Whitespace after opening \$ and before closing \$ is not allowed.
  • Numeric character before opening \$ and after closing \$ is not allowed.
  • At least one character (whitespace ?) is required between two consecutive inline formulas.
  • Line break inside is not allowed.
• What are the restrictions with display formulas ?
  • Not allowed inline of text.
  • Blank lines before and behind rewuired.
  • Restrictions for inline formulas do not apply.
• Can I use math markup in blockquotes ?
  • We can use inline and display formulas in blockquote sections. In order to avoid the blockquote symbol '>' being part of a multiline display formula, display formulas have to be written on a single line in blockquote sections.
• Can I use math markup in code blocks ?
  • In order to prevent converting formulas in code blocks you must escape the enclosing dollars as in \$\frac{a}{b}\$.
• Can I access the HTML source of the markdown file ?
  • Yes. Use the Markdown: Clip Markdown+Math to Html command or the key binding ('ctrl+K .'). Please note, to have the markdown source window activated here (not the preview window!).
• Is PDF output supported ?
  • Not directly. In order to create *.pdf output from your Markdown you can create a *.html document first and print it then using a PDF printer or use Pandoc.
  • See Compiling Markdown into HTML.
• Can I use custom CSS styles for the preview window ?
  • Yes. Set mdmath.style in user settings to the location of your custom CSS file. Its path must be relative to this extension root.

The following folks helped to make mdmath even better.

• TonySFU: Helped with fixing encoding problems with Chinese language under macOS when using mdmath.clipToHtml.
• floatdrop: Verifying that clipboardy is a better alternative to copy-paste by implementing.

See .github/CONTRIBUTING.md

See changelog.md

Markdown+Math for VS Code is licensed under the MIT License

© Stefan Gössner