用到的插件有：
marked、
highlight.js、
github-markdown-css
安装命令
// 安装 marked
npm install marked
// 安装 highlight.js
npm install highlight.js
// 安装 github-markdown-css > 复制 GitHub Markdown 样式
npm install github-markdown-css
开始使用
不要忘记在标签内的
class
写入
markdown-body
<article class="markdown-body" v-html="result"></article>
如果想要给代码块加上行号，可以参考
Vue3+highlight.js实现代码高亮 + 行号
同时
marked文档 也提供了一些选项
import { marked } from 'marked'
import hljs from 'highlight.js' // 代码块高亮
import 'highlight.js/styles/github.css' // 代码块高亮样式
import 'github-markdown-css' // 整体 markdown 样式
const result = ref('');
// 要显示的 Markdown 文件内容
const content = `# Vue实现Markdown文件内容显示
> 用到的插件有：marked、highlight.js、github-markdown-css
| 插件 | 备注 |
| --------- | ------------- |
| marked | markdown 显示 |
| highlight | 代码高亮 |`;
result.value = marked.parse(content, {
highlight: function (code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
});
显示效果
