Katexを使った数式表示用vueコンポーネントの作成例

はじめに

Katexを使って数式を表示させるvueコンポーネントの作成例を示します。

条件

• Katex 0.9.0
• vuejs 2.9.3

結果

katexコンポーネントの作り方と使い方を示します。

vueファイル

Katex.vue

<template>
  <span :id="name">
    <slot>...</slot>
  </span>
</template>

<script>
export default {
  props: ['name'],
  mounted() {
    const element = document.getElementById(this.name)
    katex.render(this.$slots.default[0].text, element)  //-----(1)
  }
}
</script>

(1)の行にてslotで受け取ったデータをkatexのrender関数に渡しています。this.$slots.default[0].textの部分はstackoverflow(*1)とVuejs公式サイト(*2)を参照しました。

HTMLファイル

nameプロパティは数式の名前にしています。

    <katex name="position-of-mass">\overrightarrow{p_1}</katex>
    <katex name="simple-matrix">
      \begin{pmatrix}
         a & b \\
         c & d
      \end{pmatrix}
    </katex>

ライブラリ(*3)も追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css" integrity="sha384-TEMocfGvRuD1rIAacqrknm5BQZ7W7uWitoih+jMNFXQIbNl16bO8OZmylH/Vi/Ei" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.js" integrity="sha384-jmxIlussZWB7qCuB+PgKG1uLjjxbVVIayPJwi6cG6Zb4YKq0JIw+OMnkkEC7kYCq" crossorigin="anonymous"></script>

おわりに

Katexを使って数式を表示させるvueコンポーネントの作成例を示しました。

参照

1. stackoverflow https://stackoverflow.com/questions/42950967/how-to-reference-text-thats-in-slot-slot-in-vue-js
2. Vuejs API https://vuejs.org/v2/api/index.html#vm-slots
3. Katex https://github.com/Khan/KaTeX