search

mjbvz / vscode-markdown-mermaid

Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
MIT License
651 stars 119 forks source link

Remove chart from code block #62

Closed jasl8r closed 3 years ago

jasl8r commented 4 years ago

Leaving the mermaid content inside a styled code block does not seem correct. We can remove the <pre> block styling by overriding the <pre> tag for mermaid like this:

<pre style="all:unset;"><div class="mermaid">${preProcess(code)}</div></pre>

Thoughts?

mjbvz commented 4 years ago

What problem are you facing?

jasl8r commented 4 years ago

This is to render the chart 'directly' in the document as opposed to inside of a code block, i.e. with the themed background color change or whatever other css styling has been defined for code blocks. Rendering directly to the document seems to be the 'standard' way that a mermaid chart is displayed as evidenced by Azure Devops and GitLab. ADO: https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page GitLab: https://docs.gitlab.com/ee/user/markdown.html#mermaid