<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Marked in the browser</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<style>
#write{
width: 49%;
height: 600px;
}
#read{
width: 49%;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div id="app">
<textarea id="write" v-model="message" @input="change"></textarea>
<div id="read" v-html="show"></div>
</div>
<script>
Vue.createApp({
data() {
var initMsg = '# Marked in Node.js\n\nRendered by **marked**.'
return {
message: initMsg,
show: marked.parse(initMsg)
}
},
methods: {
change(event) {
this.show = marked.parse(this.message)
}
}
})
.mount('#app')
</script>
</body>
</html>
版权声明：本文为weixin_45592677原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。