Mermaid Syntax Error in text on mdbook highlight #42

Open
opened 2024-03-29 10:08:57 +00:00 by anistark · 4 comments
anistark commented 2024-03-29 10:08:57 +00:00 (Migrated from github.com)

Mermaid diagram is failing on mdbook search.

How to reproduce:

Search anything on mdbook that matches the texts inside mermaid diagram. It fails with said message.

Screenshot 2024-03-29 at 3 37 59 PM

Possible keyword clashes between query param highlight

Mermaid diagram is failing on mdbook search. ## How to reproduce: Search anything on mdbook that matches the texts inside mermaid diagram. It fails with said message. ![Screenshot 2024-03-29 at 3 37 59 PM](https://github.com/badboy/mdbook-mermaid/assets/5357586/6ea3cd3b-e65d-4a8c-9454-0dd53f3e4dd2) Possible keyword clashes between query param `highlight`
badboy commented 2024-04-02 10:00:11 +00:00 (Migrated from github.com)

Highlighting is done client-side in JS. It inserts some additional HTML around the words to highlight.
The mermaid code is still in the HTML and the highlighter runs before mermaid.js.
There's really not much we can do here.

Highlighting is done client-side in JS. It inserts some additional HTML around the words to highlight. The mermaid code is still in the HTML and the highlighter runs before mermaid.js. There's really not much we can do here.
anistark commented 2024-04-02 10:23:33 +00:00 (Migrated from github.com)

@badboy any way to avoid it ? Like disable highlight in mermaid?

@badboy any way to avoid it ? Like disable highlight in mermaid?
badboy commented 2024-04-02 12:41:06 +00:00 (Migrated from github.com)

The highlighting is done in mdbook's JavaScript here: rust-lang/mdBook@bd323fb930/src/theme/searcher/searcher.js (L298-L315)

I don't know how it works. Maybe mark_exclude can be a list of things?
It's always set to the empty list though, so you would either need to modify that file and deploy it or find a way to inject your own configuration before it runs.
Alternatively figure out a way for mermaid.js to run before the searcher.js does its job.

The highlighting is done in mdbook's JavaScript here: https://github.com/rust-lang/mdBook/blob/bd323fb930eaadff4e8ee3859b064731617fd875/src/theme/searcher/searcher.js#L298-L315 I don't know how it works. Maybe `mark_exclude` can be a list of things? It's [always set to the empty list though](https://github.com/rust-lang/mdBook/blob/bd323fb930eaadff4e8ee3859b064731617fd875/src/theme/searcher/searcher.js#L44), so you would either need to modify that file and deploy it or find a way to inject your own configuration before it runs. Alternatively figure out a way for mermaid.js to run before the searcher.js does its job.
CommanderStorm commented 2025-12-31 22:27:33 +00:00 (Migrated from github.com)

figure out a way for mermaid.js to run before the searcher.js does its job

One way to do this is pulling mermaid.js to the server side.
Not in the scope of this project, but running chrome works quite nicely.
http://github.com/Commanderstorm/mdbook-mermaid-ssr

> figure out a way for mermaid.js to run before the searcher.js does its job One way to do this is pulling mermaid.js to the server side. Not in the scope of this project, but running chrome works quite nicely. http://github.com/Commanderstorm/mdbook-mermaid-ssr
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
jer/mdbook-mermaid#42
No description provided.