View Math Equations in Markdown With Dropbox Image Hosting

Goal

I wanted to show math equations in my github README.md

Update: I now use MathJax to view math equations in markdown. I use dropbox to show images in this blog.

How to show math equations in the browser

To do this, I was going to use MathML, which
is an XML-based syntax for mathematical symbols to render in browsers.
Unfortunately, markdown does NOT support MathML
☹

How to show math equations in markdown

My work around was to convert the equations into images, host them somewhere and embed them in my README.md file.

You will need:

  1. An editor that is able to render MathML equations. (I use mouapp)
  2. Dropbox or Google Drive to host your images for free. (I’ll be using dropbox)

Steps:

1) Copy the your MathML into your markdown editor (example below):
2) Take a screenshot of the rendered equation

(On Mac, to take an area-selected screenshot: command + shift + 4)
3) Place it in your dropbox folder and “Share Dropbox Link”:
image

4) Copy the link and add ?dl=1 at the end of the url to make it viewable when embedded in markdown:

https://www.dropbox.com/s/{guid}/equation1.png?dl=1

5) Add it to your markdown!

![image](https://www.dropbox.com/s/{guid}/share-dropbox-link.png?dl=1)

To center the image in markdown, you will have to use HTML:

p align="center"
  img src="https://www.dropbox.com/s/{guid}/{}.png?dl=1"
/p



6) Done! You have hosted your image with dropbox and embedded it
into your README.md for viewing on github