Add documentation to add Mermaid.js to Gitea (#9872)

zeripath · sapk · techknowlogick · commit 27c6b8fc07ea · 2020-01-20T11:14:03.000-05:00
* Add documentation to add mermaid to Gitea

* Update documentation

Co-authored-by: Antoine GIRARD &lt;sapk@users.noreply.github.com&gt;
diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
@@ -100,6 +100,45 @@ Apart from `extra_links.tmpl` and `extra_tabs.tmpl`, there are other useful temp
 - `body_outer_post.tmpl`, before the bottom `<footer>` element.
 - `footer.tmpl`, right before the end of the `<body>` tag, a good place for additional Javascript.
 
+#### Example: Mermaid.js
+
+If you would like to add [mermaid.js](https://mermaid-js.github.io/) support to Gitea's markdown you simply add:
+
+```html
+{{if .RequireHighlightJS}}
+<script src="https://unpkg.com/mermaid@8.4.5/dist/mermaid.min.js"></script>
+<!-- or wherever you have placed it -->
+<script>mermaid.init(".language-mermaid")</script>
+{{end}}
+```
+
+to `custom/footer.tmpl`. You then can add blocks
+like below to your markdown:
+
+    ```mermaid
+        stateDiagram
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            --
+            [*] --> ScrollLockOff
+            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
+    ```
+
+If you want to use Mermaid.js outside of markdown, e.g. in other templates or HTML files,
+you would need to remove `{{if .RequireHighlightJS}}` and `{{end}}`.
+
+Mermaid will detect and use tags with `class="language-mermaid"`.
+
 ## Customizing Gitea mails
 
 The `custom/templates/mail` folder allows changing the body of every mail of Gitea.
@@ -112,8 +151,6 @@ full path structure matching source.
 Any statement contained inside `{{` and `}}` are Gitea's template
 syntax and shouldn't be touched without fully understanding these components.
 
-
-
 ## Adding Analytics to Gitea
 
 Google Analytics, Matomo (previously Piwik), and other analytics services can be added to Gitea. To add the tracking code, refer to the `Other additions to the page` section of this document, and add the JavaScript to the `custom/templates/custom/header.tmpl` file.
