大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
1、下载依赖marked
yarn add marked
2、使用原理
marked会将字符串解析成一个md格式的html字符串,然后我们渲染他就可以了。
这里是简单示例,额外功能需要自行添加
<template>
<div class="left">
<p>在线转换html</p>
<textarea class="edit" v-model="mdtext" @input="mdchage"></textarea>
</div>
<div class="right">
<p>md文档编辑器</p>
<div id="show" ref="show"></div>
</div>
</template>
<script setup>
import { marked } from 'marked'
import { onMounted, ref, computed } from 'vue'
let mdtext = ref('')
let show = ref(null)
let mdchage = () => {
//将字符串中的内容编译成md语法
let html_md = marked.parse(mdtext.value)
console.log(html_md);
//将md语法渲染到盒子中
show.value.innerHTML = html_md
}
</script>
<style lang="scss" scoped>
.left {
height: 80%;
width: 40%;
.edit {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
vertical-align: middle;
}
}
.right {
height: 80%;
width: 40%;
#show {
width: 100%;
height: 100%;
border-radius: 1%;
border: 1px solid;
}
}
</style>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/190320.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...