Mermaid Js not rendering in Readme but in Issues and Wiki #5777

New Issue

GiteaMirror · 2025-11-02T06:35:39-06:00

GiteaMirror commented

2025-11-02 06:35:39 -06:00

Originally created by @moiflo033 on GitHub (Jul 23, 2020).

Gitea version (or commit ref): 1.13.0+dev-283-g56f222d44
Git version: 2.26.2
Operating system: linux Unraid
Database (use [x]):
- [ x] PostgreSQL
- MySQL
- MSSQL
- SQLite
Can you reproduce the bug at https://try.gitea.io:
- Yes (provide example URL)
- [ x] No
- Not relevant
Log gist:

Description

Mermaid.js rendering is only working in Issues & Wiki. Not in README.md files.

Code used to test:

sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end

Screenshots

Originally created by @moiflo033 on GitHub (Jul 23, 2020).   - Gitea version (or commit ref): 1.13.0+dev-283-g56f222d44 - Git version: 2.26.2 - Operating system: linux Unraid - Database (use `[x]`): - [ x] PostgreSQL - [ ] MySQL - [ ] MSSQL - [ ] SQLite - Can you reproduce the bug at https://try.gitea.io: - [ ] Yes (provide example URL) - [ x] No - [ ] Not relevant - Log gist: ## Description Mermaid.js rendering is only working in Issues & Wiki. Not in README.md files. Code used to test: ```mermaid sequenceDiagram loop Daily query Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end end ``` ## Screenshots ![Gitea_Issue_Wiki](https://user-images.githubusercontent.com/59033050/88341096-3f7bd280-cd3d-11ea-9b3e-770b90e32b93.png) ![Gitea_Issue_Readme](https://user-images.githubusercontent.com/59033050/88341098-40146900-cd3d-11ea-9f64-c893f5badceb.png)

GiteaMirror closed this issue

2025-11-02 06:35:39 -06:00

GiteaMirror commented

2025-11-02 06:35:40 -06:00

@moiflo033 commented on GitHub (Jul 24, 2020):

I wanted to add that the Graph doesn't get rendered in any of the Previews.

@moiflo033 commented on GitHub (Jul 24, 2020): I wanted to add that the Graph doesn't get rendered in any of the Previews.

GiteaMirror commented

2025-11-02 06:35:40 -06:00

@lunny commented on GitHub (Jul 24, 2020):

How did you customerize your template files?

@lunny commented on GitHub (Jul 24, 2020): How did you customerize your template files?

GiteaMirror commented

2025-11-02 06:35:40 -06:00

@moiflo033 commented on GitHub (Jul 24, 2020):

I did exactly as outlined in the Customizing Gitea Page
I tried both with and without the {{if .RequireHighlightJS}}.
I can see the JS being loaded and the "language-mermaid" css class being applied to the code block (Chrome dev tools).

Both code blocks i tried in the footer.tmpl file:
`{{if .RequireHighlightJS}}

{{end}}`

2nd
`<script src="https://unpkg.com/mermaid@8.4.5/dist/mermaid.min.js"></script>

`

@moiflo033 commented on GitHub (Jul 24, 2020): I did exactly as outlined in the [Customizing Gitea Page](https://docs.gitea.io/en-us/customizing-gitea/#example-mermaidjs) I tried both with and without the {{if .RequireHighlightJS}}. I can see the JS being loaded and the "language-mermaid" css class being applied to the code block (Chrome dev tools). Both code blocks i tried in the footer.tmpl file: `{{if .RequireHighlightJS}} <script src="https://unpkg.com/mermaid@8.4.5/dist/mermaid.min.js"></script>  <script>mermaid.init(".language-mermaid")</script> {{end}}` 2nd `<script src="https://unpkg.com/mermaid@8.4.5/dist/mermaid.min.js"></script>  <script>mermaid.init(".language-mermaid")</script> `

GiteaMirror commented

2025-11-02 06:35:40 -06:00

@silverwind commented on GitHub (Jul 24, 2020):

RequireHighlightJS and probably language-mermaid no longer exist on 1.13 since https://github.com/go-gitea/gitea/pull/12047, I guess we need to update these docs.

@silverwind commented on GitHub (Jul 24, 2020): `RequireHighlightJS` and probably `language-mermaid` no longer exist on 1.13 since https://github.com/go-gitea/gitea/pull/12047, I guess we need to update these docs.

GiteaMirror commented

2025-11-02 06:35:40 -06:00

@silverwind commented on GitHub (Jul 24, 2020):

Actually it looks we did preserve the RequireHighlightJS variable but overall it's a really bad recommendation in the docs. I think a context variable like HasMarkdown would be more fitting, assuming these diagrams can only show up in markdown. Or even better, integrate mermaid.js directly in gitea as a lazy-loaded lib.

@silverwind commented on GitHub (Jul 24, 2020): Actually it looks we did preserve the `RequireHighlightJS` variable but overall it's a really bad recommendation in the docs. I think a context variable like `HasMarkdown` would be more fitting, assuming these diagrams can only show up in markdown. Or even better, integrate mermaid.js directly in gitea as a lazy-loaded lib.

GiteaMirror commented

2025-11-02 06:35:40 -06:00

@moiflo033 commented on GitHub (Jul 24, 2020):

I wanted to clarify, even with the RequireHighlightJS Statement removed it doesn't render.

@moiflo033 commented on GitHub (Jul 24, 2020): I wanted to clarify, even with the RequireHighlightJS Statement removed it doesn't render.

GiteaMirror commented

2025-11-02 06:35:41 -06:00

@silverwind commented on GitHub (Jul 24, 2020):

I assume this is because the <pre> does not have that .language-mermaid class anymore because I think that was added by either the removed backend code or highlight.js itself.

How does the markdown source look? Are you adding mermaid on markdown fences?

@silverwind commented on GitHub (Jul 24, 2020): I assume this is because the `<pre>` does not have that `.language-mermaid` class anymore because I think that was added by either the removed backend code or highlight.js itself. How does the markdown source look? Are you adding `mermaid` on markdown fences?

GiteaMirror commented

2025-11-02 06:35:41 -06:00

@moiflo033 commented on GitHub (Jul 24, 2020):

The class gets added in the <code> tag. See attached screenshot and HTML snipped: pastebin

Raw Markdown (Github would screw with it)

@moiflo033 commented on GitHub (Jul 24, 2020): The class gets added in the `<code>` tag. See attached screenshot and HTML snipped: [pastebin](https://pastebin.com/ccpBsYcB) ![Gitea_Issue_html](https://user-images.githubusercontent.com/59033050/88401614-40a71100-cdca-11ea-91c1-bb3804774093.png) [Raw Markdown](https://pastebin.com/VbGnQ77z) (Github would screw with it)

GiteaMirror commented

2025-11-02 06:35:41 -06:00

@mrsdizzie commented on GitHub (Jul 24, 2020):

Markdown for wiki and readme should be generated from the same place and output the same code.

If all mermaidjs does is look for a block with .language-mermaid it should work the same in both places but I don't really know anything about mermaid js otherwise. I guess you can see what the difference is between the two

Agree our doc recommendation to check for highlightjs is bad and should probably be changed to something else less specific as @silverwind suggests.

@mrsdizzie commented on GitHub (Jul 24, 2020): Markdown for wiki and readme should be generated from the same place and output the same code. If all mermaidjs does is look for a block with .language-mermaid it should work the same in both places but I don't really know anything about mermaid js otherwise. I guess you can see what the difference is between the two Agree our doc recommendation to check for highlightjs is bad and should probably be changed to something else less specific as @silverwind suggests.

GiteaMirror commented

2025-11-02 06:35:41 -06:00

@silverwind commented on GitHub (Jul 24, 2020):

I will probably have a look at integrating mermaid.js directly as a first-party script. It should not be too hard and one extra lazy-loaded lib does not impact our performance at all. After that's done, we can get rid of RequireHighlightJS I think.

@silverwind commented on GitHub (Jul 24, 2020): I will probably have a look at integrating mermaid.js directly as a first-party script. It should not be too hard and one extra lazy-loaded lib does not impact our performance at all. After that's done, we can get rid of `RequireHighlightJS` I think.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#5777