個人非常喜歡和使用Markdown文檔梦湘，文章博客都喜歡用驯妄。所以我的網站必須展示這個東西我才舒服满粗！
兩個插件都可以實現：marked和markdown-it都可以實現簸淀。
- marked比較小沟使，簡單實用版本委可。
- markdown-it相對復雜，適用需要更多需求的腊嗡。
先說marked的安裝和使用
npm install marked或者yarn add marked着倾，想用啥用啥吧！
建立一個組件MarkdownComb.vue
<template>
<div v-html="parsedMarkdown"></div>
</template>
<script setup>
import { computed } from 'vue';
// import marked from 'marked'; // SyntaxError: The requested module '/node_modules/.vite/deps/marked.js?v=d9f6a36d' does not provide an export named 'default'
import * as marked from 'marked'; // 使用 import * as marked
// 定義 props 并設定默認值
const props = defineProps({
markdownContent: {
type: String,
default: '# 默認標題\n\n這是默認的 Markdown 內容燕少。'
}
});
// 計算屬性卡者，將 Markdown 內容解析為 HTML
const parsedMarkdown = computed(() => {
return marked.parse(props.markdownContent);
});
</script>
使用：
<template>
<markdown-comb :markdown-content="markdownContent"></markdown-comb>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import MarkdownComb from './comp/MarkdownComb.vue'
const markdownContent = ref(`### 1. 用戶輸入網址
用戶在瀏覽器的地址欄中輸入網址（URL），例如 \`https://www.example.com\`客们。`)
</script>
再說markdown-it的使用方式崇决，還是先安裝。
npm install markdown-it或者yarn add markdown-it
建立一個組件MarkdownComb.vue
<template>
<div v-html="parsedMarkdown"></div>
</template>
<script setup>
import { computed } from 'vue';
import MarkdownIt from 'markdown-it';
// 定義 props 并設定默認值
const props = defineProps({
markdownContent: {
type: String,
default: '# 默認標題\n\n這是默認的 Markdown 內容底挫。'
}
});
const md = new MarkdownIt(); // 初始化 markdown-it 實例
// 計算屬性恒傻，將 Markdown 內容解析為 HTML
const parsedMarkdownIt = computed(() => {
return md.render(props.markdownContent);
});
</script>
和marked使用是一樣的。
注意事項就是有的地方markdown內容中有些特殊符號會和js字符串內容沖突建邓，例如"`"盈厘，你需要加一個轉譯符號“\”在前面。
效果如下：
image.png
