@mathssyfy/plugin-markdown/src/index.js

import markdownIt from 'markdown-it'
import emoji from 'markdown-it-emoji'
import subscript from 'markdown-it-sub'
import superscript from 'markdown-it-sup'
import footnote from 'markdown-it-footnote'
import deflist from 'markdown-it-deflist'
import abbreviation from 'markdown-it-abbr'
import insert from 'markdown-it-ins'
import mark from 'markdown-it-mark'
import toc from 'markdown-it-toc-and-anchor'
import katex from 'markdown-it-katex-newcommand'
import tasklists from 'markdown-it-task-lists'
import container from 'markdown-it-container'
import prism from 'markdown-it-prism'
import preWrapper from '@mathssyfy/markdown-it-prewrapper'
import anchorPlugin from 'markdown-it-anchor'
import tocPlugin from 'markdown-it-table-of-contents'

//tests
import lineNumbers from './lineNumbers' //Probleme avec babel
import hightlightLines from './hightlightLines'//Meme problème

///

import './scss/theme.scss'
import { propsMakrdown } from './propsMakrdown';


export default {
  md: new markdownIt(),

  template: '<div><slot></slot></div>',

  data() {
    return {
      sourceData: this.source,
    }
  },

  props: propsMakrdown,

  computed: {
    tocLastLevelComputed() {
      return this.tocLastLevel > this.tocFirstLevel ? this.tocLastLevel : this.tocFirstLevel + 1
    }
  },

  render(createElement) {
    this.md = new markdownIt()
    this.md.set({
      html: this.html,
      xhtmlOut: this.xhtmlOut,
      breaks: this.breaks,
      linkify: this.linkify,
      typographer: this.typographer,
      langPrefix: this.langPrefix,
      quotes: this.quotes,
    })
    mdAnchor();

    ifToc();

    let outHtml = this.show ?
      this.md.render(
        this.prerender(this.sourceData)
      ) : ''
    outHtml = this.postrender(outHtml);

    this.$emit('rendered', outHtml)
    return createElement(
      'div', {
        domProps: {
          innerHTML: outHtml,
        },
      },
    )
  },

  beforeMount() {
    if (this.$slots.default) {
      this.sourceData = ''
      for (let slot of this.$slots.default) {
        this.sourceData += slot.text
      }
    }

    this.$watch('source', () => {
      this.sourceData = this.prerender(this.source)
      this.$forceUpdate()
    })

    this.watches.forEach((v) => {
      this.$watch(v, () => {
        this.$forceUpdate()
      })
    })
  },
}

function mdAnchor() {
  this.md.renderer.rules.table_open = () => `<table class="${this.tableClass}">\n`;
  let defaultLinkRenderer = this.md.renderer.rules.link_open ||
    function (tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options);
    };
  this.md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
    Object.keys(this.anchorAttributes).map((attribute) => {
      let aIndex = tokens[idx].attrIndex(attribute);
      let value = this.anchorAttributes[attribute];
      if (aIndex < 0) {
        tokens[idx].attrPush([attribute, value]); // add new attribute
      }
      else {
        tokens[idx].attrs[aIndex][1] = value;
      }
    });
    return defaultLinkRenderer(tokens, idx, options, env, self);
  };
}

function ifToc() {
  if (this.toc) {
    this.md.use(toc, {
      tocClassName: this.tocClass,
      tocFirstLevel: this.tocFirstLevel,
      tocLastLevel: this.tocLastLevelComputed,
      anchorLink: this.tocAnchorLink,
      anchorLinkSymbol: this.tocAnchorLinkSymbol,
      anchorLinkSpace: this.tocAnchorLinkSpace,
      anchorClassName: this.tocAnchorClass,
      anchorLinkSymbolClassName: this.tocAnchorLinkClass,
      tocCallback: (tocMarkdown, tocArray, tocHtml) => {
        if (tocHtml) {
          if (this.tocId && document.getElementById(this.tocId)) {
            document.getElementById(this.tocId).innerHTML = tocHtml;
          }
          this.$emit('toc-rendered', tocHtml);
        }
      },
    });
  }
}

// makdown-it-container
function createContainer (klass, defaultTitle) {
  return [container, klass, {
    render (tokens, idx) {
      const token = tokens[idx]
      const info = token.info.trim().slice(klass.length).trim()
      if (token.nesting === 1) {
        return `<div class="${klass} custom-block"><p class="custom-block-title">${info || defaultTitle}</p>\n`
      } else {
        return `</div>\n`
      }
    }
  }]
}