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

82 lines
1.8 KiB
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>