vue3 项目构建-8-展示 markdown 文档

第一步,下载插件

复制代码
npm install markdown-it

第二步,使用插件渲染

javascript 复制代码
<template>
  <div v-html="htmlContent"></div>
</template>

<script setup>
import { ref, computed } from 'vue';
import MarkdownIt from 'markdown-it';
// 创建 MarkdownIt 实例
const md = new MarkdownIt();
// 定义一个响应式的 Markdown 文本
const markdownText = ref('# Hello, World!\nThis is a markdown paragraph in script setup.');
// 通过计算属性将 Markdown 文本转换为 HTML 内容
const htmlContent = computed(() => md.render(markdownText.value));
</script>

实际页面的应用:

javascript 复制代码
<script setup>
import { inject, onMounted, ref, computed, watch } from 'vue';
import MarkdownIt from 'markdown-it';
const axios = inject('$axios');
const view = ref([]);
const getPostArticleView = async () => {
    const res = await axios({
        method: 'post',
        url: '/articles/view/1',
    });
    view.value = res.data.data;
    console.log(view);
};

let hasExecuted = false;

onMounted(() => {
    if (!hasExecuted) {
        getPostArticleView();
        hasExecuted = true;
    }
});

const md = new MarkdownIt();
// 用于存储转换后的HTML内容,初始为空
const htmlContent = ref('');
watch(view, (newView) => {
    if (newView && newView.body && newView.body.content) {
        // 当view有有效数据时,进行Markdown转换
        htmlContent.value = md.render(newView.body.content);
    }
}, { immediate: false });
</script>

<template>
    <div id="article">
        <div class="textSpring">
            <h1>{{view.title}}</h1>
            <hr>
            <div v-html="htmlContent"></div>
        </div>
    </div>
</template>

<style scoped>
    #article{
        padding: 20px;
    }

    .textSpring{
        margin: 0 auto;
        border: 1px solid black;
        border-radius: 5px;
        width: 60%;
    }
</style>

文章封面:

相关推荐
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
veminhe9 天前
HTML5 浏览器支持
前端·html·html5
前端fighter9 天前
Vuex 与 Pinia:全面解析现代 Vue 状态管理的进化之路
前端·vue.js·面试
snow@li9 天前
vue3-ts-qrcode :安装及使用记录 / 配置项 / 效果展示
前端·javascript·vue.js
海天胜景9 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui
GISer_Jing9 天前
React Next快速搭建前后端全栈项目并部署至Vercel
前端·react.js·前端框架