第一行祭天

话说，想学一下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 

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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue