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.
|
|
|
|
<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>
|
