【Nuxt】マークダウン内のLateXをMathJaxで数式に変換する方法

どーも、ぐるたか@guru_takaです。

Nuxtにて、マークダウン内のLateXをMathJaxで数式化することがあったので、その方法をまとめておきます！

スポンサードリンク

前提：'nuxtjs/markdownit'がインストール済み
マークダウン内のLateXを数式化する方法
- 簡単な解説
参考リンク

前提：`'nuxtjs/markdownit'`がインストール済み

Nuxt環境で、マークダウンをhtml化するのに重宝する'@nuxtjs/markdownit'がインストールされていることが前提です。

導入方法については、以下の記事にて解説しているので、初見の方はぜひ参考にしてみて下さい！

【Nuxt】@nuxtjs/markdownitでマークダウンからhtmlに生成する方法

マークダウン内のLateXを数式化する方法

以下のGihub Gist 内のソースを参考に進めていきます。

参考 VueJS c omponent transforming Markdown and LateX in HTML

まず、nuxt.config.jsに以下コードを追記します。

nuxt.config.js

    script: [
      {
        src:
          'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_HTML'
      }
    ],

その後、LateXを数式に変換したいvueファイルに対し、以下のようにコードを書けばOKです！

sample.vue

<template>
      <div v-html="$md.render(マークダウンのテキスト代入)"></div>
</template>
............


<script>
import ipynb2html from '@/plugins/ipynb2html'

export default {

............

  mounted() {
    this.renderMathJax()
  },
    methods: {
    renderMathJax() {
      if (window.MathJax) {
        window.MathJax.Hub.Config({
          TeX: { equationNumbers: { autoNumber: 'AMS' } },
          tex2jax: {
            inlineMath: [
              ['$', '$'],
              ['\\(', '\\)']
            ],
            processEscapes: true
          },
          'HTML-CSS': { matchFontHeight: false },
          displayAlign: 'center',
          displayIndent: '2em'
        })
        window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub])
      }
    }
  }
}

............

window.MathJax.Hub.Configの設定は、好きなように変更できます。

ググってみると参考になる記事が色々ありますので、チェックしてみると良いでしょう！

参考 MathJaxによる数式表示参考 Web上で綺麗な数式を記述できるMathjax.jsプラグインの使い方 | SPYWEB