跳到正文
QuireKit Markdown
开发者文档
预览版 · 未发布

快速开始

在 Vue 页面显示第一段 Markdown,理解正文、主题和保存的分工。

这一页在 Vue 页面中显示一段 Markdown。你提供原文字符串,QuireMarkdown 把标题、段落和格式显示出来;保存时仍然保存原文,不需要保存组件生成的 HTML。

@quirekit/incremark/vue 提供阅读组件。React 使用独立接入页,只解析数据而不显示界面时使用 @quirekit/incremark-core。当前 API 为实验版本,安装方式见下方工作区说明。

1. 传入一段 Markdown

vue

content 是要显示的 Markdown,改变它即可更新阅读内容。下面这段原文会显示一个一级标题和一段加粗文字。完整样式与主题配置见下一步。

默认支持 GFM、 脚注、数学、容器、定义列表、Frontmatter 和行内扩展。options.preset: false 只保留 核心 GFM 与显式扩展;新增或覆盖扩展时不要重复安装同名 owner。

2. 安装并准备样式

当前尚未发布到 npm。以下命令用于已有 QuireKit 工作区的 Vue 应用,公共包均从工作区链接:

bash

在 uno.config.ts 使用组件库预设,它包含正文与组件的样式清单:

ts

在 Vite 注册 Vue 与 UnoCSS 插件:

ts

应用入口引入 virtual:uno.css 与 @quirekit/incremark/styles.css;后者提供数学等阅读专用样式,不能代替组件库样式。 在 HTML 根节点设 data-qk-theme="precision" data-qk-scheme="light",服务端和客户端保持一致; 已有 QuireKit 应用沿用现有主题。需要局部主题时使用 QuireThemeProvider,交互图标通过 QuireIconProvider 与 quireIconRegistry 提供。

3. 看看实际结果

本站已设置主题与图标。reading/basic.vue 包含传入内容与组件;shared/types.ts 只提供示例的语言类型。先查看单个组件即可理解接入,之后再按需要增加流式更新或自定义渲染。

正在准备示例…

下一步:流式接入、语法范围、Playground。

QuireKit Markdown · QuireKit流式 Markdown · @quirekit/incremark · MIT