记一次 VUE 使用marked.js

第一行祭天

话说，想学一下marked.js 于是有了如下操作

1. npm i marked -S

2. 引入 import marked from 'marked'

3. 创建对象 let renderMD = new marked.Renderer()

4. 配置如下

marked . setOptions ({

renderer: rendererMD ,

gfm: true ,

tables: true ,

breaks: false ,

pedantic: false ,

sanitize: false ,

smartLists: true ,

smartypants: false

})

5. vue 组件  

data () {

return {

input: '# hello `java` '

}

},

computed: {

compiledMarkdown : function () {

return marked ( this .input, { sanitize: true })

}

}

6. template 

扫描二维码关注公众号，回复： 2883542 查看本文章

< div v-html= "compiledMarkdown"></ div>

完整如下

< template >

< div id= "app" >

< div v-html= "compiledMarkdown"></ div>

</ div >

</ template >

< script >

import marked from 'marked'

var rendererMD = new marked . Renderer ()

marked . setOptions ({

renderer: rendererMD ,

gfm: true ,

tables: true ,

breaks: false ,

pedantic: false ,

sanitize: false ,

smartLists: true ,

smartypants: false

})

export default {

name: 'App' ,

data () {

return {

input: '# hello `java` '

}

},

computed: {

compiledMarkdown : function () {

return marked ( this .input, { sanitize: true })

}

}

}

< / script >