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

<template>
<div>
  <demo-box :jsfiddle="jsfiddle">
    <template slot="component"><slot /></template>
    <template slot="description">
      <div v-html="cnHtml"></div>
    </template>
    <template slot="us-description">
      <div v-html="usHtml"></div>
    </template>
    <template slot="code">
      <div v-html="codeHtml"></div>
    </template>
  </demo-box>
</div>
</template>

<script>
import marked from 'marked';
const hljs = require('highlight.js');
const replaceDelimiters = function (str) {
  return str.replace(/({{|}})/g, '<span>$1</span>');
};
const renderHighlight = function (str, lang) {
  if (!(lang && hljs.getLanguage(lang))) {
    return '';
  }

  try {
    return replaceDelimiters(hljs.highlight(lang, str, true).value);
  } catch (err) {}
};
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,
  html: true,
  highlight: renderHighlight,
});
const cnReg = /<cn>([\S\s\t]*?)<\/cn>/;
const usReg = /<us>([\S\s\t]*?)<\/us>/;
export default {
  name: 'demoContainer',
  props: ['code'],
  data () {
    const cn = this.code.match(cnReg) || [];
    const us = this.code.match(usReg) || [];
    const cnHtml = marked(cn[1].trim());
    const usHtml = marked(us[1].trim());
    const sourceCode = this.code.replace(cn[0], '').replace(us[0], '').trim();
    const codeHtml = marked('````html\n' + sourceCode + '````');
    return {
      codeHtml,
      cnHtml,
      usHtml,
      jsfiddle: {
        sourceCode,
        cn: cn[1].trim(),
        us: us[1].trim(),
      },
    };
  },
};
</script>