vue3中展示markdown格式文章的三種形式
更新時間：2025年04月11日 10:50:23 作者：khatung
這篇文章主要為大家詳細介紹了vue3中展示markdown格式文章的三種形式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
一、安裝
# 使用 npm npm i @kangc/v-md-editor -S # 使用yarn yarn add @kangc/v-md-editor
二、三種實現(xiàn)形式
1、編輯器的只讀模式
main.ts文件中配置：
import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/style/base-editor.css'; const app = createApp(/*...*/); app.use(VMdEditor);
使用的組件中：
<template> <v-md-editor v-model="text" mode="preview"></v-md-editor> </template>、 //text為要傳入的markdown格式的內(nèi)容
2、預(yù)覽組件
main.ts中配置：
import VMdPreview from '@kangc/v-md-editor/lib/preview'; import '@kangc/v-md-editor/lib/style/preview.css'; const app = createApp(/*...*/); app.use(VMdPreview);
使用的組件中：
<template> <v-md-preview :text="text"></v-md-preview> </template> //text為要傳入的markdown格式的內(nèi)容
3、html預(yù)覽組件
main.ts中配置：
import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html'; import '@kangc/v-md-editor/lib/style/preview-html.css'; // 引入使用主題的樣式 import '@kangc/v-md-editor/lib/theme/style/vuepress'; const app = createApp(/*...*/); app.use(VMdPreviewHtml);
使用的組件中：
<template> <!-- preview-class 為主題的樣式類名，例如vuepress就是vuepress-markdown-body --> <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html> </template>
三、實現(xiàn)其他功能
1、設(shè)置外觀
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'; import '@kangc/v-md-editor/lib/theme/style/vuepress.css'; //這個css文件，它與 vuepressTheme 主題相關(guān)，定義了主題的顏色、字體、間距等樣式。 // 使用 vuepress 主題 VueMarkdownEditor.use(vuepressTheme);
2、對代碼進行語法高亮并顯示代碼語言
import Prism from 'prismjs';
VueMarkdownEditor.use({
Prism,
});
3、代碼塊顯示行號
//main.ts中 import VueMarkdownEditor from '@kangc/v-md-editor'; import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index'; VueMarkdownEditor.use(createLineNumbertPlugin());
4、高亮代碼行
import VueMarkdownEditor from '@kangc/v-md-editor'; import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index'; import '@kangc/v-md-editor/lib/plugins/highlight-lines/highlight-lines.css'; VueMarkdownEditor.use(createHighlightLinesPlugin());
5、快捷復(fù)制代碼
main.ts中配置：
import VueMarkdownEditor from '@kangc/v-md-editor'; import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index'; import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css'; VueMarkdownEditor.use(createCopyCodePlugin());
組件中使用：
<template>
<v-md-editor v-model="text" height="500px" @copy-code-success="handleCopyCodeSuccess" />
</template>
//使用@copy-code-success
<script>
export default {
methods: {
handleCopyCodeSuccess(code) {
console.log(code);
},
},
};
</script>
四、注意
如果按正常流程配置后，內(nèi)容出不來，可以選擇自己新開一個項目再操作一遍，如果這個時候是正常的，那可能就是原來的項目配置的版本過低，可以選擇更新一下項目中的各項配置
五、方法補充
Vue 3中如何實現(xiàn)Markdown展示
使用Vue 3中的markdown-it或vue-markdown等庫來實現(xiàn)類似React代碼中的Markdown渲染功能。以下是一個完整的Vue 3實現(xiàn)方案：
步驟一：安裝必要的依賴
npm install markdown-it vue-demi markdown-it-katex markdown-it-breaks markdown-it-mathjax3 markdown-it-highlightjs highlight.js
步驟二：創(chuàng)建Markdown組件
<template>
<div class="markdown-body" v-html="renderedContent"></div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import MarkdownIt from 'markdown-it'
import mk from 'markdown-it-katex'
import breaks from 'markdown-it-breaks'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-light.css'
import 'katex/dist/katex.min.css'
const props = defineProps({
content: {
type: String,
required: true
}
})
// 創(chuàng)建markdown-it實例并配置插件
const md = new MarkdownIt({
html: true,
linkify: true,
typographer: true,
breaks: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
} catch (__) {}
}
return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
}
})
.use(mk) // 啟用KaTeX數(shù)學公式支持
.use(breaks); // 啟用換行支持
// 配置鏈接在新窗口打開
const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options);
};
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
tokens[idx].attrPush(['target', '_blank']);
return defaultRender(tokens, idx, options, env, self);
};
// 計算渲染后的HTML
const renderedContent = computed(() => {
return md.render(props.content || '');
});
</script>
<style>
.markdown-body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1.6;
padding: 20px;
color: #24292e;
}
.markdown-body code {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
background-color: rgba(27, 31, 35, 0.05);
border-radius: 3px;
padding: 0.2em 0.4em;
}
.markdown-body pre {
background-color: #f6f8fa;
border-radius: 3px;
padding: 16px;
overflow: auto;
}
.hljs {
padding: 0;
background: transparent;
}
</style>步驟三：使用組件
<template>
<div>
<h1>Markdown 預(yù)覽</h1>
<MarkdownView :content="markdownContent" />
</div>
</template>
<script setup>
import MarkdownView from '@/components/MarkdownView.vue'
import { ref } from 'vue'
const markdownContent = ref(`
# 標題
這是一段普通文本
## 代碼示例
\`\`\`javascript
const hello = 'world';
console.log(hello);
\`\`\`
## 數(shù)學公式
$E = mc^2$
## 表格
| 姓名 | 年齡 |
| ---- | ---- |
| 張三 | 20 |
| 李四 | 25 |
`)
</script>
功能對照表
以下是React示例和Vue實現(xiàn)的功能對照：
| React功能 | Vue實現(xiàn)方式 |
|---|---|
| ReactMarkdown | markdown-it |
| remark-math | markdown-it-katex |
| remark-breaks | markdown-it-breaks |
| rehype-katex | markdown-it-katex (內(nèi)置支持) |
| remark-gfm | markdown-it (內(nèi)置支持GFM) |
| SyntaxHighlighter | highlight.js |
補充說明
1.功能：
- Markdown渲染
- 數(shù)學公式支持
- 代碼高亮
- 表格支持
- 自動鏈接
- 在新窗口打開鏈接
2.如果需要更多功能，可以添加其他markdown-it插件，例如：
npm install markdown-it-emoji markdown-it-sub markdown-it-sup markdown-it-footnote
3.要實現(xiàn)與GitHub樣式一致的顯示效果，可以添加：
npm install github-markdown-css
4.然后在main.js中導入：
import 'github-markdown-css/github-markdown.css'
到此這篇關(guān)于vue3中展示markdown格式文章的三種形式的文章就介紹到這了,更多相關(guān)vue3展示markdown內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+elementUI如何實現(xiàn)頂部路由標簽跳轉(zhuǎn)
這篇文章主要介紹了vue+elementUI如何實現(xiàn)頂部路由標簽跳轉(zhuǎn)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)視頻上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
Vuex處理用戶Token過期及優(yōu)化設(shè)置封裝本地存儲操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設(shè)置封裝本地存儲操作模塊及Token?過期問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題
這篇文章主要介紹了解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
typescript不僅可以約束我們的編碼習慣，還能起到注釋的作用，當我們看到一函數(shù)后我們立馬就能知道這個函數(shù)的用法。這篇文章主要介紹了在Vue組件中使用 TypeScript的方法,需要的朋友可以參考下2018-02-02
vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置指南
最近在使用vite生成項目,這篇文章主要給大家介紹了關(guān)于vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
element的el-form和el-table嵌套使用實現(xiàn)
本文主要介紹了element的el-form和el-table嵌套使用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家詳細介紹了Vue中正確使用jQuery的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家介紹了Vue3源碼解讀靜態(tài)提升示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)多個元素或多個組件之間動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09