在 Nuxt 3中集成和使用 Markdown-it 的完整指南

小半 • 2024年8月14日下午8:52 • 技术分享 • 阅读 783

在 Nuxt3中使用 markdown-it 来处理 Markdown 是一个很实用的功能，特别是在构建博客或文档站点时。以下是一个简单的指南，说明如何在 Nuxt3 中集成 markdown-it。

安装 markdown-it：

首先，你需要安装 markdown-it 和可能的插件。你可以通过 npm 或 yarn 来安装它们。
```
npm install markdown-it
```
或者使用 yarn：
```
yarn add markdown-it
```

创建一个插件来配置 markdown-it：

在你的 Nuxt 3 项目中，创建一个新的插件文件来配置 markdown-it。例如，可以在 plugins 文件夹中创建一个文件 markdown-it.ts。

// plugins/markdown-it.js
import MarkdownIt from 'markdown-it'

export default defineNuxtPlugin(nuxtApp => {
  const md = new MarkdownIt()

  // 如果你需要使用其他插件，可以在这里配置
  // md.use(require('markdown-it-emoji'))

  nuxtApp.provide('markdown', md)
})

在组件或页面中使用 markdown-it：

你可以在组件或页面中通过 useNuxtApp() 获取到 markdown-it 实例，并用它来解析 Markdown 内容。

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

<script setup>
import { ref, onMounted } from 'vue'
import { useNuxtApp } from '#app'

const { $markdown } = useNuxtApp()
const content = ref('# Hello WorldnThis is markdown content.')

const parsedContent = ref('')

onMounted(() => {
  parsedContent.value = $markdown.render(content.value)
})
</script>

这里，content 是你需要解析的 Markdown 字符串，parsedContent 是经过解析的 HTML 内容，会被绑定到模板中显示。

（可选）添加更多 markdown-it 插件：

如果你需要更多功能，比如 emoji 支持、表格支持等，可以安装相应的插件并在插件配置中使用它们。例如，安装 markdown-it-emoji 插件：

npm install markdown-it-emoji

然后在你的 markdown-it 插件配置中使用它：

// plugins/markdown-it.js
import MarkdownIt from 'markdown-it'
import emoji from 'markdown-it-emoji'

export default defineNuxtPlugin(nuxtApp => {
  const md = new MarkdownIt()
  md.use(emoji)

  nuxtApp.provide('markdown', md)
})