MathJax with Markdownpad 2

As I said before, Markdownpad 2 Rules. One thing that was missing was math markup of any kind. I take a lot of school notes and find myself wishing I could type out math notation instead of needing to resort to pen and paper. A post on the MarkdownPad 2 forums said using MathJax was a possibility so I looked into and decided to write up a little guide.

Step 1 of 1

Add MathJax CDN to the Head section of the generated HTML, per the MathJax documentation. The HTML Head section is under Tools > Options > Advanced > HTML Head Editor in MarkdownPad 2.

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

And that’s it! I can now add TeX or MathML to my markdown docs and get MathJax-formatted output in the resulting HTML documents.

The only “gotcha” that I found was that the default delimiters for inline TeX or LaTex are \( and \), which MarkdownPad 2 will eat as an escape sequence, so we need to escape the slashes as so: \\( and\\).

Example

When I type the following into MarkdownPad 2:

When \\( a \ne 0 \\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are:
$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

It should appear as below once rendered in a browser (F6 to preview):

When a \ne 0 , there are two solutions to ax^2 + bx + c = 0  and they are:

x = {-b \pm \sqrt{b^2-4ac} \over 2a}

WordPress

WordPress.com doesn’t support a hot-linked JavaScript library, or any JavaScript, so we’ll need to manually convert our delimiters to the WordPress.com latex syntax.  Wordpress.org users can install a MathJax plugin instead and hopefully avoid these manual updates.

Conclusion

The only thing I’m missing is a live preview from within MarkdownPad 2, but I’m willing to live without that as long as I can turn in math homework without picking up a pencil.  Now I’ve got a whole boatload of TeX/LaTex syntax to learn!

9 thoughts on “MathJax with Markdownpad 2

  1. Really awesome, I downloaded sooo many programs to do what you just explained!! Thank you so much, let’s hope your suggestions will be oncluded in the next MarkDownPad2 update! 🙂

    1. That’s correct. It’s not perfect, sadly, since MarkdownPad doesn’t render javascript, meaning it won’t use the MathJax script to do processing in the live preview. So it won’t help if you want your own notes or work to quickly look over, but if you need some way quick and dirty to hand in a homework assignment or render a paper for PDF/web, it’s handy.

      1. There are a lot of other Markdown editors that do support math. Typora is my favorite so far. Also Abricotine, stackedit.io, hackmd.io, madoko, and marxi.co. The latter render math as images though which kind of sucks.

      2. Hey, thanks for the heads up! I might check some of those out. I picked MarkdownPad out as a nice editor first for writing and got hooked on it, so it was an afterthought to try to get the math working.

      3. After using Typora for a few days it seems to have a bunch of other bugs with MD rendering, unfortunately. Sad; it looks really nice otherwise.

  2. Hi. It is not working for me. I guess im pasting the header wrongly:

    I just copy pasted what the header you suggested

    <script type="text/// <![CDATA[
    // <![CDATA[
    // ]]>
    javascript”
    // ]]>
    src=”http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML”>

    the result is that when I preview in browser, at the begining of the document this appears

    javascript” // ]]> src=”http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML”>

    Sorry, might be something stupit, im new with html.

    Thanks!

  3. MathJax offer the possibility to change the delimiters of the formula. They can be set to $…$ and $$…$$ which is better in Markdown. See the documentation on the MathJax web site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s