title: Render mathjax dynamically
body: <p>I want to display formulas with MathJax and edit them with CKEditor's <a href="http://ckeditor.com/addon/mathjax" rel="noreferrer">Mathematical Formulas</a>. However when I switch from edit mode to display mode the formulas appear blank (being initially and in the edit mode displayed properly). I've been able to reduce it to a small jsfiddle:</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/franciscop/9BCGx/" rel="noreferrer"><strong>JSFiddle</strong></a></p>
  </blockquote>
  
  <p>Steps to reproduce it:</p>
  
  <ol>
  <li>Enter the <a href="http://jsfiddle.net/franciscop/9BCGx/" rel="noreferrer">JSFiddle</a>. See how the formula is properly displayed.</li>
  <li>Click on the <kbd>Edit</kbd> button and somewhere in the text. You will be able to edit the formula in TeX and the surrounding text. Note: I'm using for the jsfiddle a CDN without the Mathematical Formulas plugin, however it doesn't affect the behaviour.</li>
  <li>Click anywhere blank in the display rectangle to hide the CKEditor instance.</li>
  <li>Now you can click the <kbd>Save</kbd> button. As you can see, the formula is not displayed anymore.</li>
  </ol>
  
  <p>However if you inspect the element you'll see how the initial code in the step 1 and the one after this step is the same but now it's not shown.</p>
  
  <p>The HTML code:</p>
  
  <pre><code>&lt;div id = "fullarticle" contenteditable = "false"&gt;
      &lt;p&gt;Some text&lt;/p&gt;
      &lt;span class = "math-tex"&gt;
          \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
      &lt;/span&gt;
      &lt;p&gt;Some more text&lt;/p&gt;
  &lt;/div&gt;
  &lt;button class = "edit"&gt;Edit&lt;/button&gt;
  &lt;button class = "save"&gt;Save&lt;/button&gt;
  </code></pre>
  
  <p>The javascript code:</p>
  
  <pre><code>$(".edit").click(function(){
    $(".math-tex").each(function(index){
      $(this).html("\\(" + $(this).find("script").html() + "\\)");
      });
    $("#fullarticle").attr("contenteditable", "true");
    CKEDITOR.inline('fullarticle');
    });
  
  $(".save").click(function(){
    var mytext = CKEDITOR.instances.fullarticle.getData();
    $("#fullarticle").html(mytext).attr("contenteditable", "false");
    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    for(k in CKEDITOR.instances) {
      var instance = CKEDITOR.instances[k];
      instance.destroy();
      }
    });
  </code></pre>
  
  <p>Edit:</p>
  
  <p>After some testing, I can confirm it has to do to the fact that I'm mixing CKEditor and MathJax, since in <a href="http://jsfiddle.net/franciscop/9BCGx/1/" rel="noreferrer">this fiddle</a> the issue cannot be seen.</p>