2025-06-02

不安裝網頁框架，使用zero-md將Markdown渲染為html

想法很簡單，我想建一個隱私權政策的html頁面，但是用Markdown編輯html，因為html語法很麻煩，又不想為了Markdown編輯器安裝其他網頁框架，後來找到zero-md這個專案（Web組件）可以滿足我的要求。

zero-md標榜零配置，只要一個html頁面，從CDN匯入script，內容包含md檔案，便可將Markdown渲染為html。內容如下：

<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>

我建立的隱私權政策頁面：

<!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>Mynet.tw'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>

但是該方法只能在Server端執行，也就是html和md兩個檔案都要放到Web Server才能看到畫面，本機用瀏覽器開啟html是無法看到畫面。開發者說基於安全考量，必須將md檔案託管：

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

參考文章：

搜尋