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

安装及使用markdown-it插件

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

<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>

可能遇到的问题

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

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

markdown-it常用配置

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