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.

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

macos livereloadjs can't loaded,mermaid graph render failed #3596

Closed
5 tasks done
phygerr opened this issue Feb 19, 2022 · 7 comments
Closed
5 tasks done

macos livereloadjs can't loaded,mermaid graph render failed #3596

phygerr opened this issue Feb 19, 2022 · 7 comments
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@phygerr
Copy link

phygerr commented Feb 19, 2022

Contribution guidelines

I've found a bug and checked that ...

  • ... the problem doesn't occur with the mkdocs or readthedocs themes
  • ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • ... the documentation does not mention anything about my problem
  • ... there are no open or closed issues that are related to my problem

Description

macos livereloadjs can't loaded,always loading... so the mermaid graph render failed。
image

OS:mac Monterey
Python Version:3.8.9
I use chrome and safari , they all can't

mermaid code

sequenceDiagram
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

web page

image

Expected behaviour

mermaid graph render success

Actual behaviour

mermaid graph render failed

Steps to reproduce

mkdocs new demo
config mermaid
mkdocs serve to preview

Package versions

  • Python: 3.8.9
  • MkDocs: 1.2.3
  • Material: 8.2.1

Configuration

site_name: My Docs
theme:
  name: material
  language: zh

  features:
    - navigation.tabs
    - content.code.annotate

  icon:
    admonition:
      note: octicons/tag-16
      abstract: octicons/checklist-16
      info: octicons/info-16
      tip: octicons/squirrel-16
      success: octicons/check-16
      question: octicons/question-16
      warning: octicons/alert-16
      failure: octicons/x-circle-16
      danger: octicons/zap-16
      bug: octicons/bug-16
      example: octicons/beaker-16
      quote: octicons/quote-16


  palette:
    - media: "(prefers-color-scheme: light)"
      primary: deep purple
      scheme: default
      toggle:
        icon: material/weather-sunny
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      primary: grey
      scheme: slate
      toggle:
        icon: material/weather-night
        name: Switch to light mode
extra:
  alternate:
    - name: 本站仅支持中文
      link: /
      lang: zh

markdown_extensions:
  - pymdownx.highlight:
      anchor_linenums: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences
  - admonition
  - pymdownx.details
  - def_list
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

System information

  • Operating system: mac Monterey
  • Browser: chrome 98.0.4758.80(正式版本) (x86_64)
@phygerr
Copy link
Author

phygerr commented Feb 19, 2022

i find this in chrome console
image

@squidfunk
Copy link
Owner

Thanks for reporting. I'm not able to reproduce. Please provide a minimal reproducible example.

@squidfunk squidfunk added needs input Issue needs further input by the reporter needs reproduction Issue lacks a minimal reproduction .zip file and removed needs input Issue needs further input by the reporter labels Feb 19, 2022
@phygerr
Copy link
Author

phygerr commented Feb 19, 2022

this is my code Archive file:https://github.com/phygerr/forMKDocsBUG/blob/main/myDemo.zip
and the picture is my env info:
image

@phygerr
Copy link
Author

phygerr commented Feb 19, 2022

when i modified ## 这是mermaid图表 to## 这是mermaidxx图表mermaid can render success.
i think the bug may releated whith word 'mermaid' .
hope my info can help you.

@phygerr
Copy link
Author

phygerr commented Feb 19, 2022

when i use ## 这是mermaid图表
image

when i use ## 这是mermaidxx图表
image

@squidfunk
Copy link
Owner

I can reproduce the error. The problem is that the headline element will receive an id attribute with the value mermaid, and the browser will define a global variable with the same name on the window object. Try it yourself in the console

mermaid
// => <h2 id="mermaid">这是mermaid图表</h2>

I'm shocked, as I've never heard that browsers do that in the 16 years that I do web development, but it's the reason why the Mermaid.js integration fails to mount. I think this problem is not solvable, as what we're doing is to check whether Mermaid.js has already been defined by the author, which is done by checking the global scope for a variable called mermaid.

Thus, you cannot have a headline that produces an id with the value mermaid and the Mermaid.js integration on the same page. I don't think there's any other way. If I'm proven wrong, I'm happy to fix it, but until further notice, this problem must be considered unfixable.

Mitigation

You can mitigate the issue by specifying an explicit id different from mermaid using the Attribute Lists extension:

## 这是mermaid图表 { #something-else }

@squidfunk squidfunk added bug Issue reports a bug not fixable Issue concerns an unfixable bug and removed needs reproduction Issue lacks a minimal reproduction .zip file labels Feb 21, 2022
@squidfunk
Copy link
Owner

Turns out, we can fix it. Fixed in cfa6474.

@squidfunk squidfunk added resolved Issue is resolved, yet unreleased if open and removed not fixable Issue concerns an unfixable bug labels Mar 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open
Projects
None yet
Development

No branches or pull requests

2 participants