vue公式自动渲染（vue-katex-auto-render）

描述

KaTeX 为网络启用快速数学排版。Vue KaTeX Auto-render是一个插件，可以帮助您将 KaTeX 与 KaTeX 的自动渲染扩展一起使用。

安装

npm install katex vue-katex-auto-render

要求

Vue 2.x

使用

您必须导入它并将其注册为自定义指令。（在main.js文件）

import Katex from 'vue-katex-auto-render'
Vue.directive('katex', Katex);

您可以v-katex在模板的任何元素上使用该指令。然后把你希望 KaTeX 处理的内容放在一些delimiters. 这delimiters是用于查找数学的分隔符列表。每个分隔符具有三个属性：

• left：开始数学表达式的字符串（即左分隔符）。
• right：结束数学表达式的字符串（即右分隔符）。
• display: 表达式中的数学是否应该在显示模式下呈现的布尔值。
• Vue KaTeX 自动渲染的分隔符的默认值为：

[
  {left: "$$", right: "$$", display: true},
  {left: "$", right: "$", display: false},
  {left: "\\(", right: "\\)", display: false},
  {left: "\\[", right: "\\]", display: true} 
]

• 带有v-katex标记的标签中给定分隔符内的任何内容都将被视为需要由 KaTeX 处理的内容。（组件内部使用）

<template>
  <div v-katex>
    $$% Here is some comment
    f({x}) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi$$
  </div>
</template>

上面的代码将具有以下输出。

注意：使用时如果不能正常显示，可替换成变量使用！

• 例:

 <div v-katex>
      {{ text }}
 </div>

 data: () => ({
    text: "$$𝐷_{𝑃_1 𝑃_2 }=max⁡(𝑑𝑖𝑠𝑡(𝑃_1,𝑃_2 ),𝑑𝑖𝑠𝑡(𝑃_2,𝑃_1))$$",
  }),

npm地址
katex:https://www.npmjs.com/package/katex
vue-katex-auto-render：https://www.npmjs.com/package/vue-katex-auto-render