[{"data":1,"prerenderedAt":409},["ShallowReactive",2],{"markdown-doc:\u002Fguide\u002Fgetting-started":3},{"id":4,"title":5,"body":6,"description":398,"extension":399,"keywords":400,"locale":401,"meta":402,"navigation":403,"order":80,"path":404,"section":405,"seo":406,"stem":407,"__hash__":408},"docs\u002Fguide\u002Fgetting-started.zh-CN.md","快速开始",{"type":7,"value":8,"toc":393},"minimark",[9,18,34,39,150,155,162,166,169,220,227,260,263,327,353,357,368,372,389],[10,11,12,13,17],"p",{},"这一页在 Vue 页面中显示一段 Markdown。你提供原文字符串，",[14,15,16],"code",{},"QuireMarkdown"," 把标题、段落和格式显示出来；保存时仍然保存原文，不需要保存组件生成的 HTML。",[10,19,20,23,24,29,30,33],{},[14,21,22],{},"@quirekit\u002Fincremark\u002Fvue"," 提供阅读组件。React 使用",[25,26,28],"a",{"href":27},"\u002Fguide\u002Freact","独立接入页","，只解析数据而不显示界面时使用 ",[14,31,32],{},"@quirekit\u002Fincremark-core","。当前 API 为实验版本，安装方式见下方工作区说明。",[35,36,38],"h2",{"id":37},"_1-传入一段-markdown","1. 传入一段 Markdown",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-vue shiki shiki-themes github-light github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { QuireMarkdown } from '@quirekit\u002Fincremark\u002Fvue'\nimport '@quirekit\u002Fincremark\u002Fstyles.css'\n\u003C\u002Fscript>\n\u003Ctemplate>\u003CQuireMarkdown :content=\"'# Hello\\n\\n**Markdown**'\" \u002F>\u003C\u002Ftemplate>\n","vue","",[14,47,48,78,94,102,112],{"__ignoreMap":45},[49,50,53,57,61,65,68,71,75],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sVPnS","\u003C",[49,58,60],{"class":59},"su0ou","script",[49,62,64],{"class":63},"sgQzM"," setup",[49,66,67],{"class":63}," lang",[49,69,70],{"class":55},"=",[49,72,74],{"class":73},"s-HEn","\"ts\"",[49,76,77],{"class":55},">\n",[49,79,81,85,88,91],{"class":51,"line":80},2,[49,82,84],{"class":83},"sDD9d","import",[49,86,87],{"class":55}," { QuireMarkdown } ",[49,89,90],{"class":83},"from",[49,92,93],{"class":73}," '@quirekit\u002Fincremark\u002Fvue'\n",[49,95,97,99],{"class":51,"line":96},3,[49,98,84],{"class":83},[49,100,101],{"class":73}," '@quirekit\u002Fincremark\u002Fstyles.css'\n",[49,103,105,108,110],{"class":51,"line":104},4,[49,106,107],{"class":55},"\u003C\u002F",[49,109,60],{"class":59},[49,111,77],{"class":55},[49,113,115,117,120,123,125,128,131,133,136,140,143,146,148],{"class":51,"line":114},5,[49,116,56],{"class":55},[49,118,119],{"class":59},"template",[49,121,122],{"class":55},">\u003C",[49,124,16],{"class":59},[49,126,127],{"class":55}," :",[49,129,130],{"class":63},"content",[49,132,70],{"class":55},[49,134,135],{"class":73},"\"'# Hello",[49,137,139],{"class":138},"sUNQB","\\n\\n",[49,141,142],{"class":73},"**Markdown**'\"",[49,144,145],{"class":55}," \u002F>\u003C\u002F",[49,147,119],{"class":59},[49,149,77],{"class":55},[10,151,152,154],{},[14,153,130],{}," 是要显示的 Markdown，改变它即可更新阅读内容。下面这段原文会显示一个一级标题和一段加粗文字。完整样式与主题配置见下一步。",[10,156,157,158,161],{},"默认支持 GFM、\n脚注、数学、容器、定义列表、Frontmatter 和行内扩展。",[14,159,160],{},"options.preset: false"," 只保留\n核心 GFM 与显式扩展；新增或覆盖扩展时不要重复安装同名 owner。",[35,163,165],{"id":164},"_2-安装并准备样式","2. 安装并准备样式",[10,167,168],{},"当前尚未发布到 npm。以下命令用于已有 QuireKit 工作区的 Vue 应用，公共包均从工作区链接：",[40,170,174],{"className":171,"code":172,"language":173,"meta":45,"style":45},"language-bash shiki shiki-themes github-light github-light github-dark","pnpm add '@quirekit\u002Fincremark@workspace:*' '@quirekit\u002Fui@workspace:*' '@quirekit\u002Funocss-preset@workspace:*' vue@^3.5.0 @ark-ui\u002Fvue@5.39.1\npnpm add -D unocss @vitejs\u002Fplugin-vue vite typescript\n","bash",[14,175,176,199],{"__ignoreMap":45},[49,177,178,181,184,187,190,193,196],{"class":51,"line":52},[49,179,180],{"class":63},"pnpm",[49,182,183],{"class":73}," add",[49,185,186],{"class":73}," '@quirekit\u002Fincremark@workspace:*'",[49,188,189],{"class":73}," '@quirekit\u002Fui@workspace:*'",[49,191,192],{"class":73}," '@quirekit\u002Funocss-preset@workspace:*'",[49,194,195],{"class":73}," vue@^3.5.0",[49,197,198],{"class":73}," @ark-ui\u002Fvue@5.39.1\n",[49,200,201,203,205,208,211,214,217],{"class":51,"line":80},[49,202,180],{"class":63},[49,204,183],{"class":73},[49,206,207],{"class":138}," -D",[49,209,210],{"class":73}," unocss",[49,212,213],{"class":73}," @vitejs\u002Fplugin-vue",[49,215,216],{"class":73}," vite",[49,218,219],{"class":73}," typescript\n",[10,221,222,223,226],{},"在 ",[14,224,225],{},"uno.config.ts"," 使用组件库预设，它包含正文与组件的样式清单：",[40,228,232],{"className":229,"code":230,"language":231,"meta":45,"style":45},"language-ts shiki shiki-themes github-light github-light github-dark","import { defineQuireKitUnoConfig } from '@quirekit\u002Funocss-preset'\nexport default defineQuireKitUnoConfig()\n","ts",[14,233,234,246],{"__ignoreMap":45},[49,235,236,238,241,243],{"class":51,"line":52},[49,237,84],{"class":83},[49,239,240],{"class":55}," { defineQuireKitUnoConfig } ",[49,242,90],{"class":83},[49,244,245],{"class":73}," '@quirekit\u002Funocss-preset'\n",[49,247,248,251,254,257],{"class":51,"line":80},[49,249,250],{"class":83},"export",[49,252,253],{"class":83}," default",[49,255,256],{"class":63}," defineQuireKitUnoConfig",[49,258,259],{"class":55},"()\n",[10,261,262],{},"在 Vite 注册 Vue 与 UnoCSS 插件：",[40,264,266],{"className":229,"code":265,"language":231,"meta":45,"style":45},"import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport UnoCSS from 'unocss\u002Fvite'\nexport default defineConfig({ plugins: [vue(), UnoCSS()] })\n",[14,267,268,280,292,304],{"__ignoreMap":45},[49,269,270,272,275,277],{"class":51,"line":52},[49,271,84],{"class":83},[49,273,274],{"class":55}," { defineConfig } ",[49,276,90],{"class":83},[49,278,279],{"class":73}," 'vite'\n",[49,281,282,284,287,289],{"class":51,"line":80},[49,283,84],{"class":83},[49,285,286],{"class":55}," vue ",[49,288,90],{"class":83},[49,290,291],{"class":73}," '@vitejs\u002Fplugin-vue'\n",[49,293,294,296,299,301],{"class":51,"line":96},[49,295,84],{"class":83},[49,297,298],{"class":55}," UnoCSS ",[49,300,90],{"class":83},[49,302,303],{"class":73}," 'unocss\u002Fvite'\n",[49,305,306,308,310,313,316,318,321,324],{"class":51,"line":104},[49,307,250],{"class":83},[49,309,253],{"class":83},[49,311,312],{"class":63}," defineConfig",[49,314,315],{"class":55},"({ plugins: [",[49,317,44],{"class":63},[49,319,320],{"class":55},"(), ",[49,322,323],{"class":63},"UnoCSS",[49,325,326],{"class":55},"()] })\n",[10,328,329,330,333,334,337,338,341,342,345,346,333,349,352],{},"应用入口引入 ",[14,331,332],{},"virtual:uno.css"," 与 ",[14,335,336],{},"@quirekit\u002Fincremark\u002Fstyles.css","；后者提供数学等阅读专用样式，不能代替组件库样式。\n在 HTML 根节点设 ",[14,339,340],{},"data-qk-theme=\"precision\" data-qk-scheme=\"light\"","，服务端和客户端保持一致；\n已有 QuireKit 应用沿用现有主题。需要局部主题时使用 ",[14,343,344],{},"QuireThemeProvider","，交互图标通过\n",[14,347,348],{},"QuireIconProvider",[14,350,351],{},"quireIconRegistry"," 提供。",[35,354,356],{"id":355},"_3-看看实际结果","3. 看看实际结果",[10,358,359,360,363,364,367],{},"本站已设置主题与图标。",[14,361,362],{},"reading\u002Fbasic.vue"," 包含传入内容与组件；",[14,365,366],{},"shared\u002Ftypes.ts"," 只提供示例的语言类型。先查看单个组件即可理解接入，之后再按需要增加流式更新或自定义渲染。",[369,370],"docs-demo",{"name":371},"reading\u002Fbasic",[10,373,374,375,379,380,379,384,388],{},"下一步：",[25,376,378],{"href":377},"\u002Fguide\u002Fstreaming","流式接入","、",[25,381,383],{"href":382},"\u002Fguide\u002Fsyntax","语法范围",[25,385,387],{"href":386},"\u002Fplayground","Playground","。",[390,391,392],"style",{},"html pre.shiki code .sVPnS, html code.shiki .sVPnS{--shiki-default:#24292E;--shiki-light:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su0ou, html code.shiki .su0ou{--shiki-default:#22863A;--shiki-light:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sgQzM, html code.shiki .sgQzM{--shiki-default:#6F42C1;--shiki-light:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s-HEn, html code.shiki .s-HEn{--shiki-default:#032F62;--shiki-light:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sDD9d, html code.shiki .sDD9d{--shiki-default:#D73A49;--shiki-light:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sUNQB, html code.shiki .sUNQB{--shiki-default:#005CC5;--shiki-light:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":45,"searchDepth":80,"depth":80,"links":394},[395,396,397],{"id":37,"depth":80,"text":38},{"id":164,"depth":80,"text":165},{"id":355,"depth":80,"text":356},"在 Vue 页面显示第一段 Markdown，理解正文、主题和保存的分工。","md",null,"zh-CN",{},true,"\u002Fguide\u002Fgetting-started","开始使用",{"title":5,"description":398},"guide\u002Fgetting-started.zh-CN","L9CQjpaocsjfgrH3BitOZ2-dFxcl_yBi3s4sWRkZwz4",1793045321582]