如何在markdown-it-vue中注册markdown-it-sub插件实现markdown上下标功能

你之前的插件注册方式不符合markdown-it-vue的调用规范，同时如果是LaTeX公式下标渲染异常，大概率是缺失KaTeX样式。下面分场景给出修复方案：

场景1：实现普通Markdown下标（写法如x~i~） #

NPM项目全局注册配置：

import MarkdownItVue from 'markdown-it-vue'
import MarkdownItSub from 'markdown-it-sub'

Vue.use(MarkdownItVue, {
  markdownIt: {
    plugins: [MarkdownItSub]
  }
})

CDN引入项目配置：

1. 先在index.html中引入markdown-it-sub的CDN资源：

<script src="https://unpkg.com/markdown-it-sub@1.0.0/dist/markdown-it-sub.min.js"></script>

2. 调整markdown-it-vue组件的属性配置：

<markdown-it-vue :content="msg" class="md-body" :markdown-it="{plugins: [window.markdownitSub]}"></markdown-it-vue>

场景2：修复LaTeX公式下标（写法如$y_i$）渲染异常 #

你当前代码中使用的是LaTeX公式语法，markdown-it-vue默认内置KaTeX支持，渲染异常是因为缺失KaTeX样式，在index.html的head标签中添加样式引入即可：

<link rel="stylesheet" href="https://unpkg.com/katex@0.11.1/dist/katex.min.css">

修改后你代码中的$y_i = x_i + \\epsilon_i$即可正常渲染为带正确下标的数学公式。

内容的提问来源于stack exchange，提问作者financial_physician