使用Vue3脚手架，可以使用marked库将
Markdown文件渲染成HTML页面，并通过highlight.
js库实现代码块的高亮和行号显示。下面是具体的步骤：
1. 安装所需的库
使用npm或yarn安装marked和highlight.
js库：
```shell
npm install marked highlight.
js --save
```
2. 创建一个
Markdown文件
在src目录下创建一个
Markdown文件，例如example.md，用于测试渲染
Markdown的功能。
```
markdown
# Hello, world!
这是一个示例
Markdown文件。
## 代码块
```
js
function hello() {
console.log("Hello, world!");
}
```
以上是一个
JavaScript代码块。
## 列表
- 列表项1
- 列表项2
- 列表项3
```
3. 创建一个
Markdown组件
在src/components目录下创建一个
Markdown组件，例如
Markdown.vue，用于渲染
Markdown文件。
```vue
<template>
<div v-html="
markdown"></div>
</template>
<script>
import marked from "marked";
import hl
js from "highlight.
js";
export default {
name: "
Markdown",
props: {
source: String,
},
computed: {
markdown() {
return marked(this.source, {
highlight: function (code, lang) {
if (lang && hl
js.getLanguage(lang)) {
return hl
js.highlight(lang, code).value;
}
return hl
js.highlightAuto(code).value;
},
langPrefix: "hl
js language-",
breaks: true,
gfm: true,
});
},
},
};
</script>
<style>
.hl
js-line-numbers {
text-align: right;
border-right: 1px solid #ccc;
color: #999;
padding-right: 5px;
}
</style>
```
在组件中，我们使用marked库将
Markdown文件渲染成HTML页面，通过props属性接受
Markdown文件的路径或字符串。同时，我们传递一个highlight函数给marked库，使用highlight.
js对代码块进行高亮。另外，我们使用hl
js-line-numbers类为代码块添加行号显示。
4. 在页面中使用
Markdown组件
在需要显示
Markdown文件的页面中，引入
Markdown组件，传递
Markdown文件的路径或字符串作为source属性的值。
```vue
<template>
<div>
<
Markdown :source="
markdown" />
</div>
</template>
<script>
import
Markdown from "@/components/
Markdown.vue";
import example
Markdown from "@/example.md";
export default {
name: "App",
components: {
Markdown,
},
data() {
return {
markdown: example
Markdown,
};
},
};
</script>
```
在页面中引入
Markdown组件，并将example.md
文件作为
markdown属性的值传递给
Markdown组件。
这样，当页面加载时，
Markdown组件将会把example.md
文件渲染成HTML页面，并且代码块会被高亮并且显示行号。
这篇博客介绍了如何在前端使用JavaScript读取Markdown文件，并进行渲染。首先引入mark.js，然后创建Markdown显示区域，接着设置Markdown的CSS样式，通过JS获取Markdown文本内容并进行渲染。提供了完整的代码示例，并提供资源下载链接。
订阅专栏 解锁全文
扫一扫
1259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
