add math

2020-06-05 22:38:13 +10:00 · 2020-06-05 22:38:13 +10:00 · 63546f792f
parent 9670c7b524
commit 63546f792f
4 changed files with 64 additions and 2 deletions
--- a/exampleSite/content/blog/markdown-syntax.md
+++ b/exampleSite/content/blog/markdown-syntax.md
@ -84,7 +84,7 @@ html
    </html>

 #### Code block with Hugo's internal highlight shortcode
-{{< highlight html >}}
+```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
@ -95,7 +95,7 @@ html
  <p>Test</p>
 </body>
 </html>
-{{< /highlight >}}
+```

 ## List Types

--- a/exampleSite/content/blog/math-typesetting.md
+++ b/exampleSite/content/blog/math-typesetting.md
@ -0,0 +1,48 @@
+---
+title: "Math Typesetting"
+date: 2020-06-05
+slug: "math-typesetting"
+description: "A brief guide to setup KaTeX"
+keywords: ["gohugo", "hugo", "go", "blog"]
+draft: false
+tags: ["math"]
+stylesheet: "post.css"
+math: true
+---
+
+Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
+<!--more-->
+
+In this example we will be using [KaTeX](https://katex.org/)
+
+- Create a partial under `/layouts/partials/math.html`
+- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
+- Include the partial in your templates like so:  
+
+```
+{{ if or .Params.math .Site.Params.math }}
+{{ partial "math.html" . }}
+{{ end }}
+```  
+- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
+- To enable KaTex on a per page basis include the parameter `math: true` in content files.
+
+**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
+{{< math.inline >}}
+{{ if or .Page.Params.math .Site.Params.math }}
+<!-- KaTeX -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
+{{ end }}
+{{</ math.inline >}}
+
+### Examples
+
+Inline math: $$ \varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887… $$
+
+Block math:
+
+$$
+\sigma(t) = \cfrac{1}{1 + e^{-t}}
+$$
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@ -13,6 +13,9 @@
  </header>
  <article class="post__content">
    {{ partial "anchored-headings.html" .Content }}
+    {{ if or .Params.math .Site.Params.math }}
+      {{ partial "math.html" . }}
+    {{ end }}
  </article>
  {{ partial "tags.html" .}} {{ partial "post-pagination.html" .}}
 </div>
--- a/layouts/partials/math.html
+++ b/layouts/partials/math.html
@ -0,0 +1,11 @@
+<!-- layouts/partials/math.html -->
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_SVG"></script>
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+            showMathMenu: false, //disables context menu
+            tex2jax: {
+            inlineMath: [ ['$','$'], ['\\(','\\)'] ]
+           }
+    });
+</script>