Skip to content

Commit

Permalink
Feature: add support for shiki defaultColors option (#11341)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>

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

Co-authored-by: Sarah Rainsberger <[email protected]>

* feat: improve changeset

* grammar tweak

---------

Co-authored-by: Bjorn Lu <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
  • Loading branch information
3 people authored Jul 17, 2024
1 parent f4870e5 commit 49b5145
Show file tree
Hide file tree
Showing 11 changed files with 129 additions and 0 deletions.
32 changes: 32 additions & 0 deletions .changeset/cold-crabs-arrive.md
Original file line number Diff line number Diff line change
@@ -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 change: 1 addition & 0 deletions packages/astro/src/core/config/schema.ts
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ export const AstroConfigSchema = z.object({
.or(z.custom<ShikiTheme>())
)
.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<ShikiTransformer>()
Expand Down
16 changes: 16 additions & 0 deletions packages/astro/test/astro-markdown-shiki.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export default {
markdown: {
syntaxHighlight: 'shiki',
shikiConfig: {
theme: 'github-light',
themes: {
light: 'github-light',
dark: 'github-light'
},
defaultColor: false
},
},
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"name": "@test/astro-markdown-skiki-default-color",
"version": "0.0.0",
"private": true,
"dependencies": {
"astro": "workspace:*"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<div class="container">
<slot></slot>
</div>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -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 changes: 2 additions & 0 deletions packages/markdown/remark/src/shiki.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export async function createShikiHighlighter({
langs = [],
theme = 'github-dark',
themes = {},
defaultColor,
wrap = false,
transformers = [],
}: ShikiConfig = {}): Promise<ShikiHighlighter> {
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/markdown/remark/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export interface ShikiConfig {
langs?: LanguageRegistration[];
theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw;
themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;
defaultColor?: 'light' | 'dark' | string | false;
wrap?: boolean | null;
transformers?: ShikiTransformer[];
}
Expand Down
16 changes: 16 additions & 0 deletions packages/markdown/remark/test/shiki.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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:/);
});
});
6 changes: 6 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 49b5145

Please sign in to comment.