zero-md
zero-md copied to clipboard
zerodevx
Mathjax no-shadow window.ZeroMdConfig
Hi,
I have found another small issue that I don't know how to fix. I am using Mathjax with zero-md. I included at the top:
<script>
window.ZeroMdConfig = {
cssUrls: ["../css/bootstrap.css", {other css files...}]
}
</script>
I have multiple entries of the form:
<zero-md src="file1.md" no-shadow></zero-md>
<zero-md src="file2.md" no-shadow></zero-md>
For some reason, the generated HTML file reads the same CSS file multiple times, exactly once per zero-md src entry above.
Here is a minimum example based on the zero-md doc:
<!doctype html>
<html>
<head>
<script>
window.ZeroMdConfig = {
prismUrl: [
['https://cdn.jsdelivr.net/gh/PrismJS/prism@1/prism.min.js', 'data-manual'],
'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/autoloader/prism-autoloader.min.js',
'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/toolbar/prism-toolbar.min.js',
'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'
],
cssUrls: [
'https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4/github-markdown.min.css',
'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css',
'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/toolbar/prism-toolbar.min.css'
]
}
</script>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
</head>
<body>
<zero-md src="fixture.md" no-shadow></zero-md>
<zero-md src="fixture.md" no-shadow></zero-md>
<zero-md src="fixture.md" no-shadow></zero-md>
<zero-md src="fixture.md" no-shadow></zero-md>
</body>
</html>
I have 4 entries with fixture.md and get the CSS repeated 4 times in the output HTML. Note that the CSS gets applied only once (e.g., correctly) when you remove the no-shadow option. But no-shadow is required to have Mathjax working correctly with zero-md.
The HTML page displays correctly, but it's annoying to have the CSS applied multiple times. It ends up increasing the loading time quite a bit.
I have 4 entries with fixture.md and get the CSS repeated 4 times in the output HTML.
Not sure if I get what you mean. Styles are added into a <div class="markdown-styles /> wrapper for every zero-md instance, but this is expected behaviour - same thing happens without no-shadow.
With no-shadow, styles are not encapsulated so applies on the entire doc, but even with multiple declarations in HTML, the browser is smart enough to download any external stylesheets only once, and apply it only once.
