Mermaid Js not rendering in Readme but in Issues and Wiki

[moiflo033]

• 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

Loading

Screenshots

[moiflo033]

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

[lunny]

How did you customerize your template files?

[moiflo033]

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}}

<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>

`

[silverwind]

RequireHighlightJS and probably language-mermaid no longer exist on 1.13 since #12047, I guess we need to update these docs.

[silverwind]

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.

[moiflo033]

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

[silverwind]

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?

[moiflo033]

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

Raw Markdown (Github would screw with it)

[mrsdizzie]

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.

[silverwind]

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.