如何使用 markdown-it-vue 库的插件？

Question

我正在使用 markdown vue，这是一个 vue 插件。它说它应该内置上标和下标功能，但是当我运行下标代码时，我得到的东西看起来像这样

  y = x b + e
   i   i     i

为了拥有此功能，我正在尝试使用 this 插件，但我很难弄清楚如何使用 MarkdownItVue 插件在全球范围内注册它。我试过这样做...

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

MarkdownItVue.use(MarkdownItSub)
Vue.use(MarkdownItVue)

但这正在解决...

如果 MarkdownItVue

有更简单的修复方法，我也很乐意改变方法

更新

index.html

<!DOCTYPE html>
<head>
    <title>Hello World</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
    
    <div id="app">
        <div>
            {{ msg }}
        </div>
        <markdown-it-vue :content="msg" class="md-body"></markdown-it-vue>
    </div>
    <script src="app.js"></script>
</body>

app.js

new Vue ({
    el: '#app',
    data() {
        return {
            msg: "$y_i = x_i + \epsilon_i$"
        }
    }
})

Answer 1

默认情况下似乎工作正常。请参阅示例。

无论如何，从文档看来，如果您需要安装额外的 markdown-it 插件，则需要安装 on component instance

const vm = new Vue({
  el: "#app",
  data() {
    return {
      content: "H~2~0 - 29^th^"
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">

<div id="app">
 <markdown-it-vue :content="content">
 </markdown-it-vue>
</div>

Answer 2

LaTeX 渲染需要来自 markdown-it-vue 的样式表。确保将其包含为 <link>:

<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">

new Vue({
  el: "#app",
  data() {
    return {
      content: "$y_i = x_i + \epsilon_i$"
    }
  }
})

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue@1.1.6/dist/markdown-it-vue.css">

<div id="app">
  <markdown-it-vue class="md-body" :content="content"></markdown-it-vue>
</div>

或从 markdown-it-vue/dist/markdown-it-vue.css 导入文件：

demo

如何使用 markdown-it-vue 库的插件？

How to use a plugin for markdown-it-vue library?

markdown

vue.js