Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Mermaid resets some of the page CSS styles
See original GitHub issue<head>
<!-- ... -->
<link rel="stylesheet" href="/assets/css/all.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/knsv/mermaid/7.0.0/dist/mermaid.css">
<script src="https://cdn.rawgit.com/knsv/mermaid/7.0.0/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad: true;});</script>
</head>
<body>
<div class="mermaid">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
<h1>Foo</h1>
The page is deployed on a local Jekyll server. The h1 styling set by all.css is displayed correctly up until the point when the graph is rendered. The behavior is hard to reproduce: I was not able to reproduce it outside of my own blog served locally via Jekyll. Given this, can you please suggest a quick fix that would guarantee that mermaid will have absolutely no effect beyond a tag I have specified? I do not want it to influence anything else but the contents of the tag I am trying to render.
Issue Analytics
- State:
- Created 7 years ago
- Comments:6
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Passing in option
cloneCssStyles: falsein the configure object passed tomermaid.initialize()fixes a similar problem for me:The issue has been fixed. Now all mermaid CSS are scoped within its own ID so it won’t pollute global CSS.