<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://blog.alekskrnjaic.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://blog.alekskrnjaic.com/" rel="alternate" type="text/html" /><updated>2026-04-08T01:33:09+00:00</updated><id>https://blog.alekskrnjaic.com/feed.xml</id><title type="html">Aleks Blog</title><subtitle>Projects, ramblings. </subtitle><entry><title type="html">MathJax in Jekyll</title><link href="https://blog.alekskrnjaic.com/jekyll/update/2019/05/17/mathjax-in-jekyll.html" rel="alternate" type="text/html" title="MathJax in Jekyll" /><published>2019-05-17T05:42:58+00:00</published><updated>2019-05-17T05:42:58+00:00</updated><id>https://blog.alekskrnjaic.com/jekyll/update/2019/05/17/mathjax-in-jekyll</id><content type="html" xml:base="https://blog.alekskrnjaic.com/jekyll/update/2019/05/17/mathjax-in-jekyll.html"><![CDATA[<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      extensions: [
        "MathMenu.js",
        "MathZoom.js",
        "AssistiveMML.js",
        "a11y/accessibility-menu.js"
      ],
      jax: ["input/TeX", "output/CommonHTML"],
      TeX: {
        extensions: [
          "AMSmath.js",
          "AMSsymbols.js",
          "noErrors.js",
          "noUndefined.js",
        ]
      }
    });
</script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<p>I found this to be the simplest way to integrate mathjax into Jekyll. This assumes you are using Kramdown as your markdown renderer, and your <code class="language-plaintext highlighter-rouge">_config.yml</code> contains the line <code class="language-plaintext highlighter-rouge">markdown: kramdown</code></p>

<p>Here is the process:</p>

<ol>
  <li>Create an <code class="language-plaintext highlighter-rouge">_includes</code> directory in your root Jekyll directory <br /><br /></li>
  <li>Create a file called <code class="language-plaintext highlighter-rouge">mathjax.html</code> inside it, and put the following inside the file <br /><br />
    <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/x-mathjax-config"</span><span class="nt">&gt;</span>
   <span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Config</span><span class="p">({</span>
     <span class="na">extensions</span><span class="p">:</span> <span class="p">[</span>
       <span class="dl">"</span><span class="s2">MathMenu.js</span><span class="dl">"</span><span class="p">,</span>
       <span class="dl">"</span><span class="s2">MathZoom.js</span><span class="dl">"</span><span class="p">,</span>
       <span class="dl">"</span><span class="s2">AssistiveMML.js</span><span class="dl">"</span><span class="p">,</span>
       <span class="dl">"</span><span class="s2">a11y/accessibility-menu.js</span><span class="dl">"</span>
     <span class="p">],</span>
     <span class="na">jax</span><span class="p">:</span> <span class="p">[</span><span class="dl">"</span><span class="s2">input/TeX</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">output/CommonHTML</span><span class="dl">"</span><span class="p">],</span>
     <span class="na">TeX</span><span class="p">:</span> <span class="p">{</span>
       <span class="na">extensions</span><span class="p">:</span> <span class="p">[</span>
         <span class="dl">"</span><span class="s2">AMSmath.js</span><span class="dl">"</span><span class="p">,</span>
         <span class="dl">"</span><span class="s2">AMSsymbols.js</span><span class="dl">"</span><span class="p">,</span>
         <span class="dl">"</span><span class="s2">noErrors.js</span><span class="dl">"</span><span class="p">,</span>
         <span class="dl">"</span><span class="s2">noUndefined.js</span><span class="dl">"</span><span class="p">,</span>
       <span class="p">]</span>
     <span class="p">}</span>
   <span class="p">});</span>
 <span class="nt">&lt;/script&gt;</span>
 <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> 
 <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js"</span><span class="nt">&gt;</span>
 <span class="nt">&lt;/script&gt;</span>
</code></pre></div>    </div>
  </li>
  <li>That’s it! When you’re creating a new page, just put this template tag at the top of your page <br /><br />
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> {% include mathjax.html %}
</code></pre></div>    </div>
  </li>
  <li>You can now use the kramdown $$ syntax <br /><br />
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $$
 \begin{align*}
   &amp; \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
   = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\
   &amp; (x_1, \ldots, x_n) \left( \begin{array}{ccc}
       \phi(e_1, e_1) &amp; \cdots &amp; \phi(e_1, e_n) \\
       \vdots &amp; \ddots &amp; \vdots \\
       \phi(e_n, e_1) &amp; \cdots &amp; \phi(e_n, e_n)
     \end{array} \right)
   \left( \begin{array}{c}
       y_1 \\
       \vdots \\
       y_n
     \end{array} \right)
 \end{align*}
 $$
</code></pre></div>    </div>
    <p>\(\begin{align*}
   &amp; \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
   = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\
   &amp; (x_1, \ldots, x_n) \left( \begin{array}{ccc}
       \phi(e_1, e_1) &amp; \cdots &amp; \phi(e_1, e_n) \\
       \vdots &amp; \ddots &amp; \vdots \\
       \phi(e_n, e_1) &amp; \cdots &amp; \phi(e_n, e_n)
     \end{array} \right)
   \left( \begin{array}{c}
       y_1 \\
       \vdots \\
       y_n
     \end{array} \right)
 \end{align*}\)</p>
  </li>
</ol>

<div><br /></div>
<div id="disqus_thread"></div>

<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/

var disqus_config = function () {
this.page.url = "https://blog.alekskrnjaic.com/jekyll/update/2019/05/17/mathjax-in-jekyll.html";  // commenturl in config file
this.page.identifier = "/jekyll/update/2019/05/17/mathjax-in-jekyll"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};

(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://alekskrnjaic.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>]]></content><author><name></name></author><category term="jekyll" /><category term="update" /><summary type="html"><![CDATA[I found this to be the simplest way to integrate mathjax into Jekyll. This assumes you are using Kramdown as your markdown renderer, and your _config.yml contains the line markdown: kramdown]]></summary></entry></feed>