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

* Add documentation to add mermaid to Gitea * Update documentation Co-authored-by: Antoine GIRARD <sapk@users.noreply.github.com>
5 years ago · 27c6b8fc07
parent 1920e5bcaf
commit 27c6b8fc07
1 changed files with 39 additions and 2 deletions
--- 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.