Add mermaid JS renderer (#12334)

* Add mermaid JS renderer For feature parity with GitLab. Tested in files, issues, wiki, editor. arc-green only does an inversion because the renderer seems to like to render white backgrounds on boxes. Ref: #3340 Fixes: #12307 * add feature entry, switch to neutral theme, remove border * add bindFunctions support * remove unnecessary border-radius Co-authored-by: Lunny Xiao <[email protected]> Co-authored-by: techknowlogick <[email protected]>
go-gitea · Jul 27, 2020 · 4315e31 · 4315e31
1 parent 46ef562
commit 4315e31
Show file tree

Hide file tree

Showing 10 changed files with 521 additions and 41 deletions.
diff --git a/docs/content/doc/advanced/customizing-gitea.en-us.md b/docs/content/doc/advanced/customizing-gitea.en-us.md
@@ -108,45 +108,6 @@ 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/mermaid) support to Gitea's markdown you simply add:
-
-```html
-{{if .RequireHighlightJS}}
-<script src="https://unpkg.com/[email protected]/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"`.
-
 #### Example: PlantUML
 
 You can add [PlantUML](https://plantuml.com/) support to Gitea's markdown by using a PlantUML server.

diff --git a/docs/content/page/index.en-us.md b/docs/content/page/index.en-us.md
@@ -128,6 +128,7 @@ Windows, on architectures like amd64, i386, ARM, PowerPC, and others.
     - Environment variables
     - Command line options
 - Multi-language support ([21 languages](https://github.com/go-gitea/gitea/tree/master/options/locale))
+- [Mermaid](https://mermaidjs.github.io/) Diagram support
 - Mail service
     - Notifications
     - Registration confirmation