官方示例不能直接粘贴使用，故自己补了些代码。方便初学者学习，节省时间，提高学习效率。
1、html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>20-vue3- markdown 编辑器.html</title>
<!-- 加载项，可以本地加载，也可网联加载（用ai提示生成网联代码）-->
<script src="./dist/vue.global.js"></script>
<script src="./lodash/lodash.js"></script>
<script src="./marked/marked.min.js"></script>
<script>
// 动态标题
var dynamicTitle = "20-vue3- markdown 编辑器.html".slice(0, -5);
// 使用 JavaScript 修改 <title> 标签的内容
document.title = dynamicTitle;
</script>
</head>
<body>
<div id="app">
<h1>{{input}}</h1>
<h1>{{output}}</h1>
<!--@keyup.enter="update" 在textarea的内容输入后，按enter按键触发 update方法-->
<div class="editor">
<textarea class="input" :value="input" @keyup.enter="update"></textarea>
<div class="output" v-html="output"></div>
</div>
</div>
<script type="module">
const { createApp, ref,computed } = Vue
// marked 把textarea的内容进行解析，并返回html格式。
// 如：“# hello” 会被解析为“<h1>hello</h1>”
const { parse} = marked
// lodash的debounce函数，防抖函数，单位为毫秒，默认为1000毫秒即1秒
// 如：如这例子中，在1秒内，输入了多次，最终只会执行一次。
const {debounce} = _
createApp({
components:{
},
setup() {
const input = ref('# hello')
const output = computed(()=>{return parse(input.value)})
const update = debounce((e) => {
input.value = e.target.value
}, 1000)
return {
input,
output,
update
}
}
}).mount('#app')
</script>
</body>
</html>2、结果：