個(gè)人非常喜歡和使用Markdown文檔，文章博客都喜歡用。所以我的網(wǎng)站必須展示這個(gè)東西我才舒服！

兩個(gè)插件都可以實(shí)現(xiàn)：marked和markdown-it都可以實(shí)現(xiàn)。

• marked比較小，簡單實(shí)用版本。
• markdown-it相對復(fù)雜，適用需要更多需求的。

先說marked的安裝和使用

npm install marked或者yarn add marked，想用啥用啥吧！

建立一個(gè)組件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 并設(shè)定默認(rèn)值
const props = defineProps({
  markdownContent: {
    type: String,
    default: '# 默認(rèn)標(biāo)題\n\n這是默認(rèn)的 Markdown 內(nèi)容。'
  }
});

// 計(jì)算屬性，將 Markdown 內(nèi)容解析為 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. 用戶輸入網(wǎng)址
用戶在瀏覽器的地址欄中輸入網(wǎng)址（URL），例如 \`https://www.example.com\`。`)
</script>

再說markdown-it的使用方式，還是先安裝。

npm install markdown-it或者yarn add markdown-it

建立一個(gè)組件MarkdownComb.vue

<template>
  <div v-html="parsedMarkdown"></div>
</template>

<script setup>
import { computed } from 'vue';
import MarkdownIt from 'markdown-it';


// 定義 props 并設(shè)定默認(rèn)值
const props = defineProps({
  markdownContent: {
    type: String,
    default: '# 默認(rèn)標(biāo)題\n\n這是默認(rèn)的 Markdown 內(nèi)容。'
  }
});

const md = new MarkdownIt(); // 初始化 markdown-it 實(shí)例

// 計(jì)算屬性，將 Markdown 內(nèi)容解析為 HTML
const parsedMarkdownIt = computed(() => {
  return md.render(props.markdownContent);
});

</script>

和marked使用是一樣的。

注意事項(xiàng)就是有的地方markdown內(nèi)容中有些特殊符號會和js字符串內(nèi)容沖突，例如"`"，你需要加一個(gè)轉(zhuǎn)譯符號“\”在前面。

效果如下：

image.png

有問題歡迎留言