使用markdown-it时，解决markdown语法中的引用块样式无效果问题

最近项目中需要显示markdown文档,一番查找对比，最终选择了markdonw-it这个开源库.

但在使用时候发现对markdown中的引用块语法没有任何样式效果，只显示单纯的文字。

<template>
    <div v-html="
        markdownit.render(`>测试引用块
    >测试引用块`)">

    </div>
</template>
<script setup>
import mdit from 'markdown-it';
let markdownit = new mdit({
    html: true,
    xhtmlOut: false,
    breaks: true,
})

</script>

很显然和我们在编写markdown文档的编辑器里显示的不一样。

使用浏览器的元素查看工具发现markdown-it将引用块换成了如下标签

<blockquote>
</blockquote>

并且发现就个标签默认没有任何样式
这样大概就知道了markdown-it这个库只负责将markdown文本转成html文本。并没有添加任何样式，样式需要自己添加。

知道了原因就容易解决了。

<template>
    <div v-html="
    markdownit.render(`>测试引用块
    >测试引用块`)">

    </div>
</template>
<script setup>
import mdit from 'markdown-it';
let markdownit = new mdit({
    html: true,
    xhtmlOut: false,
    breaks: true,
})

</script>

<style lang="css" scoped>
/* 引用块的样式 */
:deep(blockquote) {
    display: block;
    padding-left: 16px;
    padding-right: 16px;
    margin: 0 0 24px;
    border-left: 8px solid #dddfe4;
    background-color: #eef0f4;
    overflow: auto;
    word-break: normal;
}
</style>

这样看起来就舒服多了。

版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：使用markdown-it时，解决markdown语法中的引用块样式无效果问题