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

<template>
  <div class="markdown" v-html="marked(text)" />
</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>