Add MathJax and Graphviz support for HUGO
-
Get into your theme folder
-
Find some directory named
layouts/posts/single.html
-
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 }}
- Create some posts and add following config inside front-matter
viz: true
math: true
And try some graphviz and mathjax stuff!
You may check the demo here