feat: add katex math typesetting shortcode (#157)

exampleSite/content/shortcodes/buttons.md

@@ -1,3 +1,7 @@
+---
+title: Buttons
+---
+
 Buttons are styled links that can lead to local page or external link.
 
 ```tpl

exampleSite/content/shortcodes/columns.md

@@ -1,3 +1,7 @@
+---
+title: Columns
+---
+
 The Columns shortcode can be used to organize content side-by-side (horizontally) for better readability.
 
 ```html

exampleSite/content/shortcodes/expand.md

@@ -1,3 +1,7 @@
+---
+title: Expand
+---
+
 Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it.
 
 ## Example

exampleSite/content/shortcodes/hints.md

@@ -1,3 +1,7 @@
+---
+title: Hints
+---
+
 Hint shortcode can be used as hint/alerts/notification block.
 There are four colors to choose: `info`, `ok`, `warning` and `danger`.
 

exampleSite/content/shortcodes/icons.md

@@ -1,3 +1,7 @@
+---
+title: Icons
+---
+
 Simple shortcode to include icons from SVG sprites outside of menus.
 
 ```tpl

exampleSite/content/shortcodes/images/_index.md

@@ -1,4 +1,5 @@
 ---
+title: Images
 resources:
   - name: forest-1
     src: "forest-1.jpg"

exampleSite/content/shortcodes/includes.md

@@ -1,6 +1,5 @@
 ---
-# Empty front matter as shortcodes could not be includes
-# as first line of a file.
+title: Includes
 ---
 
 {{< toc >}}

exampleSite/content/shortcodes/katex.md

@@ -0,0 +1,39 @@
+---
+title: KaTeX
+---
+
+[KaTeX](https://katex.org/) shortcode let you render math typesetting in markdown document.
+
+## Example
+
+{{< columns >}}
+
+```latex
+{{</* katex [display] [class="text-center"] */>}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{</* /katex */>}}
+```
+
+<--->
+
+<!-- spellchecker-disable -->
+<!-- prettier-ignore -->
+{{< katex display >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex >}}
+
+<!-- spellchecker-enable -->
+
+{{< /columns >}}
+
+KaTeX can also be used inline, for example {{< katex >}}\pi(x){{< /katex >}} or used with a `display` setting. for example `display: block`:
+
+<!-- spellchecker-disable -->
+<!-- prettier-ignore -->
+{{< katex display >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex >}}
+
+<!-- spellchecker-enable -->
+
+Text continues here.

exampleSite/content/shortcodes/mermaid.md

@@ -1,3 +1,7 @@
+---
+title: Mermaid
+---
+
 [Mermaid](https://mermaidjs.github.io/) is library for generating SVG charts and diagrams from text.
 
 ## Example

exampleSite/content/shortcodes/tabs.md

@@ -1,3 +1,7 @@
+---
+title: Tabs
+---
+
 Tabs let you organize content by context, for example installation instructions for each supported platform.
 
 ```tpl
@@ -13,7 +17,7 @@ Tabs let you organize content by context, for example installation instructions
 {{< tabs "uniqueid" >}}
 {{< tab "macOS" >}}
 
-# macOS
+## macOS
 
 This is tab **macOS** content.
 
@@ -25,7 +29,7 @@ fastidious copious quo ad. Stet probates in duo.
 
 {{< tab "Linux" >}}
 
-# Linux
+## Linux
 
 This is tab **Linux** content.
 
@@ -37,7 +41,7 @@ fastidious copious quo ad. Stet probates in duo.
 
 {{< tab "Windows" >}}
 
-# Windows
+## Windows
 
 This is tab **Windows** content.
 

exampleSite/content/shortcodes/toc-tree.md

@@ -1,3 +1,7 @@
+---
+title: ToC-Tree
+---
+
 The `toc-tree` shortcode will generate a Table of Content from a section file tree of your content directory. The root of the resulting ToC will be the page on which you define the shortcode.
 
 ```tpl

exampleSite/content/shortcodes/toc.md

@@ -1,3 +1,7 @@
+---
+title: ToC
+---
+
 Simple wrapper to generate a page Table of Content from a shortcode.
 
 ```tpl