Vue项目markdown内容预览显示优化方式
作者：Qredsun
在Vue项目中使用markdown-it组件预览Markdown内容时,通过安装pnpm和markdown-it-github-markdown-css依赖,并重写markdown部分样式,实现了Markdown内容的美化,在MarkdownPreview.vue组件中,通过变量renderedMarkdown接收并渲染Markdown内容
背景
Vue项目中需要对markdown内容进行预览，使用markdown-it组件实现功能后，发现样式比较丑，需要进行优化一下
实现
安装依赖
pnpm add markdown-it github-markdown-css
重写markdown的部分样式。
- MarkdownPreview.vue
<template>
<div v-html="renderedHtml" class="markdown-body"></div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import MarkdownIt from 'markdown-it'
interface Props {
content: string;
}
const props = defineProps<Props>()
// 初始化 markdown-it 实例
const md = new MarkdownIt({
html: true, // 允许 HTML 标签
breaks: true, // 支持换行
linkify: true // 自动识别链接
})
const renderedHtml = ref('')
// 监听 content 变化，重新渲染 markdown
watch(
() => props.content,
(newContent) => {
renderedHtml.value = md.render(newContent)
},
{ immediate: true }
)
</script>
<style>
@import "github-markdown-css/github-markdown-light.css";
.markdown-body {
padding: 20px;
line-height: 1.7;
font-size: 14px;
}
.markdown-body ul,
.markdown-body ol {
margin-left: 1.2em;
margin-bottom: 1em;
}
.markdown-body li {
margin-bottom: 0.4em;
}
.markdown-body table {
border-collapse: collapse;
width: 100%;
}
.markdown-body table,
.markdown-body th,
.markdown-body td {
border: 1px solid #d0d7de;
padding: 8px;
}
.markdown-body th {
background-color: #f6f8fa;
}
</style>
其他模块进行引用
变量 renderedMarkdown 是stirng类型的Markdown内容
<MarkdownPreview :content="renderedMarkdown" />
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。