katex-vue3

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官方文档