katex-vue3
v0.0.6
Published
katex use vue3
Downloads
88
Maintainers
Readme
katex-vue3
Foreword
The vue3 version of katex can parse mixed text
katex的vue3版本,可以解析混合文本.
点击查看在线例子:online
Click to view online example:online
Katex version:0.15.3
Katex版本:0.15.3
Installation
yarn add katex-vue3
Usage
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import katexvue3 from 'katex-vue3'
createApp(App)
.use(router)
.use(katexvue3, {
flag: [
{ left: '$', right: '$' },
{ left: '$$', right: '$$' },
],
options: {
displayMode: false, // 是否显示为公式模式
throwOnError: false, //设置为true时,将在控制台抛出错误,而不是输出错误信息
errorColor: '#FF0000' // 错误信息的颜色
}
}).mount('#app')
- 在您的 html 代码中使用(不要忘记转义所有反斜杠)
<div v-katex="'其中$$b=\\frac{1}{3}$$.'"></div>
- 如果您需要单独配置某一个指令的分隔符,您可以
<div v-katex="{content:latex,left:'$',right:'$'}"></div>
- 兼容模式,目前 katex 有一些语法不兼容,可以替换成兼容的语法 如果您不需要兼容模式你可以将添加配置 compatible:false(compatible 默认 true) 默认兼容配置为 katex支持表中带有 Not supported 并且已给出解决方案的的字段 如果您有自定义的兼容配置可以导入自己的配置,传入 compatibleConfig
createApp(App).use(katexvue3, {
flag: [
{ left: '$', right: '$' },
{ left: '$$', right: '$$' },
],
options: {
displayMode: false, // 是否显示为公式模式
throwOnError: false, //设置为true时,将在控制台抛出错误,而不是输出错误信息
errorColor: '#FF0000' // 错误信息的颜色
},
compatible:true,
compatibleConfig:{
"{align}":"{aligned}"
}
}).mount('#app')
- 具体参数请参考katex官方文档