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';
const 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,
  },
  inject: {
    demoContext: { default: {}},
  },
  data () {
    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(this.demoContext.name) ? cn : us;
    }
    text = text || '';
    text = text.split('\n').map(t => t.trim()).join('\n');
    return {
      marked,
      text,
    };
  },
};
</script>