Render markdown to HTML using zero-md without installing a web framework

— 4 minute read

The idea is simple: I wanted to create an HTML page for a privacy policy, but edit it using Markdown since HTML syntax is cumbersome. I didn't want to install other web frameworks just for a Markdown editor, so I found the zero-md project (Web Component) that meets my requirements.

zero-md boasts zero configuration - you just need one HTML page, import the script from CDN, include the md file content, and it will render Markdown to HTML. The HTML syntax is as follows:

<head>
  ...
  <!-- Import element definition and auto-register -->
  <script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>
</head>
<body>
  ...
  <!-- Profit! -->
  <zero-md src="example.md"></zero-md>
</body>

The privacy policy page I created:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
   <!-- Import element definition and auto-register -->
   <script src="https://cdn.jsdelivr.net/npm/zero-md@3?register" type="module"></script>
   <title>xxxxx's Privacy Policy</title>
</head>
<body>
   <zero-md src="privacy-policy.md">
      <template>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown-light.css">
      </template>
   </zero-md>
</body>
</html>

However, this method only works on the server side, meaning both the HTML and md files must be placed on a Web Server to see the result. Opening the HTML file locally in a browser won't display the content. The developer stated that for security reasons, the md file must be hosted:

Your markdown file(s) must be hosted! Browsers restrict local file access in javascript because security. Standard CORS rules apply.

Reference: