a vue markdown component , used marked highlight emojione
npm install @zkhh/v-markdown> 一个基于vue的markdown解析组件,其中code高亮风格支持highlight.js的各种style,支持解析emojione表情
bash
npm install @zkhh/v-markdown --save
`
$3
`js
:theme="theme"
width="1200px"
height="800px"
fontSize="16px"
@md-change="mdChange"
@html-change="htmlChange"
@html-hljs-change="htmlHljsChange" />
import VMarkdown from '@zkhh/v-markdown'
export default {
name: 'about',
components: {
VMarkdown
},
...
`$3
`js
import VMarkdown from '@zkhh/v-markdown'Vue.use(VMarkdown)
`
$3
!1
!2$3
`js
src="./assets/logo.png">
:theme="theme" // github,far ,atom-one-dark,monokai等风格
width="1200px"
height="800px"
fontSize="16px"
@md-change="mdChange"
@html-change="htmlChange"
@html-hljs-change="htmlHljsChange" />
export default {
name: 'app',
components: {
},
data () {
return {
mdDefault: '
`\nhello world\n`',
theme: 'far',//主题名字 'github','atom-one-dark' 等等都可使用见https://highlightjs.org highlightjs支持的style
} },
methods: {
mdChange (value) {
// 获取md文本
console.log(value)
//
`
//hello world
//`
},
htmlChange (value) {
// 获取 marked处理过后生成的html
console.log(value)
// hello world
},
htmlHljsChange (value) {
// 获取 highlight.js处理过的html 主要给代码code 添加了 hljs 等css类 , 如果把 此处的html 保存为html 文件 需要引用 highlight.js相关style文件 才能呈现出效果
console.log(value)
// hello world
}
}
}
``Copyright (c) 2019