VueJS c omponent transforming Markdown and LateX in HTML

MarkdownMathJax.md

The MarkdownMathJax's VueJS component transforms a Markdown and LateX string into HTML.

It uses markdown-it and MathJax.

The following piece of code supposes that:

• it runs in a nuxt project with the following nuxt.config.js config:

modules: [
  '@nuxtjs/markdownit'
 ],
// [optional] markdownit options
markdownit: {
  injected: true,
  preset: 'default',
  linkify: true,
  html: true,
  breaks: false,
  use: [
    // 'markdown-it-mathjax',
    'markdown-it-container',
    'markdown-it-attrs'
  ]
},

• it uses MathJax to render LateX in HTML.

--- MarkdownMathJax.vue ---

<template>
  <span ref="mathJaxEl" v-html="readMD()" class="e-mathjax"></span>
</template>

<script>
export default {
  props: [ 'mdData' ],

  methods: {
    readMD () {
      return this.$md.render(this.mdData) 
    },

    renderMathJax () {
      if(window.MathJax) {
        window.MathJax.Hub.Config({
          tex2jax: {
            inlineMath: [ ['$','$'], ["\(","\)"] ],
            displayMath: [ ['$$','$$'], ["\[","\]"] ],
            processEscapes: true,
            processEnvironments: true
          },
          // Center justify equations in code and markdown cells. Elsewhere
          // we use CSS to left justify single line equations in code cells.
          displayAlign: 'center',
          "HTML-CSS": {
            styles: {'.MathJax_Display': {"margin": 0}},
            linebreaks: { automatic: true }
          }
        });
        window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub,this.$refs.mathJaxEl]);
      }
    }
  },

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

  mounted () {
    this.renderMathJax()
  }
}
</script>

--- End of MarkdownMathJax.vue ---

This really works and thanks for documenting this.