Easy Scientific writing with Markdown.js and MathJax

Using the two libraries, we can do things in a easier way (^_^)
But if you want to use it in wordpress, you have to first disable the automatic formatting of the Wordpress Editor.
I achieved this goal by installing the plugin TextControl.


Actually, using MathJax independently on multiple posts and/or with markdown.js needs some tricks, as far as I have seen. First you have to be careful about the initial rendering of MathJax. By default it scans your DOM for predefined startup signs and render them, which will completely destruct your Markdown code. So you have to first include:
(Notice the skipStartupTypeset property)

<script src="/js/markdown-js/markdown.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    "HTML-CSS": {
      imageFont: null,
      tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
    } ,
    skipStartupTypeset: true
  });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

 

I set two <div>s, one is empty for output, another one with a style="display:none", where I store the Markdown code.

<div id="24ad87ecf_out">
</div>
<div id="24ad87ecf" style="display:none">
  <!-- Here is the Markdown code -->
</div>

Then we can schedule the page rendering:

function Editor(preview) {
  jQuery("#24ad87ecf_out").html(markdown.toHTML(preview.innerHTML));
  //The 24ad87ecf_out here is the id of the div you want to show contents in
  var math_24ad87ecf = document.getElementById("24ad87ecf_out");
  setTimeout(function(){
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, math_24ad87ecf]);
    },1000);
}
Editor(document.getElementById("24ad87ecf"));
//The 24ad87ecf here is the id of the div you put the markdown code

 
Notice How This Page is Rendered~

And Look the source of this page for details.

This is the Sample output