Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Feature: add support for shiki defaultColors option (#11341)

Browse source 
* 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 <bjornlu.dev@gmail.com>

* Update .changeset/cold-crabs-arrive.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* feat: improve changeset

* grammar tweak

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
Marco Campos 2024-07-17 10:55:04 -04:00 committed by GitHub
parent f4870e59ec
commit 49b5145158
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 129 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
.changeset/cold-crabs-arrive.md Normal file
View file

@ -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 `<Code>` 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';
---
<Code code={`const useMyColors = true`} lang="js" defaultColor={false} />
```

1
packages/astro/src/core/config/schema.ts
View file

@ -321,6 +321,7 @@ export const AstroConfigSchema = z.object({
.or(z.custom<ShikiTheme>()) .or(z.custom<ShikiTheme>())
) )
.default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.themes!), .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!), wrap: z.boolean().or(z.null()).default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.wrap!),
transformers: z transformers: z
.custom<ShikiTransformer>() .custom<ShikiTransformer>()

16
packages/astro/test/astro-markdown-shiki.test.js
View file

@ -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', () => { describe('Languages', () => {

13
packages/astro/test/fixtures/astro-markdown-shiki/default-color/astro.config.mjs vendored Normal file
View file

@ -0,0 +1,13 @@
export default {
markdown: {
syntaxHighlight: 'shiki',
shikiConfig: {
theme: 'github-light',
themes: {
light: 'github-light',
dark: 'github-light'
},
defaultColor: false
},
},
}

8
packages/astro/test/fixtures/astro-markdown-shiki/default-color/package.json vendored Normal file
View file

@ -0,0 +1,8 @@
{
"name": "@test/astro-markdown-skiki-default-color",
"version": "0.0.0",
"private": true,
"dependencies": {
"astro": "workspace:*"
}
}

10
packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/layouts/content.astro vendored Normal file
View file

@ -0,0 +1,10 @@
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<div class="container">
<slot></slot>
</div>
</body>
</html>

24
packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/pages/index.md vendored Normal file
View file

@ -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
```

2
packages/markdown/remark/src/shiki.ts
View file

@ -42,6 +42,7 @@ export async function createShikiHighlighter({
langs = [], langs = [],
theme = 'github-dark', theme = 'github-dark',
themes = {}, themes = {},
defaultColor,
wrap = false, wrap = false,
transformers = [], transformers = [],
}: ShikiConfig = {}): Promise<ShikiHighlighter> { }: ShikiConfig = {}): Promise<ShikiHighlighter> {
@ -73,6 +74,7 @@ export async function createShikiHighlighter({
return highlighter.codeToHtml(code, { return highlighter.codeToHtml(code, {
...themeOptions, ...themeOptions,
defaultColor,
lang, lang,
// NOTE: while we can spread `options.attributes` here so that Shiki can auto-serialize this as rendered // 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 // attributes on the top-level tag, it's not clear whether it is fine to pass all attributes as meta, as

1
packages/markdown/remark/src/types.ts
View file

@ -39,6 +39,7 @@ export interface ShikiConfig {
langs?: LanguageRegistration[]; langs?: LanguageRegistration[];
theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw; theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw;
themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>; themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;
defaultColor?: 'light' | 'dark' | string | false;
wrap?: boolean | null; wrap?: boolean | null;
transformers?: ShikiTransformer[]; transformers?: ShikiTransformer[];
} }

16
packages/markdown/remark/test/shiki.test.js
View file

@ -85,4 +85,20 @@ describe('shiki syntax highlighting', () => {
assert.match(html, /data-test="\{1,3-4\}"/); 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:/);
});
}); });

6
pnpm-lock.yaml
View file

@ -2250,6 +2250,12 @@ importers:
specifier: workspace:* specifier: workspace:*
version: link:../../.. 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: packages/astro/test/fixtures/astro-markdown-shiki/langs:
dependencies: dependencies:
astro: astro: