Add Markdown diagrams and render hooks for code blocks

You can now create custom hook templates for code blocks, either one for all (`render-codeblock.html`) or for a given code language (e.g. `render-codeblock-go.html`).

We also used this new hook to add support for diagrams in Hugo:

* Goat (Go ASCII Tool) is built-in and enabled by default; just create a fenced code block with the language `goat` and start draw your Ascii diagrams.
* Another popular alternative for diagrams in Markdown, Mermaid (supported by GitHub), can also be implemented with a simple template. See the Hugo documentation for more information.

Updates #7765
Closes #9538
Fixes #9553
Fixes #8520
Fixes #6702
Fixes #9558

1 files changed, 217 insertions, 0 deletions

diff --git a/docs/content/en/content-management/diagrams.md b/docs/content/en/content-management/diagrams.md
new file mode 100644
index 000000000..4e3f6164b
--- /dev/null
+++ b/docs/content/en/content-management/diagrams.md
@@ -0,0 +1,217 @@
+---
+title: Diagrams
+date: 2022-02-20
+categories: [content management]
+keywords: [diagrams,drawing]
+menu:
+  docs:
+    parent: "content-management"
+    weight: 22
+weight: 22
+toc: true
+---
+
+
+## Mermaid Diagrams
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+
+
+## Goat Ascii Diagram Examples
+
+### Graphics
+
+```goat
+                                                                             .
+    0       3                          P *              Eye /         ^     /
+     *-------*      +y                    \                +)          \   /  Reflection
+  1 /|    2 /|       ^                     \                \           \ v
+   *-------* |       |                v0    \       v3           --------*--------
+   | |4    | |7      |                  *----\-----*
+   | *-----|-*       +-----> +x        /      v X   \          .-.<--------        o
+   |/      |/       /                 /        o     \        | / | Refraction    / \
+   *-------*       v                 /                \        +-'               /   \
+  5       6      +z              v1 *------------------* v2    |                o-----o
+                                                               v
+
+```
+
+### Complex
+
+```goat
++-------------------+                           ^                      .---.
+|    A Box          |__.--.__    __.-->         |      .-.             |   |
+|                   |        '--'               v     | * |<---        |   |
++-------------------+                                  '-'             |   |
+                       Round                                       *---(-. |
+  .-----------------.  .-------.    .----------.         .-------.     | | |
+ |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
+ | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
+ '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
+    |            |   |    | '---.        |               '-------'       |       '-+------'
+    |<---------->|   |    |      |       v                Interior                 |     ^
+    '           <---'      '----'   .-----------.              ---.     .---       v     |
+ .------------------.  Diag line    | .-------. +---.              \   /           .     |
+ |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
+ |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
+ '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
+    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
+    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
+    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
+ <--+---+-----'       |     /|\                                                    |  | 3 |
+                      v                             not:line    'quotes'        .-'   '---'
+  .-.             .---+--------.            /            A || B   *bold*       |        ^
+ |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
+  '-'             '---------+--'          /           Nor/is this.            ---
+
+```
+
+### Process
+
+```goat
+                                      .
+   .---------.                       / \
+  |   START   |                     /   \        .-+-------+-.      ___________
+   '----+----'    .-------.    A   /     \   B   | |COMPLEX| |     /           \      .-.
+        |        |   END   |<-----+CHOICE +----->| |       | +--->+ PREPARATION +--->| X |
+        v         '-------'        \     /       | |PROCESS| |     \___________/      '-'
+    .---------.                     \   /        '-+---+---+-'
+   /  INPUT  /                       \ /
+  '-----+---'                         '
+        |                             ^
+        v                             |
+  .-----------.                 .-----+-----.        .-.
+  |  PROCESS  +---------------->|  PROCESS  |<------+ X |
+  '-----------'                 '-----------'        '-'
+```
+
+### File tree
+
+Created from https://arthursonzogni.com/Diagon/#Tree
+
+```goat  { width=300  color="orange" }
+───Linux─┬─Android
+         ├─Debian─┬─Ubuntu─┬─Lubuntu
+         │        │        ├─Kubuntu
+         │        │        ├─Xubuntu
+         │        │        └─Xubuntu
+         │        └─Mint
+         ├─Centos
+         └─Fedora
+```
+
+
+### Sequence Diagram
+
+https://arthursonzogni.com/Diagon/#Sequence
+
+```goat { class="w-40" }
+┌─────┐       ┌───┐
+│Alice│       │Bob│
+└──┬──┘       └─┬─┘
+   │            │  
+   │ Hello Bob! │  
+   │───────────>│  
+   │            │  
+   │Hello Alice!│  
+   │<───────────│  
+┌──┴──┐       ┌─┴─┐
+│Alice│       │Bob│
+└─────┘       └───┘
+
+```
+
+
+### Flowchart
+
+https://arthursonzogni.com/Diagon/#Flowchart
+
+```goat
+   _________________                                                              
+  ╱                 ╲                                                     ┌─────┐ 
+ ╱ DO YOU UNDERSTAND ╲____________________________________________________│GOOD!│ 
+ ╲ FLOW CHARTS?      ╱yes                                                 └──┬──┘ 
+  ╲_________________╱                                                        │    
+           │no                                                               │    
+  _________▽_________                    ______________________              │    
+ ╱                   ╲                  ╱                      ╲    ┌────┐   │    
+╱ OKAY, YOU SEE THE   ╲________________╱ ... AND YOU CAN SEE    ╲___│GOOD│   │    
+╲ LINE LABELED 'YES'? ╱yes             ╲ THE ONES LABELED 'NO'? ╱yes└──┬─┘   │    
+ ╲___________________╱                  ╲______________________╱       │     │    
+           │no                                     │no                 │     │    
+   ________▽_________                     _________▽__________         │     │    
+  ╱                  ╲    ┌───────────┐  ╱                    ╲        │     │    
+ ╱ BUT YOU SEE THE    ╲___│WAIT, WHAT?│ ╱ BUT YOU JUST         ╲___    │     │    
+ ╲ ONES LABELED 'NO'? ╱yes└───────────┘ ╲ FOLLOWED THEM TWICE? ╱yes│   │     │    
+  ╲__________________╱                   ╲____________________╱    │   │     │    
+           │no                                     │no             │   │     │    
+       ┌───▽───┐                                   │               │   │     │    
+       │LISTEN.│                                   └───────┬───────┘   │     │    
+       └───┬───┘                                    ┌──────▽─────┐     │     │    
+     ┌─────▽────┐                                   │(THAT WASN'T│     │     │    
+     │I HATE YOU│                                   │A QUESTION) │     │     │    
+     └──────────┘                                   └──────┬─────┘     │     │    
+                                                      ┌────▽───┐       │     │    
+                                                      │SCREW IT│       │     │    
+                                                      └────┬───┘       │     │    
+                                                           └─────┬─────┘     │    
+                                                                 │           │    
+                                                                 └─────┬─────┘    
+                                                               ┌───────▽──────┐   
+                                                               │LET'S GO DRING│   
+                                                               └───────┬──────┘   
+                                                             ┌─────────▽─────────┐
+                                                             │HEY, I SHOULD TRY  │
+                                                             │INSTALLING FREEBSD!│
+                                                             └───────────────────┘
+
+```
+
+
+### Table
+
+https://arthursonzogni.com/Diagon/#Table
+
+```goat { class="w-80 dark-blue" }
+┌────────────────────────────────────────────────┐
+│                                                │
+├────────────────────────────────────────────────┤
+│SYNTAX     = { PRODUCTION } .                   │
+├────────────────────────────────────────────────┤
+│PRODUCTION = IDENTIFIER "=" EXPRESSION "." .    │
+├────────────────────────────────────────────────┤
+│EXPRESSION = TERM { "|" TERM } .                │
+├────────────────────────────────────────────────┤
+│TERM       = FACTOR { FACTOR } .                │
+├────────────────────────────────────────────────┤
+│FACTOR     = IDENTIFIER                         │
+├────────────────────────────────────────────────┤
+│          | LITERAL                             │
+├────────────────────────────────────────────────┤
+│          | "[" EXPRESSION "]"                  │
+├────────────────────────────────────────────────┤
+│          | "(" EXPRESSION ")"                  │
+├────────────────────────────────────────────────┤
+│          | "{" EXPRESSION "}" .                │
+├────────────────────────────────────────────────┤
+│IDENTIFIER = letter { letter } .                │
+├────────────────────────────────────────────────┤
+│LITERAL    = """" character { character } """" .│
+└────────────────────────────────────────────────┘
+```
+
+
+