vue.js - 如何使用 markdown-it-vue 库的插件?
问题描述
我正在使用Markdown vue,它是 vue 的插件。它说它应该内置上标和下标功能,但是当我运行下标的代码时,我得到的东西看起来像这样
y = x b + e
i i i
为了拥有这个功能,我正在尝试使用这个插件,但我很难弄清楚它应该如何在MarkdownItVue
插件中全局注册。我试过这样做...
import MarkdownItVue from 'markdown-it-vue'
import MarkdownItSub from 'markdown-it-sub'
MarkdownItVue.use(MarkdownItSub)
Vue.use(MarkdownItVue)
但这正在解决...
如果有更简单的解决方法,我也很乐意改变方法MarkdownItVue
更新
索引.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>
应用程序.js
new Vue ({
el: '#app',
data() {
return {
msg: "$y_i = x_i + \\epsilon_i$"
}
}
})
解决方案
默认情况下它似乎工作得很好。请参阅示例。
无论如何,从文档看来,如果您需要安装其他markdown-it
插件,则需要在组件实例上完成
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>
推荐阅读
- html - 如何在 CSS 中将跨度文本居中放置在图像旁边
- javascript - 在导出进行单元测试之前等待应用程序?
- function - 函数是否有 Perl 严格的符号解析语法?
- c# - 这个模式匹配表达式是否等价于 not null
- typescript - npm 包中的自定义 TypeScript 声明文件不起作用
- javascript - 如何在我的 Electron 应用上使用 PFTron WebViewer?
- amazon-web-services - 从 AWS 托管批处理作业中获取实例类型
- c# - 为什么我不能指定从 AC# 函数返回的数组的大小?
- c - 为什么我们没有ccflags-m,而是ccflags-y?
- c# - Visual Studio 2019 历史调试不适用于 Fip