cv-markdown-show markdown显示组件 ¶
简要 ¶
独立扩展
用于显示 markdown文本
示例 ¶
::: demo
vue
<template>
<div>
<cv-markdown-show :modelValue="content1" />
<!-- <cv-markdown-show>{{ content2 }}</cv-markdown-show> -->
<cv-markdown-show :modelValue="source"></cv-markdown-show>
<cv-markdown-show :anchor-attributes="anchorAttrs">[A link to a website](https://google.com)</cv-markdown-show>
<cv-markdown-show></cv-markdown-show>
</div>
</template>
<script>
export default {
data() {
return {
content1: `
### Solar System Exploration, 1950s – 1960s
- [ ] Mercury
- [x] Venus
- [x] Earth (Orbit/Moon)
- [x] Mars
- [ ] Jupiter
- [ ] Saturn
- [ ] Uranus
- [ ] Neptune
- [ ] Comet Haley
`,
content2: `
**Block Math**
The time of **NOW** is :
**Inline Math**: $\sqrt{3x-1}+(1+x)^2$
SyntaxHighlighter by highlight.js:
\`\`\`js
function initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) + \` class="\${cls}"\`;
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if ( checkCondition(classes[i]) === undefined )
console.log('undefined');
}
}
}
\`\`\`
`,
source: '',
anchorAttrs: {
target: '_blank',
rel: 'noopener noreferrer nofollow'
}
};
},
mounted() {
setTimeout(() => {
this.source = this.content2;
// this.source = this.content2;
}, 1000);
}
};
</script>:::
属性 ¶
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model/modelValue | 显示的md内容 | String | true |