search

zerodevx / zero-md

Ridiculously simple zero-config markdown displayer
https://zerodevx.github.io/zero-md/
ISC License
435 stars 48 forks source link

Mathjax no-shadow window.ZeroMdConfig #87

Closed cdarve245 closed 6 months ago

cdarve245 commented 1 year ago

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.

zerodevx commented 1 year ago

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.

zerodevx commented 6 months ago

V3 is released and adds first-class support for math, so do check it out.

Closing for now, feel free to reopen.