Easy Scientific writing with Markdown.js and MathJax

by Fan Jiang

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

#Hello World

Hello World
$P(E) = {n \choose k} p^k (1-p)^{ n-k} $
Pretty Good isn't it? HAHAHAHAHAHAHAHAHAHAHAHAHA
But$\rm{The\space Performance\space is\space a\space problem}$
If we disable the debug mode then the Performance Would be Better.
Correcting those things may be FINE but the [truth](javascript:alert(truth)) is never to be found.
To be clear.

Or Probably sth like:

  1. In-line math? Not a problem!
  2. Like this:\(\sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1}\)
  3. \(P(E) = {n \choose k} p^k (1-p)^{ n-k} \)

As a list, for all.
Chem as well:
$\rm{C_6H_{12}O_6(s)\xrightarrow{H_2SO_4(conc.)}6C(s)+6H_2O(l)}$