Vue項(xiàng)目markdown內(nèi)容預(yù)覽顯示優(yōu)化方式
更新時(shí)間：2025年10月25日 10:07:46 作者：Qredsun
在Vue項(xiàng)目中使用markdown-it組件預(yù)覽Markdown內(nèi)容時(shí),通過安裝pnpm和markdown-it-github-markdown-css依賴,并重寫markdown部分樣式,實(shí)現(xiàn)了Markdown內(nèi)容的美化,在MarkdownPreview.vue組件中,通過變量renderedMarkdown接收并渲染Markdown內(nèi)容
背景
Vue項(xiàng)目中需要對markdown內(nèi)容進(jìn)行預(yù)覽，使用markdown-it組件實(shí)現(xiàn)功能后，發(fā)現(xiàn)樣式比較丑，需要進(jìn)行優(yōu)化一下
實(shí)現(xiàn)
安裝依賴
pnpm add markdown-it github-markdown-css
重寫markdown的部分樣式。
- MarkdownPreview.vue
<template>
<div v-html="renderedHtml" class="markdown-body"></div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import MarkdownIt from 'markdown-it'
interface Props {
content: string;
}
const props = defineProps<Props>()
// 初始化 markdown-it 實(shí)例
const md = new MarkdownIt({
html: true, // 允許 HTML 標(biāo)簽
breaks: true, // 支持換行
linkify: true // 自動識別鏈接
})
const renderedHtml = ref('')
// 監(jiān)聽 content 變化，重新渲染 markdown
watch(
() => props.content,
(newContent) => {
renderedHtml.value = md.render(newContent)
},
{ immediate: true }
)
</script>
<style>
@import "github-markdown-css/github-markdown-light.css";
.markdown-body {
padding: 20px;
line-height: 1.7;
font-size: 14px;
}
.markdown-body ul,
.markdown-body ol {
margin-left: 1.2em;
margin-bottom: 1em;
}
.markdown-body li {
margin-bottom: 0.4em;
}
.markdown-body table {
border-collapse: collapse;
width: 100%;
}
.markdown-body table,
.markdown-body th,
.markdown-body td {
border: 1px solid #d0d7de;
padding: 8px;
}
.markdown-body th {
background-color: #f6f8fa;
}
</style>
其他模塊進(jìn)行引用
變量 renderedMarkdown 是stirng類型的Markdown內(nèi)容
<MarkdownPreview :content="renderedMarkdown" />
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別
這篇文章主要介紹了詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中常遇到第三方j(luò)s,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何引入本地第三方JS庫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
watch 函數(shù)是 Vue.js 提供的一個強(qiáng)大工具,用于響應(yīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)的回調(diào),通過合理使用 watch 函數(shù),我們可以實(shí)現(xiàn)異步數(shù)據(jù)請求、表單驗(yàn)證、動態(tài)樣式等多種功能,這篇文章主要介紹了Vue.js 的 watch函數(shù),需要的朋友可以參考下2024-08-08
Vue transition實(shí)現(xiàn)點(diǎn)贊動畫效果的示例
點(diǎn)贊動畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛心縮小變大，變大時(shí)略微大一點(diǎn)再變正常，取消點(diǎn)贊時(shí)愛心無動畫，同時(shí)數(shù)字滾動，+1 時(shí)向上滾動，-1 時(shí)向下滾動2021-05-05
vue?electron實(shí)現(xiàn)無邊框窗口示例詳解
這篇文章主要為大家介紹了vue?electron實(shí)現(xiàn)無邊框窗口示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊
本文主要介紹了Vue+Node.js+WebSocket實(shí)現(xiàn)即時(shí)通訊，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
項(xiàng)目中的聯(lián)想輸入框現(xiàn)在都是采用的el-autocomplete實(shí)現(xiàn)的，但是數(shù)據(jù)增多就會需要做分頁處理，本文主要介紹了vue對el-autocomplete二次封裝增加下拉分頁，感興趣的可以了解一下2022-03-03
通過cordova將vue項(xiàng)目打包為webapp的方法
這篇文章主要介紹了通過cordova將vue項(xiàng)目打包為webapp的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue車牌搜索組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09