You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.8 KiB
82 lines
1.8 KiB
<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>
|