Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

share the conflict with the other sphinx extensions #74

Open
Lu-Yi-Hsun opened this issue May 11, 2021 · 9 comments
Open

share the conflict with the other sphinx extensions #74

Lu-Yi-Hsun opened this issue May 11, 2021 · 9 comments

Comments

@Lu-Yi-Hsun
Copy link

nbsphinx and sphinxcontrib-mermaid are conflict

sphinxcontrib-mermaid need https://unpkg.com/mermaid/dist/mermaid.min.js

nbsphinx need https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js

put together not work
@martindevora
Copy link

martindevora commented Jul 11, 2021 •
edited

Same here. When compiling a site with mermaid diagrams and notebook files, the mermaid pseudo-code is not interpreted into a diagram.
Included extensions are nbsphinx and sphinxcontrib.mermaid.

@mgaitan
Copy link
Owner

mgaitan commented Jul 17, 2021

does anybody know how to fix this? is there any way to initialize mermaid from requirejs ?

@pdxjohnny pdxjohnny mentioned this issue Aug 4, 2021
Open
@AdamGagorik
Copy link

A temporary workaround seems to be to use the command line tool instead of the raw HTML.
Set mermaid_output_format="png" or mermaid_output_format="svg" while having the mermaid CLI installed.

@jacksonjos
Copy link

I had to deal with the same conflict between nbsphinx and sphinxcontrib.mermaid today.
My solution was as follows:

In a html I had nbsphinx javascript being loaded before mermaid javascript.
I edited the code to invert the order of loading and it worked! =D

So, I edited from this:

<script crossorigin="anonymous" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

To this:

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
<script crossorigin="anonymous" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>

@fumitoh fumitoh mentioned this issue May 5, 2023
Open
@zlatko-minev
Copy link

zlatko-minev commented Feb 10, 2024 •
edited

This seems to be a common issue, faced in a few projects, including see here. I would suggest a bump on some help to solve this. This is also a conflict with jupyter_sphinx

@jacksonjos - this sounds like it was a manual chrome tools edit solution, did you find a way to modify the conf.py to solve it in the same way?

@zlatko-minev
Copy link

Here is a solution that works for me by injecting the code with an extension at the top.

FILE: conf.py

extensions.append('mermaid_custom_ext')

FILE: mermaid_custom_ext.py

"""
Cludge solution by Zlatko to issue 

This extension injects the Mermaid.js code verbatim into the <head> section of each HTML page. 
This approach involves using Sphinx's extension mechanism to programmatically modify the HTML output.

This is a custom Sphinx extension that uses the app object to add custom HTML to the <head> section.
We use the `html-page-context` event to modify the context of each HTML page before it is rendered, 
allowing for the injection of custom scripts. The function `add_mermaid_js` adds the Mermaid.js 
script tags to the HTML context. 
"""
from sphinx.application import Sphinx

def add_mermaid_js(app: Sphinx, pagename: str, templatename: str, context: dict, doctree):
    mermaid_script = r"""
    <script src="https://unpkg.com/mermaid@10.2.0/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad:true});</script>
    """
    if "metatags" in context:
        context["metatags"] += mermaid_script
    else:
        context["metatags"] = mermaid_script

def setup(app: Sphinx):
    app.connect("html-page-context", add_mermaid_js)

@TsukiZombina
Copy link

Thank you @zlatko-minev, now I can render my diagram, however, It seems to disable property mermaid_d3_zoom, do you have any idea on how to avoid this?

@zlatko-minev
Copy link

No, I have the same issue, I didn't try to solve it

@kg17492
Copy link

kg17492 commented Jun 5, 2024

nbsphinx_requirejs_path = "" in conf.py worked for me. It disables loading require.js according to nbsphinx Documents, but nbsphinx also works well while just displaying .jpynb in sphinx.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@jacksonjos @mgaitan @AdamGagorik @TsukiZombina @zlatko-minev @Lu-Yi-Hsun @martindevora @kg17492