ant-design-vue/site/components/md.vue

<template>
  <div v-html="marked(text)" class="markdown" />
</template>
<script>
import marked from 'marked'
import { isZhCN } from '../util'
var renderer = new marked.Renderer();
renderer.heading = function(text, level) {
  return '<h'
    + level
    + ' id="'
    + text.replace(/[^\w]+/g, '-')
    + '">'
    + text
    + '</h'
    + level
    + '>\n';
};
marked.setOptions({
  renderer,
  gfm: true,
  tables: true,
  breaks: true,
  pedantic: true,
  sanitize: true,
  smartLists: true,
  smartypants: true,
})
export default {
  name: 'md',
  props: {
    cn: String,
    us: String,
  },
  data () {
    const { name } = this.$route.params
    let text = ''
    const { cn, us } = this
    if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
      text = this.$slots.default[0].text
    } else {
      text = isZhCN(name) ? cn : us
    }
    text = text || ''
    text = text.split('\n').map(t => t.trim()).join('\n')
    return {
      marked,
      text,
    }
  },
}
</script>