ant-design-vue/site/components/md.vue
2018-07-13 21:55:29 +08:00

55 lines
1.0 KiB
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>