vue 如何使用 markdown-it 渲染项目中的md文件

Question

<template>
  <div :class="CSS.root" v-html="res" />
</template>

<script lang="ts" setup>
const mdIt = require("markdown-it");
const md = new mdIt();
const res = md.render("# Hello");
<script>

如以上代码，能够正常渲染，现在有个文件pages/index.md，如何通过render() 渲染出来；

或者有其它办法也可以

Answer 1

可以把md文件放到前端的静态包文件public/static/md/**中，然后用ajax的方式去请求。response就是md的文件内容了，然后你再执行render

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

如果是 vite 项目建议你直接使用 vite-plugin-md，项目地址

Answer 3

你这涉及到文件的转换了，单纯使用js应该不行，我有一个想法，自己写一个插件，把md文件转成js文件，内容如export const mdString = "### 我是一个标题"，然后引用这个变量传给markdown-it处理。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 4

首先，在浏览器里面肯定是没法渲染的，因为拿不到文件本身。

因此自能在打包阶段（node.js打包）使用 node.js 读取该文件并进行预处理之后注入到 node 全局变量中，然后调用它。

Answer 5

还是建议楼主换方式吧，Vue 中 MD 的插件如 markdown-it、Remark.js、marked.js ，建议选择marked.js，因为它的星星最多，bug 少，可以直接通过脚手架一键安装，岂不快哉。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。