title: How to use Markdown with MathJax like Math StackExchange
body: <p><strong>UPDATED POST</strong></p>
  
  <p>Ok I've managed to make Markdown and MathJax work together, it was relatively simple actually. I've used <a href="https://github.com/chjj/marked"><code>marked</code></a> together with MathJax. </p>
  
  <pre><code>$(function() {
      var $text       = $("#text"), // the markdown textarea
          $preview    = $("#preview"); // the preview div
  
      $text.on("keyup", function() {
          $preview.html( marked($text.val()) ); // parse markdown
          MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]); // then let MathJax do its job
      })
  });
  </code></pre>
  
  <p>Problem now is: I think markdown is parsing my math 1st before MathJax can change it. How do i fix this? I think its fixed on Math StackOverflow, but how? I need to stop markdown from parsing math</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>This works, but not sure if its the way math.stackexchange does it, but it seems to produce similar/same results with what I tested so far ... </p>
  
  <pre><code>$(function() {
      var $text       = $("#text"),
          $preview    = $("#preview");
  
      $text.on("keyup", function() {
          $preview.html( $text.val() );
          MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
      });
  
      MathJax.Hub.Register.MessageHook("End Process", function (message) {
          $preview.html( marked($preview.html()) );
      });
  });
  </code></pre>
  
  <hr>
  
  <p><strong>OLD POST BELOW</strong> </p>
  
  <p>In the math stackexchange, I can use MathJax with Markdown. I wonder what do I need to do that? I can use a library like <code>marked</code> to render Markdown, but for MathJax, it seems like it just renders on page loads. How can I call it to re-render or better just render whats needed (specified by me)</p>
  
  <pre><code>html = marked("some markdown string") // a HTML string
  // is there something like
  html = MathJax.parse(html)
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I think I should be looking at <a href="http://www.mathjax.org/docs/1.1/typeset.html#manipulating-individual-math-elements">http://www.mathjax.org/docs/1.1/typeset.html#manipulating-individual-math-elements</a>. But when I try </p>
  
  <pre><code>$text.on("keyup", function() {
      $preview.html( marked($text.val()) );
      var math = MathJax.Hub.getAllJax("preview");
      console.log(math);
      MathJax.Hub.Queue(["Text", math, "a+b"]);
  })
  </code></pre>
  
  <p>Where: </p>
  
  <ul>
  <li><code>$text</code>: is the jQuery element for my textarea</li>
  <li><code>$preview</code>: is the preview <code>div</code></li>
  </ul>
  
  <p>I find that <code>math</code> is undefined, so it seems <code>var math = MathJax.Hub.getAllJax("preview")</code> is not working. I have a <code>div#preview</code> btw. </p>