# xes-katex


### Foreword
相比MathJax，Katex的解析速度更快，为了解决解析混合文本、实时刷新数据还有更好的和vue结合使用等问题，我们开发了xes-katex。

### Installation

```
npm install xes-katex
```

### Usage

```
import XesKatex from 'xes-katex'
import 'xes-katex/dist/katex.css'

Vue.use(XesKatex)

```
* 在您的html代码中使用（不要忘记转义所有反斜杠）

```
<div v-katex="'其中$$b=\\frac{1}{3}$$．'"></div>
```
* 如果您需要其他分隔符，比如$、&&，您可以全局配置
或者全局配置
```
Vue.use(xesKatex,{
  flag:{left:'$',right:'$'}
})
或Vue.use(xesKatex,{
  flag:[{left:'$$',right:'$$'},{left:'$',right:'$'}]
})
```
* 如果您需要单独配置某一个指令的分隔符，您可以
```
<div v-katex="{content:latex,left:'$',right:'$'}"></div>
```

* 兼容模式，目前katex有一些语法不兼容，可以替换成兼容的语法
如果您不需要兼容模式你可以将添加配置compatible:false（compatible默认true）
默认兼容配置为katex[支持表](https://katex.org/docs/support_table.html)中带有Not supported并且已给出解决方案的的字段
如果您有自定义的兼容配置可以导入自己的配置，传入compatibleConfig

```
Vue.use(xesKatex,{
  flag:{left:'$',right:'$'},
  compatible:true,
  compatibleConfig:{
    "{align}":"{aligned}"
  }
})
```

* 如果您需要修改katex的选项配置

```
Vue.use(xesKatex,{
  flag:{left:'$',right:'$'},
  options:{
    displayMode:true,
    throwOnError:true,
    errorColor:'#FF0000'
  }
})
```

* 具体参数请参考[katex](https://katex.org/)官方文档