l-md.html

<template component>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.6.1/github-markdown.min.css"
    integrity="sha512-heNHQxAqmr9b5CZSB7/7NSC96qtb9HCeOKomgLFv9VLkH+B3xLgUtP73i1rM8Gpmfaxb7262LFLJaH/hKXyxyA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <link rel="stylesheet" id="theme-stylesheet" href="" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <style>
    .markdown-body {
      font-size: 18px;
    }

    @media screen and (max-width: 768px) {
      .markdown-body {
        font-size: 16px;
      }
    }
  </style>

  <div class="markdown-body" :html="content" on:click="onContentClick"></div>

  <script>
    // 解析 markdown
    import { Marked } from "https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.2/lib/marked.esm.min.js";
    import { markedHighlight } from "static/marked/marked-highlight.js";

    // 语法高亮
    import hljs from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/highlight.min.js";
    import bash from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/bash.min.js";
    import xml from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/xml.min.js";
    import css from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/css.min.js";
    import javascript from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/javascript.min.js";
    import typescript from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/typescript.min.js";

    hljs.registerLanguage("bash", bash);
    hljs.registerLanguage("xml", xml);
    hljs.registerLanguage("css", css);
    hljs.registerLanguage("js", javascript);
    hljs.registerLanguage("ts", typescript);

    const marked = new Marked(
      markedHighlight({
        langPrefix: "hljs language-",
        highlight(code, lang, info) {
          const language = hljs.getLanguage(lang) ? lang : "bash";
          return hljs.highlight(code, { language }).value;
        },
      }),
    );
    // 自定义 renderer
    const renderer = new marked.Renderer();
    renderer.link = ({ text, href, title, ...rest }) => {
      if (href.startsWith("./doc/") || href.startsWith("doc/")) {
        return `<a href="page.html?p=${href}" title="${title || text || ""
          }" olink>${text}</a>`;
      } else {
        return `<a href="${href}" title="${title || text || ""
          }" target="_blank" rel="noreferrer">${text}</a>`;
      }
    };

    marked.use({ renderer });

    export default {
      attrs: {
        src: "",
        md: "",
      },
      data: {
        content: "",
      },
      proto: {
        loadCodeTheme() {
          const themeStylesheet = this.shadow.$("#theme-stylesheet");

          if (!themeStylesheet) return;

          // 检查用户的系统主题偏好
          const prefersDarkScheme = window.matchMedia(
            "(prefers-color-scheme: dark)",
          );

          // 根据用户的偏好加载不同的 CSS 文件
          themeStylesheet.ele.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/base16/${prefersDarkScheme.matches ? "onedark" : "one-light"
            }.min.css`;
        },
        parseMd() {
          fetch(this.src)
            .then((res) => res.text())
            .then((data) => {
              this.content = marked.parse(data);
              this.shadow.emit("mdparsed", {
                data: this,
                composed: true,
              });
            });
        },
        onContentClick(event) {
          if (
            event.target.tagName === "A" &&
            event.target.hasAttribute("olink")
          ) {
            this.shadow.emit("link-click", {
              data: event,
              composed: true,
            });
          }
        },
      },
      watch: {
        src(src) {
          if (!src) return;
          this.parseMd();
        },
        md(mdText) {
          if (mdText) {
            this.content = marked.parse(mdText);
          } else {
            this.content = ''
          }
        },
      },
      ready() {
        this.loadCodeTheme();
        setTimeout(() => {
          this.shadow.emit("mdready", {
            data: this,
            composed: true,
          });
        }, 0);
      },
    };
  </script>
</template>