From 49b5145158a603b9bb951bf914a6a9780c218704 Mon Sep 17 00:00:00 2001 From: Marco Campos Date: Wed, 17 Jul 2024 10:55:04 -0400 Subject: [PATCH] Feature: add support for shiki `defaultColors` option (#11341) * feat: add shiki option for default color * feat: propagate shiki option for default color to astro config * feat: add tests for default color * chore: add change set * fix: add complete type to shiki default color config * fix: remove unneeded heavy shiki theme from fixture * fix: add literals to schema validation Co-authored-by: Bjorn Lu * Update .changeset/cold-crabs-arrive.md Co-authored-by: Sarah Rainsberger * feat: improve changeset * grammar tweak --------- Co-authored-by: Bjorn Lu Co-authored-by: Sarah Rainsberger --- .changeset/cold-crabs-arrive.md | 32 +++++++++++++++++++ packages/astro/src/core/config/schema.ts | 1 + .../astro/test/astro-markdown-shiki.test.js | 16 ++++++++++ .../default-color/astro.config.mjs | 13 ++++++++ .../default-color/package.json | 8 +++++ .../default-color/src/layouts/content.astro | 10 ++++++ .../default-color/src/pages/index.md | 24 ++++++++++++++ packages/markdown/remark/src/shiki.ts | 2 ++ packages/markdown/remark/src/types.ts | 1 + packages/markdown/remark/test/shiki.test.js | 16 ++++++++++ pnpm-lock.yaml | 6 ++++ 11 files changed, 129 insertions(+) create mode 100644 .changeset/cold-crabs-arrive.md create mode 100644 packages/astro/test/fixtures/astro-markdown-shiki/default-color/astro.config.mjs create mode 100644 packages/astro/test/fixtures/astro-markdown-shiki/default-color/package.json create mode 100644 packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/layouts/content.astro create mode 100644 packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/pages/index.md diff --git a/.changeset/cold-crabs-arrive.md b/.changeset/cold-crabs-arrive.md new file mode 100644 index 0000000000..6bde11b6a8 --- /dev/null +++ b/.changeset/cold-crabs-arrive.md @@ -0,0 +1,32 @@ +--- +'@astrojs/markdown-remark': minor +'astro': minor +--- + +Adds support for [Shiki's `defaultColor` option](https://shiki.style/guide/dual-themes#without-default-color). + +This option allows you to override the values of a theme's inline style, adding only CSS variables to give you more flexibility in applying multiple color themes. + +Configure `defaultColor: false` in your Shiki config to apply throughout your site, or pass to Astro's built-in `` component to style an individual code block. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +export default defineConfig({ + markdown: { + shikiConfig: { + themes: { + light: 'github-light', + dark: 'github-dark', + }, + defaultColor: false, + }, + }, +}); +``` + +```astro +--- +import { Code } from 'astro:components'; +--- + +``` diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index bb3130137e..7d7cf474ba 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -321,6 +321,7 @@ export const AstroConfigSchema = z.object({ .or(z.custom()) ) .default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.themes!), + defaultColor: z.union([z.literal('light'), z.literal('dark'), z.string(), z.literal(false)]).optional(), wrap: z.boolean().or(z.null()).default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.wrap!), transformers: z .custom() diff --git a/packages/astro/test/astro-markdown-shiki.test.js b/packages/astro/test/astro-markdown-shiki.test.js index 24ab7d2b30..3e0fa9734a 100644 --- a/packages/astro/test/astro-markdown-shiki.test.js +++ b/packages/astro/test/astro-markdown-shiki.test.js @@ -78,6 +78,22 @@ describe('Astro Markdown Shiki', () => { ); }); }); + + describe('Default color', async () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/default-color/' }); + await fixture.build(); + }); + + it('Renders default color without themes', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + assert.doesNotMatch($('pre').attr().style, /background-color/); + }); + }); }); describe('Languages', () => { diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/default-color/astro.config.mjs b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/astro.config.mjs new file mode 100644 index 0000000000..815e56cf38 --- /dev/null +++ b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/astro.config.mjs @@ -0,0 +1,13 @@ +export default { + markdown: { + syntaxHighlight: 'shiki', + shikiConfig: { + theme: 'github-light', + themes: { + light: 'github-light', + dark: 'github-light' + }, + defaultColor: false + }, + }, +} diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/default-color/package.json b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/package.json new file mode 100644 index 0000000000..12460ffa73 --- /dev/null +++ b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/package.json @@ -0,0 +1,8 @@ +{ + "name": "@test/astro-markdown-skiki-default-color", + "version": "0.0.0", + "private": true, + "dependencies": { + "astro": "workspace:*" + } +} diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/layouts/content.astro b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/layouts/content.astro new file mode 100644 index 0000000000..925a243a93 --- /dev/null +++ b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/layouts/content.astro @@ -0,0 +1,10 @@ + + + + + +
+ +
+ + diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/pages/index.md b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/pages/index.md new file mode 100644 index 0000000000..a75170537c --- /dev/null +++ b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/pages/index.md @@ -0,0 +1,24 @@ +--- +layout: ../layouts/content.astro +--- + +# Hello world + +```yaml +apiVersion: v3 +kind: Pod +metadata: + name: rss-site + labels: + app: web +spec: + containers: + - name: front-end + image: nginx + ports: + - containerPort: 80 + - name: rss-reader + image: nickchase/rss-php-nginx:v1 + ports: + - containerPort: 88 +``` diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts index 66f85b85bd..fa29c9c06a 100644 --- a/packages/markdown/remark/src/shiki.ts +++ b/packages/markdown/remark/src/shiki.ts @@ -42,6 +42,7 @@ export async function createShikiHighlighter({ langs = [], theme = 'github-dark', themes = {}, + defaultColor, wrap = false, transformers = [], }: ShikiConfig = {}): Promise { @@ -73,6 +74,7 @@ export async function createShikiHighlighter({ return highlighter.codeToHtml(code, { ...themeOptions, + defaultColor, lang, // NOTE: while we can spread `options.attributes` here so that Shiki can auto-serialize this as rendered // attributes on the top-level tag, it's not clear whether it is fine to pass all attributes as meta, as diff --git a/packages/markdown/remark/src/types.ts b/packages/markdown/remark/src/types.ts index 23b8a8a6ab..e3496ec5dd 100644 --- a/packages/markdown/remark/src/types.ts +++ b/packages/markdown/remark/src/types.ts @@ -39,6 +39,7 @@ export interface ShikiConfig { langs?: LanguageRegistration[]; theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw; themes?: Record; + defaultColor?: 'light' | 'dark' | string | false; wrap?: boolean | null; transformers?: ShikiTransformer[]; } diff --git a/packages/markdown/remark/test/shiki.test.js b/packages/markdown/remark/test/shiki.test.js index d856b54b7f..149fa38bb5 100644 --- a/packages/markdown/remark/test/shiki.test.js +++ b/packages/markdown/remark/test/shiki.test.js @@ -85,4 +85,20 @@ describe('shiki syntax highlighting', () => { assert.match(html, /data-test="\{1,3-4\}"/); }); + + it('supports the defaultColor setting', async () => { + const processor = await createMarkdownProcessor({ + shikiConfig: { + themes: { + light: 'github-light', + dark: 'github-dark', + }, + defaultColor: false, + }, + }); + const { code } = await processor.render('```\ntest\n```'); + + // Doesn't have `color` or `background-color` properties. + assert.doesNotMatch(code, /color:/); + }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 910378be0e..4d527f0ffe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2250,6 +2250,12 @@ importers: specifier: workspace:* version: link:../../.. + packages/astro/test/fixtures/astro-markdown-shiki/default-color: + dependencies: + astro: + specifier: workspace:* + version: link:../../../.. + packages/astro/test/fixtures/astro-markdown-shiki/langs: dependencies: astro: