ant-design-vue/site/components/md.vue
2019-09-28 20:45:07 +08:00

52 lines
1.0 KiB
Vue

<template>
<div class="markdown" v-html="marked(text)" />
</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>