前端渲染markdown文档

<template>

  <div class="markdown-preview">

    <div class="markdown-header">

      <div class="markdown-title">文档</div>

      <div class="markdown-toc" v-html="title"></div>

    </div>

    <div class="markdown-body" v-html="html"></div>

  </div>

</template>

<script setup>

import markdownIt from "markdown-it";

import tocPlugin from "markdown-it-table-of-contents";

import "highlight.js/styles/vs2015.css";

import hljs from "highlight.js/lib/core";

import javascript from "highlight.js/lib/languages/javascript";

import css from "highlight.js/lib/languages/css";

import java from "highlight.js/lib/languages/java";

import json from "highlight.js/lib/languages/json";

import { onMounted, ref } from "vue";

const html = ref("");

const title = ref("<h1>Aleta</h1>");

let markdown = "";

function readTextFile(fileName) {

  var rawFile = new XMLHttpRequest();

  var filePath = location.origin + "/" + fileName;

  rawFile.open("GET", fileName, false);

  rawFile.onreadystatechange = function () {

    if (rawFile.readyState === 4) {

      if (rawFile.status === 200 || rawFile.status == 0) {

        markdown = rawFile.responseText;

        console.log("输出:\n", markdown);

      }

    }

  };

  rawFile.send(null);

}

onMounted(() => {

  readTextFile("../../aleta-card-api-hk.md");

  hljs.registerLanguage("javascript", javascript);

  hljs.registerLanguage("css", css);

  hljs.registerLanguage("java", java);

  hljs.registerLanguage("json", json);

  const md = markdownIt({

    html: true,

    linkify: true,

    highlight: (str, lang) => {

      if (lang && hljs.getLanguage(lang)) {

        try {

          return hljs.highlight(str, { language: lang }).value;

        } catch (err) {}

      }

      return ""; // use external default escaping

    },

  });

  md.use(tocPlugin, { includeLevel: [2, 3] });

  const result = md.render(markdown);

  const tableOfContents = md.toc;

  html.value = result;

  title.value = tableOfContents;

});

</script>

<style scoped>

/* 代码块语法高亮颜色可直接修改module中css文件 */

.markdown-preview {

  display: flex;

  flex-direction: column;

}

.markdown-header {

  display: flex;

  flex-direction: row;

  align-items: center;

}

.markdown-title {

  font-size: 24px;

  font-weight: bold;

  margin-right: 16px;

}

.markdown-toc {

  border-left: 2px solid red;

  padding: 8px;

}

.markdown-toc ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

.markdown-toc li:hover {

  background-color: #eef;

}

.markdown-toc a:hover {

  text-decoration: underline;

}

.markdown-body {

  flex: 1;

}

/* 样式来自 highlight.js 的 atom-one-dark.css */

.hljs {

  display: block;

  overflow-x: auto;

  padding: 0.5em;

  color: #abb2bf;

  background: #282c34;

}

.hljs-comment,

.hljs-quote {

  color: blue;

  font-style: italic;

}

.hljs-doctag,

.hljs-keyword,

.hljs-formula {

  color: #c678dd;

}

.hljs-section,

.hljs-name,

.hljs-selector-tag,

.hljs-deletion,

.hljs-subst {

  color: #e06c75;

}

.hljs-title,

.hljs-variable,

.hljs-template-variable,

.hljs-type,

.hljs-built_in,

.hljs-builtin-name,

.hljs-attr,

.hljs-attribute,

.hljs-class .hljs-title {

  color: #d19a66;

}

.hljs-string,

.hljs-symbol,

.hljs-bullet,

.hljs-addition {

  color: #8ddb55;

}

.hljs-number,

.hljs-meta,

.hljs-literal,

.hljs-link {

  color: #13c3db;

}

.hljs-emphasis {

  font-style: italic;

}

.hljs-strong {

  font-weight: bold;

}

</style>