Add Math expressions and diagrams

docs/00_Getting_Started.md

@@ -19,6 +19,7 @@
 ### For Developers
 
 -   [Auto Syntax Highlighting](01_Features/Auto_Syntax_Highlight.md)
+-   [Math, Diagrams and Flowcharts](01_Features/Math_Diagrams_Flowcharts.md)
 -   [Extend Daux.io with Processors](01_For_Developers/Creating_a_Processor.md)
 -   Full access to the internal API to create new pages programatically
 -   Work with pages metadata

docs/01_Features/Auto_Syntax_Highlight.md

@@ -1,6 +1,9 @@
 With the help of [highlight.js](https://highlightjs.org/) We can highlight more than 150 languages.
 
-To be precise, we support all languages supported by highlight.js `9.7.0`.
+To be precise, we support all languages supported by highlight.js `10.5.0`.
+
+> Note that fenced code blocks with a hardcoded language are rendered at build time 
+> and don't need the library to be loaded on the client side.
 
 Here is a quick example :
 

docs/01_Features/Math_Diagrams_Flowcharts.md

@@ -0,0 +1,204 @@
+---
+title: Math, Diagrams and Flowcharts
+---
+
+[TOC]
+
+## Math
+
+TeX expressions are rendered via [KaTex](https://katex.org/).
+
+```tex
+c = \\pm\\sqrt{a^2 + b^2}\\in\\RR
+```
+
+    ```tex
+    c = \\pm\\sqrt{a^2 + b^2}\\in\\RR
+    ```
+
+
+```tex
+x = a_0 + \cfrac{1}{a_1 + \cfrac{1}{a_2 + \cfrac{1}{a_3+\cdots}}} 
+```
+
+    ```tex
+    x = a_0 + \cfrac{1}{a_1 + \cfrac{1}{a_2 + \cfrac{1}{a_3+\cdots}}} 
+    ```
+
+## Diagrams and Flowcharts
+
+You can render Diagrams and Flowcharts using [mermaid](https://mermaid-js.github.io/mermaid/#/)
+
+### Flow
+
+```mermaid
+graph TD
+A[Hard] -->|Text| B(Round)
+B --> C{Decision}
+C -->|One| D[Result 1]
+C -->|Two| E[Result 2]
+```
+
+    ```mermaid
+    graph TD
+    A[Hard] -->|Text| B(Round)
+    B --> C{Decision}
+    C -->|One| D[Result 1]
+    C -->|Two| E[Result 2]
+    ```
+
+### Sequence
+
+```mermaid
+sequenceDiagram
+Alice->>John: Hello John, how are you?
+loop Healthcheck
+    John->>John: Fight against hypochondria
+end
+Note right of John: Rational thoughts!
+John-->>Alice: Great!
+John->>Bob: How about you?
+Bob-->>John: Jolly good!
+```
+
+    ```mermaid
+    sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+    ```
+
+### Gantt
+
+```mermaid
+gantt
+section Section
+Completed :done,    des1, 2014-01-06,2014-01-08
+Active        :active,  des2, 2014-01-07, 3d
+Parallel 1   :         des3, after des1, 1d
+Parallel 2   :         des4, after des1, 1d
+Parallel 3   :         des5, after des3, 1d
+Parallel 4   :         des6, after des4, 1d
+```
+
+    ```mermaid
+    gantt
+    section Section
+    Completed :done,    des1, 2014-01-06,2014-01-08
+    Active        :active,  des2, 2014-01-07, 3d
+    Parallel 1   :         des3, after des1, 1d
+    Parallel 2   :         des4, after des1, 1d
+    Parallel 3   :         des5, after des3, 1d
+    Parallel 4   :         des6, after des4, 1d
+    ```
+
+
+### Class
+
+```mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+<<interface>> Class01
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+class Class10 {
+  <<service>>
+  int id
+  size()
+}
+```
+
+    ```mermaid
+    classDiagram
+    Class01 <|-- AveryLongClass : Cool
+    <<interface>> Class01
+    Class09 --> C2 : Where am i?
+    Class09 --* C3
+    Class09 --|> Class07
+    Class07 : equals()
+    Class07 : Object[] elementData
+    Class01 : size()
+    Class01 : int chimp
+    Class01 : int gorilla
+    class Class10 {
+      <<service>>
+      int id
+      size()
+    }
+    ```
+
+### State
+
+```mermaid
+stateDiagram-v2
+[*] --> Still
+Still --> [*]
+Still --> Moving
+Moving --> Still
+Moving --> Crash
+Crash --> [*]
+```
+
+    ```mermaid
+    stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]
+    ```
+
+### Pie
+
+```mermaid
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+```
+
+    ```mermaid
+    pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15
+    ```
+
+### Journey
+
+```mermaid
+  journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 3: Me
+```
+
+    ```mermaid
+      journey
+        title My working day
+        section Go to work
+          Make tea: 5: Me
+          Go upstairs: 3: Me
+          Do work: 1: Me, Cat
+        section Go home
+          Go downstairs: 5: Me
+          Sit down: 3: Me
+    ```
+

docs/01_Features/Multiple_Output_Formats.md

@@ -6,16 +6,17 @@ Daux.io is extendable and comes by default with three export formats:
 
 ## Feature Matrix
 
-|                  Feature | HTML | Single Page HTML |         Confluence          |
-| -----------------------: | :--: | :--------------: | :-------------------------: |
-|            Multilanguage |  √   |   X (Planned)    |              X              |
-|            Landing Pages |  √   |        X         |              X              |
-|              Index Pages |  √   |        √         |              √              |
-|           Internal Links |  √   |   X (Planned)    |              √              |
-|           Code Highlight |  √   |   X (Planned)    |      √ (Using macros)       |
-|                Live Mode |  √   |        X         |              X              |
-|           Pages Ordering |  √   |        √         |     X (API Limitation)      |
-| Google / Piwik analytics |  √   |        √         | √ (Configured on Conflence) |
+|                    Feature | HTML | Single Page HTML |         Confluence          |
+| -------------------------: | :--: | :--------------: | :-------------------------: |
+|                Index Pages |  √   |        √         |              √              |
+|             Internal Links |  √   |        X         |              √              |
+|              Landing Pages |  √   |        X         |              X              |
+|             Code Highlight |  √   |        X         |      √ (Using macros)       |
+| Math, Diagrams, Flowcharts |  √   |        X         |              X              |
+|                  Live Mode |  √   |        X         |              X              |
+|              Multilanguage |  √   |        X         |              X              |
+|             Pages Ordering |  √   |        √         |     X (API Limitation)      |
+|   Google / Piwik analytics |  √   |        √         | √ (Configured on Conflence) |
 
 ## Confluence Example
 

docs/_index.md

@@ -29,6 +29,7 @@
 #### For Developers
 
 -   [Auto Syntax Highlighting](01_Features/Auto_Syntax_Highlight.md)
+-   [Math, Diagrams and Flowcharts](01_Features/Math_Diagrams_Flowcharts.md)
 -   [Extend Daux.io with Processors](01_For_Developers/Creating_a_Processor.md)
 -   Full access to the internal API to create new pages programatically
 -   Work with pages metadata

libs/Format/HTML/ContentTypes/Markdown/FencedCodeRenderer.php

@@ -20,6 +20,14 @@ public function __construct()
         $this->hl = new Highlighter();
     }
 
+    public function pre($attrs, $content) {
+        return new HtmlElement(
+            'pre',
+            [],
+            new HtmlElement('code', $attrs, $content)
+        );
+    }
+
     /**
      * @param bool $inTightList
      *
@@ -39,6 +47,21 @@ public function render(AbstractBlock $block, ElementRendererInterface $htmlRende
         $content = $block->getStringContent();
 
         $language = $this->getLanguage($block->getInfoWords());
+
+        if ($language === 'tex') {
+            $attrs['class'] = 'katex';
+            return $this->pre($attrs, Xml::escape($content));
+        }
+
+        if ($language === 'mermaid') {
+            return new HtmlElement('div', ['class' => 'mermaid'], Xml::escape($content));
+        }
+
+        return $this->renderCode($content, $language, $attrs);
+    }
+
+    public function renderCode($content, $language, $attrs)
+    {
         $highlighted = false;
         if ($language) {
             $attrs['class'] = isset($attrs['class']) ? $attrs['class'] . ' ' : '';
@@ -56,11 +79,7 @@ public function render(AbstractBlock $block, ElementRendererInterface $htmlRende
             $content = Xml::escape($content);
         }
 
-        return new HtmlElement(
-            'pre',
-            [],
-            new HtmlElement('code', $attrs, $content)
-        );
+        return $this->pre($attrs, $content);
     }
 
     public function getLanguage($infoWords)

src/js/theme_daux/highlight.js

@@ -1,16 +1,46 @@
-import { ready } from "./utils";
+import { ready, loadJS, loadCSS } from "./utils";
 
 ready(() => {
-    const codeBlocks = document.querySelectorAll("pre > code:not(.hljs)");
+    const codeBlocks = document.querySelectorAll(
+        "pre > code:not(.hljs, .katex)"
+    );
     if (codeBlocks.length) {
-        const head = document.getElementsByTagName("head")[0],
-            script = document.createElement("script");
-        script.type = "text/javascript";
-        script.async = true;
-        script.src = `${window.base_url}daux_libraries/highlight.pack.js`;
-        script.onload = function(src) {
+        loadJS(`${window.base_url}daux_libraries/highlight.pack.js`, () => {
             [].forEach.call(codeBlocks, window.hljs.highlightBlock);
-        };
-        head.appendChild(script);
+        });
+    }
+});
+
+ready(() => {
+    const codeBlocks = document.querySelectorAll("pre > code.katex");
+    if (codeBlocks.length) {
+        loadCSS(`${window.base_url}daux_libraries/katex.min.css`);
+
+        loadJS(`${window.base_url}daux_libraries/katex.min.js`, () => {
+            [].forEach.call(codeBlocks, (/** @type {HTMLElement} */ e) => {
+                const content = e.innerHTML;
+                const p = document.createElement("p");
+                const span = document.createElement("span");
+                p.className = "katex-display";
+                p.appendChild(span);
+
+                const pre = e.parentElement;
+                pre.parentElement.insertBefore(p, pre);
+                pre.parentElement.removeChild(pre);
+
+                window.katex.render(content, span, {
+                    throwOnError: false
+                });
+            });
+        });
+    }
+});
+
+ready(() => {
+    const mermaidBlocks = document.querySelectorAll("div.mermaid");
+    if (mermaidBlocks.length) {
+        loadJS(`${window.base_url}daux_libraries/mermaid.min.js`, () => {
+            window.mermaid.initialize({ startOnLoad: true });
+        });
     }
 });

src/js/theme_daux/utils.js

@@ -7,3 +7,21 @@ export function ready(fn) {
         fn();
     }
 }
+
+export function loadJS(url, callback) {
+    const head = document.getElementsByTagName("head")[0],
+        script = document.createElement("script");
+    script.type = "text/javascript";
+    script.async = true;
+    script.src = url;
+    script.onload = callback;
+    head.appendChild(script);
+}
+
+export function loadCSS(url) {
+    const head = document.getElementsByTagName("head")[0],
+        link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    head.appendChild(link);
+}