@ comark/ nuxt
0-配置 Nuxt 模块 标记一个高性能的分解和渲染器.
特征
- 自动进口
<Markdown>财务报告和审定财务报表<MarkdownDocument>组件 - 📁
~/components/prose压倒性的 HTML 元素目录 - 自动 Nuxt 用户界面 传教融合
- ++ SSR, SSG, 并预发支持出框
- 🧩 Comark 插件的再出口(绑定、数学、美人鱼)
- QQ 全类型脚本支持
安装
自动
添加 @comark/nuxt 你的项目。 安装依赖性并注册模块 nuxt.config.ts数字 :
npx nuxt add comark
手动
添加 @comark/nuxt 对您的依赖:
npm install @comark/nuxt
# or
pnpm add @comark/nuxt
那就加进你的 nuxt.config.ts数字 :
export default defineNuxtConfig({
modules: ['@comark/nuxt'],
})
使用量
这个 <Markdown> 全球可提供组件,不需要进口。 通过默认槽或标记 value 道具 :
<script setup lang="ts">
const content = `# Hello Nuxt\n\nRendered with **Comark**.`
</script>
<template>
<Markdown>{{ content }}</Markdown>
</template>
自定义组件
将 Comark 标记映射到您的 Vue 组件 :
<script setup lang="ts">
import Alert from '~/components/Alert.vue'
</script>
<template>
<Markdown :components="{ alert: Alert }">{{ content }}</Markdown>
</template>
::alert{type="warning"}
This is a warning.
::
覆盖 HTML 元素
将组件丢入 ~/components/prose 以覆盖本地 HTML 元素如何渲染。 它们是自动登记的:
~/components/prose/
ProseH1.vue
ProsePre.vue
ProseA.vue
插件
<script setup lang="ts">
import math, { Math } from '@comark/nuxt/plugins/math'
import mermaid, { Mermaid } from '@comark/nuxt/plugins/mermaid'
</script>
<template>
<Markdown
:components="{ math: Math, mermaid: Mermaid }"
:plugins="[math(), mermaid()]"
>
{{ content }}
</Markdown>
</template>
Nuxt 用户界面
何时 @nuxt/ui 安装后, 传言组件自动被接通 :
export default defineNuxtConfig({
modules: ['@comark/nuxt', '@nuxt/ui'],
})
文档
完整指南和 API 参考 comark.dev/上交/nuxt (韩语)。 。 。 .
代理技能
编码代理可以从 Docs 站点安装 Comark 技能 :
npx skills add https://comark.dev
许可证
由 所制
原载 MIT 许可证。 。 。 .