安装及使用markdown-it插件

1.安装markdown-it插件

npm install markdown-it --save

2.markdown-it官网
markdown-it官网

3.使用示例

<template>
  <div class="app-container pcIndex">
    <div class="answer-text" v-html="renderMarkdown("测试")"></div>
  </div>
</template>

<script>
import MarkdownIt from "markdown-it";

export default {
  name: "MarkdownIt",
  data() {
    return {
      md: new MarkdownIt(),
    };
  },
  methods: {
    renderMarkdown(content) {
      return this.md.render(content);
    },
  },
};
</script>

4.可能遇到的问题

• markdown-it中渲染代码块时，转换为code标签，导致内部段落不会自动换行，不分段会导致撑开宽度，设置white-space:normal即可
• 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常用配置

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, 使用智能排版，如：“–“转换为”—”，“—“转换为”—”，“…“转换为”…”