CODEWITHSUNDEEP
htmlcssmarkdown
Miranda N
Miranda N

Reputation: 75

Styling a converted Markdown file inside HTML

I have an HTML page with a script to auto-convert a Markdown file. The file is embedded between <zero-md></zero-md>, and does get converted successfully. Now the converted text has to be formatted by my custom stylesheet. As instructed by the script provider, I inserted a snippet that modifies the script's constructor to reference my CSS (to override the default theme). It fails to format the text. Here's my code:

<head>
  <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script> 
  <script>
    window.ZeroMdConfig = {
      cssUrls: [
        'style.css'
      ]
    }
  </script> 
</head>
<body>
  <zero-md src="content.md"></zero-md>
</body>

This is equivalent to:

<head>
  <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script> 
</head>
<body>
  <zero-md src="content.md">
    <template>
      <link rel="stylesheet" href="style.css">
    </template>
  </zero-md>
</body>

Neither works for me.

The path to the css file is correct. Replacing <template><link rel="stylesheet" href="style.css"></template> with <template><style>...</style></template> (i.e. inserting the css code itself into <zero-md></zero-md>) does work, it does the formatting, but I want it to be an external file.

I'm previewing it with Visual Studio, opening the page in Chrome through a port. (Incidentally, when I open the page directly from the browser or drag-drop the HTML onto the browser instead of using VS's preview function, the conversion script fails, it doesn't display the text content of the Markdown file, for whatever reason.)

Any suggestion?

Upvotes: 1

Views: 772

Answers (1)

zerodevx
zerodevx

Reputation: 1591

A bit late, but first things first - ZeroMdConfig should be defined before importing the module:

<head>
  <script>
    window.ZeroMdConfig = {
      cssUrls: [
        'style.css'
      ]
    }
  </script> 
  <script type="module" src=".../zero-md.min.js"></script> 
</head>

You're right that the gist above is semantically equivalent to the one below:

<zero-md src="content.md">
  <template>
    <link rel="stylesheet" href="style.css">
  </template>
</zero-md>

Second thing - if you're using an external stylesheet, that file must be hosted. All modern browsers won't allow a .html file to access the local filesystem for security reasons. So if you're dragging the the .html file into the browser window to open it, I'm quite certain it wouldn't work.

However, when you're previewing it from VSCode, internally VSCode actually launches a HTTP server that serves these files to you - this probably explains why your preview works.

Not sure how else I can help though - perhaps if you can explain your use-case in detail, I (or others) can give some suggestions.

Upvotes: 1

Related Questions