vue2项目中使用markdown-it插件教程，同时解决代码块和较长单词不换行问题

朕的剑还未配妥2025-10-11 17:40

安装及使用markdown-it插件

安装markdown-it插件 npm install markdown-it --save
markdown-it官网
需要使用时首先在页面中引入markdown-it插件，然后computed根据数据生成markdownItContent，使用v-html指令渲染内容即可 注意：v-html可能会出现XSS攻击，可以设置sanitizer为true避免，默认为false，具体可查看markdown-it官网 代码示例

js 复制代码

<template>
    <div class="markdown-it-preview" v-html="markdownItContent">
    </div>
</template>

<script>
import MarkdownIt from 'markdown-it'
export default{
    name: 'markdown-it-preview',
    data(){
        return {
            markdownItContent: '**helloworld**'
        }
    },
    computed: {
        markdownItContent(){
            const md = new MarkdownIt({
                breaks: true // 转换换行符为<br>，更多配置可查看官网
            })
            return md.render(this.markdownItContent)
        }
    }
}
</script>

可能遇到的问题

markdown-it中渲染代码块时，转换为code标签，导致内部段落不会自动换行，不分段会导致撑开宽度，设置white-space:normal即可
markdown-it组件中，如果输入较长的单词，不会自动换行，导致宽度撑开；结合::v-deep和*选择器，在markdown-it组件内设置word-break: break-all 和 overflow-wrap: break-word

css 复制代码

::v-deep .markdown-it-preview *{
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
}

markdown-it常用配置

breaks: true，转换换行符为
html: true，允许渲染html标签
linkify: true，自动识别网址并转换为链接
typographer: true，使用一些语言特定的排版规则，如："--"转换为"---"，"---"转换为"---"，"..."转换为"..."
xhtmlOut: true，使用xhtml语法，如："<br />"，"<hr />"，"<img src='test.jpg' />"
langPrefix: 'language-', 设置代码块的class前缀，默认为hljs，如：<pre><code class="language-javascript">...</code></pre>
highlight: function(str, lang) {}
quotes: '""''', 设置引号类型，默认为""''，如：""''
smartquotes: true, 使用智能引号，如："Hello"转换为"Hello"
smartypants: true, 使用智能排版，如："--"转换为"---"，"---"转换为"---"，"..."转换为"..."