Add MathJax and Graphviz support for HUGO


hugo

227 Words

2020-04-12 14:22 +0800


  1. Get into your theme folder

  2. Find some directory named layouts/posts/single.html

  3. Inside the {{ define main }} block, paste following snippets

 1{{ if .Params.viz }}
 2  <script type="text/javascript" src="https://cdn.bootcss.com/viz.js/1.8.2/viz.js"> </script>
 3  <script type="text/javascript">
 4  (function(){
 5    var vizPrefix = "language-viz-";
 6    Array.prototype.forEach.call(document.querySelectorAll("[class^=" + vizPrefix + "]"), function(x){
 7      var engine;
 8      x.getAttribute("class").split(" ").forEach(function(cls){
 9        if (cls.startsWith(vizPrefix)) {
10          engine = cls.substr(vizPrefix.length);
11        }
12      });
13      var image = new DOMParser().parseFromString(Viz(x.innerText, {format:"svg", engine:engine}), "image/svg+xml");
14      x.parentNode.insertBefore(image.documentElement, x);
15      x.style.display = 'none'
16      x.parentNode.style.backgroundColor = "white"
17    });
18  })();
19  </script>
20{{ end }}
21
22{{ if  .Params.math   }}
23  <script type="text/javascript">
24    window.MathJax = {
25      tex2jax: {
26        inlineMath: [['$','$'], ['\\(','\\)']],
27        displayMath: [['$$','$$'], ['\[','\]']],
28        processEscapes: true,
29        processEnvironments: true,
30        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
31        TeX: { equationNumbers: { autoNumber: "AMS" },
32          extensions: ["AMSmath.js", "AMSsymbols.js", "color.js"] }
33      },
34      AuthorInit: function () {
35        MathJax.Hub.Register.StartupHook("Begin",function () {
36          MathJax.Hub.Queue(function() {
37            var all = MathJax.Hub.getAllJax(), i;
38            for(i = 0; i < all.length; i += 1) {
39              all[i].SourceElement().parentNode.className += ' has-jax';
40            }
41          })
42        });
43      }
44    };
45  </script>
46  <script  type="text/javascript"
47    src="https://cdn.bootcss.com/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
48  </script>
49{{ end }}
  1. Create some posts and add following config inside front-matter
viz: true
math: true

And try some graphviz and mathjax stuff!

mathjax-dot-demo

You may check the demo here