markdown预览器

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 117 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Markdown 预览器</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 20px;
      }
      h1,
      h2 {
        color: #333;
      }
      code {
        background-color: #f4f4f4;
        padding: 2px 5px;
        border-radius: 3px;
      }
      pre {
        background-color: #f4f4f4;
        padding: 10px;
        border-radius: 3px;
        overflow-x: auto;
        white-space: pre-wrap; /* 允许换行 */
        width: 80%; /* 设置宽度为60% */
      }
    </style>
    <!-- Highlight.js 样式与脚本 -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.0/marked.min.js"></script>
  </head>

  <body>
    <div id="content"></div>
    <script>
      // 配置 marked 使用 highlight.js
      marked.setOptions({
        highlight: function (code, lang) {
          // 如果指定了语言并且 highlight.js 支持这个语言
          if (lang && hljs.getLanguage(lang)) {
            return hljs.highlight(code, { language: lang }).value;
          } else {
            // 自动检测语言
            return hljs.highlightAuto(code).value;
          }
        },
      });

      // 加载 README.md 文件
      fetch("/test.md") // 确保此文件放在同一目录下
        .then((response) => {
          if (!response.ok) {
            throw new Error("网络异常");
          }
          return response.text(); // 转换为文本
        })
        .then((data) => {
          const html = marked(data);
          document.getElementById("content").innerHTML = html;
          // 让 highlight.js 对页面中所有代码块执行高亮处理
          document.querySelectorAll("pre code").forEach((block) => {
            hljs.highlightElement(block);
          });
        })
        .catch((error) => {
          console.error("加载失败:", error);
        });
    </script>
  </body>
</html>