mark格式（.md文件）渲染、下载

第一步 npm i marked

然后引入
import { marked } from “marked”;

假设你是要渲染md文件

注意： 用的不是vite 那你的自己去 vue.config配置 config.module.rule(‘md’)
这样你引入import SJXC from “./SJXC.md” 文件才能解读

如果是vite 现在可以什么都不配置 直接引入 但是注意要加 ?raw
import SJXC from “./SJXC.md?raw”;

然后 const markText = marked(SJXC); // 解读成html渲染

最后你在 v-html markText 就能渲染到页面

如果你是接口返回的字符串mark格式
如：const rawMarkdownContent = ref(
“# 数据资产\n\n## 操作流程\n 第一步：\n 1. 登录数据资产平台\n 第二步：\n 1. 创建数据资产\n 2. 创建数据资产元数据\n 3. 创建数据资产元数据属性\n 4. 创建数据资产元数据属性值\n 第三步：\n xxxxxx”,
);
直接丢给const markText = marked(rawMarkdownContent ); // 解读成html渲染
通过这个字符串 你想要下载 .md文件 调用下面这个方法就行

// 导出解读文件
function downloadMdFile() {
if (!rawMarkdownContent.value) {
proxy.$modal.msgWarning(“没有解读内容可导出”);
return;
}

// 创建 Blob 对象
const blob = new Blob([rawMarkdownContent.value], {
type: “text/markdown;charset=utf-8”,
});

// 创建下载链接
const url = URL.createObjectURL(blob);
const link = document.createElement(“a”);
link.href = url;

// 设置文件名，例如：事件解读_2023-10-27.md
const fileName = 事件解读_${new Date().getTime()}.md;
link.download = fileName;

// 触发点击
document.body.appendChild(link);
link.click();

// 清理
document.body.removeChild(link);
URL.revokeObjectURL(url);
}

如果你还想美观一点
可以下载样式 npm install github-markdown-css
然后引入

/* 引入 github markdown 样式 */
@import ‘github-markdown-css/github-markdown.css’;

然后给v-html那里加上类名 class=“markdown-body”