title: Render TeX with KaTeX or MathJax
body: <p>I have a html document</p>
  
  <pre><code>&lt;div&gt;
    &lt;p&gt;One paragraph&lt;/p&gt;
    &lt;p&gt;Another paragraph&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and in some of the paragraphs, I have</p>
  
  <pre><code>&lt;p&gt;Some text and a formula $a = b + c$.&lt;/p&gt;
  </code></pre>
  
  <p>and I want the text withing the $-signs to be rendered as TeX math using <a href="https://github.com/Khan/KaTeX" rel="nofollow">KaTeX</a>.</p>
  
  <p>The problem is that if I want to use it in the browser, I have to use</p>
  
  <pre><code>katex.render("c = \\pm\\sqrt{a^2 + b^2}", element);
  </code></pre>
  
  <p>so I need to assign an element.</p>
  
  <p>So should I really write my html document like this or are there any other options:</p>
  
  <pre><code>&lt;div&gt;
    &lt;p&gt;One paragraph&lt;/p&gt;
    &lt;p&gt;Another paragraph&lt;/p&gt;
    &lt;p&gt;Some text and a formula &lt;span id="firstFormula"&gt;&lt;/span&gt;.&lt;/p&gt;
    &lt;p&gt;More text and another formula &lt;span id="secondFormula"&gt;&lt;/span&gt;.&lt;/p&gt;
  &lt;/div&gt;
  &lt;script&gt;
    const firstFormula = document.getElementById('firstFormula');
    katex.render("c = \\pm\\sqrt{a^2 + b^2}", firstFormula);
  
    const secondFormula = document.getElementById('secondFormula');
    katex.render("c = \\pm\\sqrt{a^2 + b^2}", secondFormula);
  &lt;/script&gt;
  </code></pre>
  
  <p>and repeat the same pattern for each formula?</p>
  
  <p>It seems a bit weird that I cannot just write the text and replace all the text formulas with tex rendered output.</p>
  
  <p>How does, for instance, Khan Academy do it on <a href="https://www.khanacademy.org/science/physics/one-dimensional-motion/kinematic-formulas/a/what-are-the-kinematic-formulas" rel="nofollow">this page</a> where they combine text and formulas? Do they render everything on the server and send it to the client?</p>
  
  <p>Is it better to use MathJax in this situation? I am just more keen on KaTeX since it is much faster.</p>