[{"data":1,"prerenderedAt":411},["ShallowReactive",2],{"markdown-doc:\u002Fen\u002Fguide\u002Fgetting-started":3},{"id":4,"title":5,"body":6,"description":400,"extension":401,"keywords":402,"locale":403,"meta":404,"navigation":405,"order":81,"path":406,"section":407,"seo":408,"stem":409,"__hash__":410},"docs\u002Fguide\u002Fgetting-started.en.md","Quick start",{"type":7,"value":8,"toc":395},"minimark",[9,18,35,40,151,156,163,167,170,221,228,261,264,328,355,359,370,374,391],[10,11,12,13,17],"p",{},"Display Markdown in a Vue page by passing a source string to ",[14,15,16],"code",{},"QuireMarkdown",". It renders headings, paragraphs and formatting. Persist the source rather than the generated HTML.",[10,19,20,21,24,25,30,31,34],{},"The reader comes from ",[14,22,23],{},"@quirekit\u002Fincremark\u002Fvue",". See the ",[26,27,29],"a",{"href":28},"\u002Fen\u002Fguide\u002Freact","React guide"," for React, or use ",[14,32,33],{},"@quirekit\u002Fincremark-core"," for parsing without an interface. The API is experimental; workspace installation is explained below.",[36,37,39],"h2",{"id":38},"_1-pass-markdown-content","1. Pass Markdown content",[41,42,47],"pre",{"className":43,"code":44,"language":45,"meta":46,"style":46},"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,48,49,79,95,103,113],{"__ignoreMap":46},[50,51,54,58,62,66,69,72,76],"span",{"class":52,"line":53},"line",1,[50,55,57],{"class":56},"sVPnS","\u003C",[50,59,61],{"class":60},"su0ou","script",[50,63,65],{"class":64},"sgQzM"," setup",[50,67,68],{"class":64}," lang",[50,70,71],{"class":56},"=",[50,73,75],{"class":74},"s-HEn","\"ts\"",[50,77,78],{"class":56},">\n",[50,80,82,86,89,92],{"class":52,"line":81},2,[50,83,85],{"class":84},"sDD9d","import",[50,87,88],{"class":56}," { QuireMarkdown } ",[50,90,91],{"class":84},"from",[50,93,94],{"class":74}," '@quirekit\u002Fincremark\u002Fvue'\n",[50,96,98,100],{"class":52,"line":97},3,[50,99,85],{"class":84},[50,101,102],{"class":74}," '@quirekit\u002Fincremark\u002Fstyles.css'\n",[50,104,106,109,111],{"class":52,"line":105},4,[50,107,108],{"class":56},"\u003C\u002F",[50,110,61],{"class":60},[50,112,78],{"class":56},[50,114,116,118,121,124,126,129,132,134,137,141,144,147,149],{"class":52,"line":115},5,[50,117,57],{"class":56},[50,119,120],{"class":60},"template",[50,122,123],{"class":56},">\u003C",[50,125,16],{"class":60},[50,127,128],{"class":56}," :",[50,130,131],{"class":64},"content",[50,133,71],{"class":56},[50,135,136],{"class":74},"\"'# Hello",[50,138,140],{"class":139},"sUNQB","\\n\\n",[50,142,143],{"class":74},"**Markdown**'\"",[50,145,146],{"class":56}," \u002F>\u003C\u002F",[50,148,120],{"class":60},[50,150,78],{"class":56},[10,152,153,155],{},[14,154,131],{}," is the Markdown to display; changing it updates the reader. This input produces a heading and bold text. Prepare full styling in the next step.",[10,157,158,159,162],{},"Defaults include GFM, footnotes, math, containers,\ndefinition lists, frontmatter and inline extras. ",[14,160,161],{},"options.preset: false"," retains core GFM\nand explicit extensions. Avoid installing duplicate owners when adding or replacing features.",[36,164,166],{"id":165},"_2-install-and-prepare-styles","2. Install and prepare styles",[10,168,169],{},"The package is not yet published to npm. These commands target a Vue application inside an existing QuireKit workspace:",[41,171,175],{"className":172,"code":173,"language":174,"meta":46,"style":46},"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,176,177,200],{"__ignoreMap":46},[50,178,179,182,185,188,191,194,197],{"class":52,"line":53},[50,180,181],{"class":64},"pnpm",[50,183,184],{"class":74}," add",[50,186,187],{"class":74}," '@quirekit\u002Fincremark@workspace:*'",[50,189,190],{"class":74}," '@quirekit\u002Fui@workspace:*'",[50,192,193],{"class":74}," '@quirekit\u002Funocss-preset@workspace:*'",[50,195,196],{"class":74}," vue@^3.5.0",[50,198,199],{"class":74}," @ark-ui\u002Fvue@5.39.1\n",[50,201,202,204,206,209,212,215,218],{"class":52,"line":81},[50,203,181],{"class":64},[50,205,184],{"class":74},[50,207,208],{"class":139}," -D",[50,210,211],{"class":74}," unocss",[50,213,214],{"class":74}," @vitejs\u002Fplugin-vue",[50,216,217],{"class":74}," vite",[50,219,220],{"class":74}," typescript\n",[10,222,223,224,227],{},"Use the component preset in ",[14,225,226],{},"uno.config.ts","; it includes the prose and component style manifest:",[41,229,233],{"className":230,"code":231,"language":232,"meta":46,"style":46},"language-ts shiki shiki-themes github-light github-light github-dark","import { defineQuireKitUnoConfig } from '@quirekit\u002Funocss-preset'\nexport default defineQuireKitUnoConfig()\n","ts",[14,234,235,247],{"__ignoreMap":46},[50,236,237,239,242,244],{"class":52,"line":53},[50,238,85],{"class":84},[50,240,241],{"class":56}," { defineQuireKitUnoConfig } ",[50,243,91],{"class":84},[50,245,246],{"class":74}," '@quirekit\u002Funocss-preset'\n",[50,248,249,252,255,258],{"class":52,"line":81},[50,250,251],{"class":84},"export",[50,253,254],{"class":84}," default",[50,256,257],{"class":64}," defineQuireKitUnoConfig",[50,259,260],{"class":56},"()\n",[10,262,263],{},"Register Vue and UnoCSS in Vite:",[41,265,267],{"className":230,"code":266,"language":232,"meta":46,"style":46},"import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport UnoCSS from 'unocss\u002Fvite'\nexport default defineConfig({ plugins: [vue(), UnoCSS()] })\n",[14,268,269,281,293,305],{"__ignoreMap":46},[50,270,271,273,276,278],{"class":52,"line":53},[50,272,85],{"class":84},[50,274,275],{"class":56}," { defineConfig } ",[50,277,91],{"class":84},[50,279,280],{"class":74}," 'vite'\n",[50,282,283,285,288,290],{"class":52,"line":81},[50,284,85],{"class":84},[50,286,287],{"class":56}," vue ",[50,289,91],{"class":84},[50,291,292],{"class":74}," '@vitejs\u002Fplugin-vue'\n",[50,294,295,297,300,302],{"class":52,"line":97},[50,296,85],{"class":84},[50,298,299],{"class":56}," UnoCSS ",[50,301,91],{"class":84},[50,303,304],{"class":74}," 'unocss\u002Fvite'\n",[50,306,307,309,311,314,317,319,322,325],{"class":52,"line":105},[50,308,251],{"class":84},[50,310,254],{"class":84},[50,312,313],{"class":64}," defineConfig",[50,315,316],{"class":56},"({ plugins: [",[50,318,45],{"class":64},[50,320,321],{"class":56},"(), ",[50,323,324],{"class":64},"UnoCSS",[50,326,327],{"class":56},"()] })\n",[10,329,330,331,334,335,338,339,342,343,346,347,350,351,354],{},"Import both ",[14,332,333],{},"virtual:uno.css"," and ",[14,336,337],{},"@quirekit\u002Fincremark\u002Fstyles.css"," in the application entry. The latter supplies reading styles such as math; it does not replace component styles.\nSet ",[14,340,341],{},"data-qk-theme=\"precision\" data-qk-scheme=\"light\""," on the HTML root consistently on server and client.\nExisting QuireKit applications keep their theme. Use ",[14,344,345],{},"QuireThemeProvider"," for local themes and\n",[14,348,349],{},"QuireIconProvider"," with ",[14,352,353],{},"quireIconRegistry"," for interactive icons.",[36,356,358],{"id":357},"_3-see-the-result","3. See the result",[10,360,361,362,365,366,369],{},"This site supplies theme and icons. ",[14,363,364],{},"reading\u002Fbasic.vue"," contains the source and reader component; ",[14,367,368],{},"shared\u002Ftypes.ts"," only defines the example locale. Start with the component, then add streaming or custom rendering as needed.",[371,372],"docs-demo",{"name":373},"reading\u002Fbasic",[10,375,376,377,381,382,334,386,390],{},"Next: ",[26,378,380],{"href":379},"\u002Fen\u002Fguide\u002Fstreaming","streaming",", ",[26,383,385],{"href":384},"\u002Fen\u002Fguide\u002Fsyntax","syntax support",[26,387,389],{"href":388},"\u002Fen\u002Fplayground","Playground",".",[392,393,394],"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":46,"searchDepth":81,"depth":81,"links":396},[397,398,399],{"id":38,"depth":81,"text":39},{"id":165,"depth":81,"text":166},{"id":357,"depth":81,"text":358},"Render your first Markdown in Vue and understand source, themes and persistence.","md",null,"en",{},true,"\u002Fen\u002Fguide\u002Fgetting-started","Getting started",{"title":5,"description":400},"guide\u002Fgetting-started.en","8wCu9KtKE0-ELnqr8cR18F6dCJ2kIkLnyUB3cC5GIfU",1793045320729]