wiki/src/markdown.vue

<template>
  <!-- eslint-disable-next-line vue/no-v-html -->
  <div v-html="render" />
</template>

<script>
import showdown from 'showdown'

const classMap = {
  blockquote: 'blockquote',
  table: 'table',
}

const htmlClassBindings = Object.keys(classMap)
  .map(key => ({
    regex: new RegExp(`<${key}(.*)>`, 'g'),
    replace: `<${key} class="${classMap[key]}" $1>`,
    type: 'output',
  }))

export default {
  data() {
    return {
      render: '',
    }
  },

  emits: ['rendered'],

  name: 'WikiMarkdown',

  props: {
    content: {
      default: '',
      type: String,
    },

    prerender: {
      default: null,
      type: Function,
    },
  },

  watch: {
    content(to) {
      let content = to
      if (this.prerender) {
        content = this.prerender(content)
      }

      const converter = new showdown.Converter({
        extensions: [...htmlClassBindings],
        tables: true,
      })
      converter.setFlavor('github')
      this.render = converter.makeHtml(content)
      this.$emit('rendered')
    },
  },
}
</script>

<style>
.blockquote {
  margin-bottom: 1rem;
  font-size: 1rem;
  border-left: 3px solid rgb(var(--bs-secondary-bg-rgb));
  padding-left: 0.5rem;
}
</style>