[{"data":1,"prerenderedAt":151},["ShallowReactive",2],{"search-sections":3},[4,10,16,21,26,31,36,41,47,52,57,62,67,72,77,81,86,91,96,101,106,111,116,121,126,131,136,141,146],{"id":5,"title":6,"titles":7,"content":8,"level":9},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5","How I Ported AstroPaper to Nuxt Content with Fable 5",[],"A full walkthrough of porting the AstroPaper blog theme from Astro 6 to Nuxt 4 and Nuxt Content v3 — done in one session with Claude Code running Fable 5. This entire blog is a port of AstroPaper — Sat Naing's minimal, accessible Astro blog theme — rebuilt on Nuxt 4 and Nuxt Content v3. The port was done in a single session by Claude Code running Fable 5, and this post documents exactly how it went: the plan, the architecture mapping, and the gotchas that only showed up once a real browser looked at the result.",1,{"id":11,"title":12,"titles":13,"content":14,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#table-of-contents","Table of contents",[6],"Open Table of contentsThe starting pointMapping Astro concepts to NuxtPorting the designMigrating the contentThe gotchas1. pnpm blocks native build scripts2. Shiki tokens are class-based, not inline3. MDC eats callout markersVerificationWhat was deliberately left outTakeaway",2,{"id":17,"title":18,"titles":19,"content":20,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#the-starting-point","The starting point",[6],"The prompt was simple: \"create a port of astro-paper, clone this to tmp, but use Nuxt 4 and Nuxt Content.\" The agent's first moves: git clone --depth 1 AstroPaper into \u002Ftmp\u002Fastro-paperRead the Nuxt and Nuxt Content llms.txt docs to confirm current APIsRead every source file of the theme — config, layouts, components, pages, utils, and all three CSS files — before writing a single line That last step mattered. AstroPaper v6 has subtle behavior baked in: frontmatter slug overrides file names, underscore-prefixed directories are stripped from URLs (the release posts live in _releases\u002F but appear at \u002Fposts\u002Fastro-paper-v6), and scheduled posts get a 15-minute publish margin. Skipping the reading phase would have produced a port that looked right and behaved wrong.",{"id":22,"title":23,"titles":24,"content":25,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#mapping-astro-concepts-to-nuxt","Mapping Astro concepts to Nuxt",[6],"AstroPaper (Astro 6)NuxtPaper (Nuxt 4)Content collections + glob loader@nuxt\u002Fcontent collections in content.config.tsgetCollection(\"posts\")queryCollection(\"posts\") + useAsyncData.astro componentsVue SFCs with auto-importgetStaticPaths paginationOne catch-all route deciding list vs. detailPagefind searchMiniSearch + queryCollectionSearchSections@astrojs\u002Frss \u002F sitemapNitro server routes (\u002Frss.xml, \u002Fsitemap.xml)Inline theme script in Layoutapp.head.script + a useTheme composable The trickiest routing decision: Astro disambiguates \u002Fposts\u002F2 (pagination) from \u002Fposts\u002Fmy-post (detail) at build time via getStaticPaths. Nuxt routes dynamically, so the port uses a single pages\u002Fposts\u002F[...slug].vue catch-all — an empty or numeric segment renders the paginated list, anything else renders the post. \u002F\u002F pages\u002Fposts\u002F[...slug].vue\nconst isList = computed(\n  () =>\n    segments.value.length === 0 ||\n    (segments.value.length === 1 && \u002F^\\d+$\u002F.test(segments.value[0]!))\n);",{"id":27,"title":28,"titles":29,"content":30,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#porting-the-design","Porting the design",[6],"AstroPaper's look survives almost verbatim because both projects use Tailwind CSS v4: theme.css — the design tokens (--background, --accent, …) copied as-is, including the @custom-variant dark that keys off data-theme=\"dark\"typography.css — the app-prose overrides ported with one change: Astro's .astro-code selectors became Nuxt Content's .shikiThe Tabler icons were code-generated: a small script read every SVG from the cloned repo and wrapped each one in a Vue SFC The FOUC-free dark mode works the same way as the original — an inline script in \u003Chead> sets data-theme before first paint, and a useTheme composable handles toggling, localStorage, and OS-preference sync.",{"id":32,"title":33,"titles":34,"content":35,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#migrating-the-content","Migrating the content",[6],"A migration script (scripts\u002Fmigrate-content.mjs) converted the original posts: Files renamed to their frontmatter slug, so every URL matches the original site_releases\u002F and _color-schemes\u002F flattened into the posts root, mirroring Astro's underscore-strippingMDX converted to MDC: imports stripped, \u003CResponsiveTable> JSX rewritten to ::responsive-table blocks backed by a Vue component in components\u002Fcontent\u002FImage references rewritten to \u002Fimages\u002F in public\u002F",{"id":37,"title":38,"titles":39,"content":40,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#the-gotchas","The gotchas",[6],"This is the part worth reading. Three issues only surfaced when the agent drove a real browser against the dev server. NoteEverything below was found by taking screenshots with a browser-automation CLI and actually looking at them — not by tests or type checks.",{"id":42,"title":43,"titles":44,"content":45,"level":46},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#_1-pnpm-blocks-native-build-scripts","1. pnpm blocks native build scripts",[6,38],"Nuxt Content v3 stores content in SQLite via better-sqlite3. The first pnpm dev crashed with \"Could not locate the bindings file\" because pnpm refuses to run install scripts by default. Fix: {\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"better-sqlite3\"]\n  }\n} …followed by pnpm rebuild better-sqlite3.",3,{"id":48,"title":49,"titles":50,"content":51,"level":46},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#_2-shiki-tokens-are-class-based-not-inline","2. Shiki tokens are class-based, not inline",[6,38],"Astro emits Shiki tokens with inline styles. Nuxt Content emits classes (\u003Cspan class=\"sCRLn\">) plus a generated stylesheet of --shiki-default \u002F --shiki-dark variables, and switches them via the dark class on \u003Chtml>. Token colors worked out of the box — but the \u003Cpre> element ships with an empty style attribute, so Tailwind Typography's default dark-gray code background showed through in both themes. The fix was defining the block backgrounds explicitly: .app-prose pre.shiki {\n  --shiki-default-bg: #ffffff; \u002F* min-light *\u002F\n  --shiki-dark-bg: #011627; \u002F* night-owl *\u002F\n  background-color: var(--shiki-default-bg);\n}\n\nhtml[data-theme=\"dark\"] .app-prose pre.shiki {\n  background-color: var(--shiki-dark-bg);\n}",{"id":53,"title":54,"titles":55,"content":56,"level":46},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#_3-mdc-eats-callout-markers","3. MDC eats callout markers",[6,38],"AstroPaper uses rehype-callouts for GitHub-style > [!TIP] callouts. In Nuxt Content they rendered as plain blockquotes containing a mysterious \u003Cspan>!TIP\u003C\u002Fspan> — because MDC's inline span syntax ([text]) consumed the brackets before the rehype plugin ever ran. The migration script now escapes them: out = out.replace(\u002F^(>\\s*)\\[!(\\w+)\\]\u002Fgm, \"$1\\\\[!$2]\"); With the escape in place, rehype-callouts sees the literal [!TIP] and renders proper callouts — like the one above.",{"id":58,"title":59,"titles":60,"content":61,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#verification","Verification",[6],"The port wasn't declared done until: Every route returned the right status code (\u002F, pagination, nested post URLs, tags, archives, search, RSS, sitemap, and a 404 for garbage paths)Screenshots confirmed both themes, code highlighting, callouts, tables, the mobile hamburger menu, and search resultsnuxt generate produced a fully static build — 96 prerendered routes, with draft posts correctly excluded from the output, the RSS feed, and the sitemap",{"id":63,"title":64,"titles":65,"content":66,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#what-was-deliberately-left-out","What was deliberately left out",[6],"Dynamic OG images — AstroPaper renders per-post OG images with satori; the port falls back to a static default imageremark-collapse — the table of contents renders expandedPer-element view transitions — document-level transitions are enabled, but the title\u002Ftag morph animations were skipped",{"id":68,"title":69,"titles":70,"content":71,"level":15},"\u002Fposts\u002Fhow-i-ported-astropaper-to-nuxt-content-with-fable-5#takeaway","Takeaway",[6],"The port took one session: read everything first, map the concepts honestly, migrate content with a script instead of by hand, and verify in a real browser — because the only three real bugs were ones no compiler would ever catch. html pre.shiki code .sEmqk, html code.shiki .sEmqk{--shiki-default:#C2C3C5;--shiki-default-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic}html pre.shiki code .sj-IK, html code.shiki .sj-IK{--shiki-default:#D32F2F;--shiki-dark:#C792EA}html pre.shiki code .sVwY6, html code.shiki .sVwY6{--shiki-default:#1976D2;--shiki-default-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic}html pre.shiki code .sCRLn, html code.shiki .sCRLn{--shiki-default:#6F42C1;--shiki-default-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic}html pre.shiki code .styZ9, html code.shiki .styZ9{--shiki-default:#24292EFF;--shiki-dark:#D6DEEB}html pre.shiki code .swRlg, html code.shiki .swRlg{--shiki-default:#24292EFF;--shiki-dark:#D9F5DD}html pre.shiki code .s120W, html code.shiki .s120W{--shiki-default:#1976D2;--shiki-default-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic}html pre.shiki code .sdI2O, html code.shiki .sdI2O{--shiki-default:#24292EFF;--shiki-default-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic}html pre.shiki code .sWAzl, html code.shiki .sWAzl{--shiki-default:#1976D2;--shiki-default-font-style:inherit;--shiki-dark:#FAF39F;--shiki-dark-font-style:italic}html pre.shiki code .s_WS7, html code.shiki .s_WS7{--shiki-default:#1976D2;--shiki-default-font-style:inherit;--shiki-dark:#7FDBCA;--shiki-dark-font-style:italic}html pre.shiki code .sC5Uh, html code.shiki .sC5Uh{--shiki-default:#1976D2;--shiki-dark:#F78C6C}html pre.shiki code .sIKrn, html code.shiki .sIKrn{--shiki-default:#22863A;--shiki-dark:#D9F5DD}html pre.shiki code .sysy8, html code.shiki .sysy8{--shiki-default:#D32F2F;--shiki-default-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic}html pre.shiki code .sfnFC, html code.shiki .sfnFC{--shiki-default:#22863A;--shiki-default-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic}html pre.shiki code .seDH9, html code.shiki .seDH9{--shiki-default:#D32F2F;--shiki-dark:#7FDBCA}html pre.shiki code .sGYWJ, html code.shiki .sGYWJ{--shiki-default:#6F42C1;--shiki-default-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic}html pre.shiki code .sJOc3, html code.shiki .sJOc3{--shiki-default:#24292EFF;--shiki-default-font-style:inherit;--shiki-dark:#BAEBE2;--shiki-dark-font-style:italic}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 .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);}html pre.shiki code .s0XAg, html code.shiki .s0XAg{--shiki-default:#212121;--shiki-dark:#D6DEEB}html pre.shiki code .stZ2A, html code.shiki .stZ2A{--shiki-default:#22863A;--shiki-dark:#C789D6}html pre.shiki code .sKmXy, html code.shiki .sKmXy{--shiki-default:#6F42C1;--shiki-dark:#C5E478}html pre.shiki code .sNE3-, html code.shiki .sNE3-{--shiki-default:#6F42C1;--shiki-default-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic}html pre.shiki code .sGkQF, html code.shiki .sGkQF{--shiki-default:#22863A;--shiki-dark:#FF6363}html pre.shiki code .sF-nr, html code.shiki .sF-nr{--shiki-default:#24292EFF;--shiki-dark:#C5E478}html pre.shiki code .sVzfZ, html code.shiki .sVzfZ{--shiki-default:#D32F2F;--shiki-dark:#D6DEEB}html pre.shiki code .s5thU, html code.shiki .s5thU{--shiki-default:#1976D2;--shiki-dark:#FFEB95}html pre.shiki code .syytd, html code.shiki .syytd{--shiki-default:#1976D2;--shiki-dark:#80CBC4}html pre.shiki code .s6Vda, html code.shiki .s6Vda{--shiki-default:#1976D2;--shiki-dark:#D6DEEB}html pre.shiki code .sMBZI, html code.shiki .sMBZI{--shiki-default:#1976D2;--shiki-dark:#C5E478}html pre.shiki code .sXOhJ, html code.shiki .sXOhJ{--shiki-default:#24292EFF;--shiki-dark:#C792EA}html pre.shiki code .sS6ib, html code.shiki .sS6ib{--shiki-default:#22863A;--shiki-dark:#ECC48D}html pre.shiki code .sw9md, html code.shiki .sw9md{--shiki-default:#24292EFF;--shiki-dark:#D7DBE0}html pre.shiki code .s3BZK, html code.shiki .s3BZK{--shiki-default:#22863A;--shiki-dark:#5CA7E4}html pre.shiki code .swXwZ, html code.shiki .swXwZ{--shiki-default:#22863A;--shiki-dark:#82AAFF}html pre.shiki code .scFj9, html code.shiki .scFj9{--shiki-default:#22863A;--shiki-dark:#F78C6C}html pre.shiki code .scjHm, html code.shiki .scjHm{--shiki-default:#D32F2F;--shiki-dark:#5CA7E4}",{"id":73,"title":74,"titles":75,"content":76,"level":9},"\u002Fposts\u002Fpredefined-color-schemes","Predefined color schemes",[],"Some well-crafted, predefined light and dark color schemes for NuxtPaper, ready to drop into theme.css. NuxtPaper includes a collection of predefined color schemes you can use to customize the theme appearance. Each scheme defines a complete set of CSS custom properties (variables) for a light or dark mode.",{"id":78,"title":12,"titles":79,"content":80,"level":15},"\u002Fposts\u002Fpredefined-color-schemes#table-of-contents",[74],"Open Table of contentsHow the theme system worksCSS variables referenceLight schemesPaper LightKha-YanNilaJadeitePyit Tine HtaungDark schemesPaper DarkPaper Dark IIDeep PurpleEmberEspresso",{"id":82,"title":83,"titles":84,"content":85,"level":15},"\u002Fposts\u002Fpredefined-color-schemes#how-the-theme-system-works","How the theme system works",[74],"Both the light and dark color schemes live in app\u002Fassets\u002Fcss\u002Ftheme.css. The light scheme is defined under the :root, [data-theme=\"light\"] selector, and the dark scheme under [data-theme=\"dark\"]: \u002F* Light theme values *\u002F\n:root,\n[data-theme=\"light\"] {\n  --background: #fdfdfd;\n  --foreground: #282728;\n  --accent: #006cac;\n  --accent-foreground: #ffffff;\n  --muted: #e6e6e6;\n  --muted-foreground: #6b7280;\n  --border: #ece9e9;\n}\n\n\u002F* Dark theme values *\u002F\n[data-theme=\"dark\"] {\n  --background: #212737;\n  --foreground: #eaedf3;\n  --accent: #ff6b01;\n  --accent-foreground: #ffffff;\n  --muted: #343f60;\n  --muted-foreground: #afb9ca;\n  --border: #ab4b08;\n} To switch to a different color scheme, replace the variable values inside :root, [data-theme=\"light\"] (for light) or [data-theme=\"dark\"] (for dark) with the values of any scheme below. The repo ships every scheme below as a commented-out block in theme.css — uncomment one and comment out the active block to swap.",{"id":87,"title":88,"titles":89,"content":90,"level":15},"\u002Fposts\u002Fpredefined-color-schemes#css-variables-reference","CSS variables reference",[74],"All color schemes use the following CSS custom properties: VariablePurpose--backgroundPrimary background color--foregroundPrimary text color--accentAccent\u002Finteractive elements (links, buttons, highlights)--accent-foregroundText color on accent backgrounds--mutedSecondary background color for subtle sections--muted-foregroundText color for secondary content--borderBorder and divider color",{"id":92,"title":93,"titles":94,"content":95,"level":15},"\u002Fposts\u002Fpredefined-color-schemes#light-schemes","Light schemes",[74],"Light color schemes are defined using the CSS selectors :root and [data-theme=\"light\"].",{"id":97,"title":98,"titles":99,"content":100,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#paper-light","Paper Light",[74,93],"Default NuxtPaper light theme. :root,\n[data-theme=\"light\"] {\n  --background: #fdfdfd;\n  --foreground: #282728;\n  --accent: #006cac;\n  --accent-foreground: #ffffff;\n  --muted: #e6e6e6;\n  --muted-foreground: #6b7280;\n  --border: #ece9e9;\n}",{"id":102,"title":103,"titles":104,"content":105,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#kha-yan","Kha-Yan",[74,93],"Purple-focused light scheme with a warm background. :root,\n[data-theme=\"light\"] {\n  --background: #fefaec;\n  --foreground: #120e01;\n  --accent: #6e10cf;\n  --accent-foreground: #fefaec;\n  --muted: #dcdcdc;\n  --muted-foreground: #6b7280;\n  --border: #cdc4d6;\n}",{"id":107,"title":108,"titles":109,"content":110,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#nila","Nila",[74,93],"Light purple scheme with cool blue undertones. :root,\n[data-theme=\"light\"] {\n  --background: #f6f6fb;\n  --foreground: #0c0c19;\n  --accent: #6760b4;\n  --accent-foreground: #f3f3f3;\n  --muted: #dddcea;\n  --muted-foreground: #54515b;\n  --border: #d8d6ec;\n}",{"id":112,"title":113,"titles":114,"content":115,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#jadeite","Jadeite",[74,93],"Teal-accented light scheme with a neutral background. :root,\n[data-theme=\"light\"] {\n  --background: #f6fcf7;\n  --foreground: #060b07;\n  --accent: #027c6d;\n  --accent-foreground: #ffffff;\n  --muted: #c9e4e2;\n  --muted-foreground: #6b7280;\n  --border: #d4e1df;\n}",{"id":117,"title":118,"titles":119,"content":120,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#pyit-tine-htaung","Pyit Tine Htaung",[74,93],"Red and gold accent scheme with warm tones. :root,\n[data-theme=\"light\"] {\n  --background: #fffaf6;\n  --foreground: #060503;\n  --accent: #aa0215;\n  --accent-foreground: #ffcf75;\n  --muted: #ffdc98;\n  --muted-foreground: #54515b;\n  --border: #ffdc98;\n}",{"id":122,"title":123,"titles":124,"content":125,"level":15},"\u002Fposts\u002Fpredefined-color-schemes#dark-schemes","Dark schemes",[74],"Dark color schemes are defined using the CSS selector [data-theme=\"dark\"].",{"id":127,"title":128,"titles":129,"content":130,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#paper-dark","Paper Dark",[74,123],"Original AstroPaper dark theme with cyan accents. [data-theme=\"dark\"] {\n  --background: #2f3741;\n  --foreground: #e6e6e6;\n  --accent: #1ad9d9;\n  --accent-foreground: #0d2b2b;\n  --muted: #596b81;\n  --muted-foreground: #8faabb;\n  --border: #3b4655;\n}",{"id":132,"title":133,"titles":134,"content":135,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#paper-dark-ii","Paper Dark II",[74,123],"Current default dark theme with orange accents. [data-theme=\"dark\"] {\n  --background: #212737;\n  --foreground: #eaedf3;\n  --accent: #ff6b01;\n  --accent-foreground: #ffffff;\n  --muted: #343f60;\n  --muted-foreground: #afb9ca;\n  --border: #ab4b08;\n}",{"id":137,"title":138,"titles":139,"content":140,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#deep-purple","Deep Purple",[74,123],"Vibrant magenta accents on a dark background. [data-theme=\"dark\"] {\n  --background: #212737;\n  --foreground: #eaedf3;\n  --accent: #eb3fd3;\n  --accent-foreground: #1a0d1a;\n  --muted: #513f51;\n  --muted-foreground: #c09abc;\n  --border: #642451;\n}",{"id":142,"title":143,"titles":144,"content":145,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#ember","Ember",[74,123],"Warm, muted dark scheme with red accents. [data-theme=\"dark\"] {\n  --background: #1a1a1a;\n  --foreground: #f5efe4;\n  --accent: #ff3737;\n  --accent-foreground: #1a1a1a;\n  --muted: #38342f;\n  --muted-foreground: #a59a8c;\n  --border: #6f5648;\n}",{"id":147,"title":148,"titles":149,"content":150,"level":46},"\u002Fposts\u002Fpredefined-color-schemes#espresso","Espresso",[74,123],"Brown-focused warm dark scheme. [data-theme=\"dark\"] {\n  --background: #2f2f2f;\n  --foreground: #ebe5e1;\n  --accent: #ee781e;\n  --accent-foreground: #1a1a1a;\n  --muted: #4f4b44;\n  --muted-foreground: #ddbfa7;\n  --border: #6f5648;\n} html pre.shiki code .sEmqk, html code.shiki .sEmqk{--shiki-default:#C2C3C5;--shiki-default-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic}html pre.shiki code .sKmXy, html code.shiki .sKmXy{--shiki-default:#6F42C1;--shiki-dark:#C5E478}html pre.shiki code .sNE3-, html code.shiki .sNE3-{--shiki-default:#6F42C1;--shiki-default-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic}html pre.shiki code .sn6Xf, html code.shiki .sn6Xf{--shiki-default:#212121;--shiki-dark:#C792EA}html pre.shiki code .sXOhJ, html code.shiki .sXOhJ{--shiki-default:#24292EFF;--shiki-dark:#C792EA}html pre.shiki code .seDH9, html code.shiki .seDH9{--shiki-default:#D32F2F;--shiki-dark:#7FDBCA}html pre.shiki code .sIKrn, html code.shiki .sIKrn{--shiki-default:#22863A;--shiki-dark:#D9F5DD}html pre.shiki code .sS6ib, html code.shiki .sS6ib{--shiki-default:#22863A;--shiki-dark:#ECC48D}html pre.shiki code .styZ9, html code.shiki .styZ9{--shiki-default:#24292EFF;--shiki-dark:#D6DEEB}html pre.shiki code .sF-nr, html code.shiki .sF-nr{--shiki-default:#24292EFF;--shiki-dark:#C5E478}html pre.shiki code .sVzfZ, html code.shiki .sVzfZ{--shiki-default:#D32F2F;--shiki-dark:#D6DEEB}html pre.shiki code .sC5Uh, html code.shiki .sC5Uh{--shiki-default:#1976D2;--shiki-dark:#F78C6C}html pre.shiki code .s5thU, html code.shiki .s5thU{--shiki-default:#1976D2;--shiki-dark:#FFEB95}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 .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);}",1781461333076]