Merge pull request #46 from swflint/add-mathjax-support

Add option to enable use of MathJax for rendering of mathematics

4 files changed, 21 insertions, 0 deletions

diff --git a/README.md b/README.md
index 9708ecc..629e36d 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,7 @@ It was originally developed by [b. avianto](https://github.com/avianto/hugo-kier
     - [Images](#images)
     - [Code highlight](#code-highlight)
     - [Font Awesome icons](#font-awesome-icons)
+    - [Mathematics](#mathematics)
     - [Commenting](#static-commenting)
   - [Support and Pull Requests](#support-and-pull-requests)
 
@@ -185,6 +186,10 @@ Using fenced code with Chroma support.
 
 For usage, refer to [Font Awesome](https://fontawesome.com/).
 
+### Mathematics
+
+Set `Params.mathjax` to true to enable support of mathematics display using [MathJax](https://mathjax.org/).  Math should be, by default, surrounded by dollar signs and produced using LaTeX syntax.  Options may be overriden using `static/js/mathjax-config.js`.
+
 ### Static Commenting
 
 [Disqus](https://disqus.com/) comments are loaded on demand, by clicking the <kbd>View Comments</kbd> button. Disqus comments can be automatically loaded and displayed by setting `CommentAutoload = true` in `config.toml`.
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 2b6396d..62369cd 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -34,6 +34,7 @@ pygmentsCodeFences = true
     #utterancesIssueTerm = "pathname"
     #homepageLength = 10
     #commentAutoload = true  #This mean reader don't need click, disqus comment autoload
+    #mathjax = true #Enable display of mathematics using mathjax (LaTeX syntax)
 
 # uncomment to enable the Tags link on the main toolbar
 #  [[menu.main]]
diff --git a/layouts/partials/header_includes.html b/layouts/partials/header_includes.html
index 1a07429..3aa5418 100644
--- a/layouts/partials/header_includes.html
+++ b/layouts/partials/header_includes.html
@@ -2,6 +2,12 @@
     <link rel="shortcut icon" href="{{ . }}" />
   {{ end }}
 
+  {{- if .Site.Params.mathjax }}
+    <script src="/js/mathjax-config.js" defer></script>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+  {{- end }}
+
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
   <link rel="stylesheet" href="{{ "fontawesome/css/all.min.css" | absURL }}" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab|Ruda" />
diff --git a/static/js/mathjax-config.js b/static/js/mathjax-config.js
new file mode 100644
index 0000000..73d5627
--- /dev/null
+++ b/static/js/mathjax-config.js
@@ -0,0 +1,9 @@
+window.MathJax = {
+    tex: {
+        tags: "ams",
+        inlineMath: [['$', '$'], ['\\(', '\\)']]
+    },
+    svg: {
+        fontCache: 'global'
+    }
+};