From 0946c0aa514fd2cf271ce8ae9d1fd642c0bd231b Mon Sep 17 00:00:00 2001 From: De-Great Yartey Date: Mon, 8 Jan 2024 13:28:04 +0000 Subject: [PATCH 01/12] Bump shikiji, use transformers API, expose transformers API --- .changeset/six-scissors-worry.md | 5 ++ packages/markdown/remark/package.json | 2 +- packages/markdown/remark/src/shiki.ts | 124 +++++++++++++------------- packages/markdown/remark/src/types.ts | 2 + pnpm-lock.yaml | 14 ++- 5 files changed, 84 insertions(+), 63 deletions(-) create mode 100644 .changeset/six-scissors-worry.md diff --git a/.changeset/six-scissors-worry.md b/.changeset/six-scissors-worry.md new file mode 100644 index 000000000000..76bd0fbd1a8d --- /dev/null +++ b/.changeset/six-scissors-worry.md @@ -0,0 +1,5 @@ +--- +"@astrojs/markdown-remark": minor +--- + +Bump shikiji, use transformers API diff --git a/packages/markdown/remark/package.json b/packages/markdown/remark/package.json index c65a582e77a7..e59155d7d78f 100644 --- a/packages/markdown/remark/package.json +++ b/packages/markdown/remark/package.json @@ -38,7 +38,7 @@ "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "remark-smartypants": "^2.0.0", - "shikiji": "^0.6.13", + "shikiji": "^0.9.17", "unified": "^11.0.4", "unist-util-visit": "^5.0.0", "vfile": "^6.0.1" diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts index 477ab2184b83..5bb4f05273eb 100644 --- a/packages/markdown/remark/src/shiki.ts +++ b/packages/markdown/remark/src/shiki.ts @@ -29,6 +29,7 @@ export async function createShikiHighlighter({ theme = 'github-dark', experimentalThemes = {}, wrap = false, + transformers = [], }: ShikiConfig = {}): Promise { const themes = experimentalThemes; @@ -53,74 +54,77 @@ export async function createShikiHighlighter({ return highlighter.codeToHtml(code, { ...themeOptions, lang, - transforms: { - pre(node) { - // Swap to `code` tag if inline - if (inline) { - node.tagName = 'code'; - } + transformers: [ + { + pre(node) { + // Swap to `code` tag if inline + if (inline) { + node.tagName = 'code'; + } - // Cast to string as shikiji will always pass them as strings instead of any other types - const classValue = (node.properties.class as string) ?? ''; - const styleValue = (node.properties.style as string) ?? ''; + // Cast to string as shikiji will always pass them as strings instead of any other types + const classValue = (node.properties.class as string) ?? ''; + const styleValue = (node.properties.style as string) ?? ''; - // Replace "shiki" class naming with "astro-code" - node.properties.class = classValue.replace(/shiki/g, 'astro-code'); + // Replace "shiki" class naming with "astro-code" + node.properties.class = classValue.replace(/shiki/g, 'astro-code'); - // Handle code wrapping - // if wrap=null, do nothing. - if (wrap === false) { - node.properties.style = styleValue + '; overflow-x: auto;'; - } else if (wrap === true) { - node.properties.style = - styleValue + '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;'; - } - }, - line(node) { - // Add "user-select: none;" for "+"/"-" diff symbols. - // Transform `+ something - // into `+ something` - if (lang === 'diff') { - const innerSpanNode = node.children[0]; - const innerSpanTextNode = - innerSpanNode?.type === 'element' && innerSpanNode.children?.[0]; + // Handle code wrapping + // if wrap=null, do nothing. + if (wrap === false) { + node.properties.style = styleValue + '; overflow-x: auto;'; + } else if (wrap === true) { + node.properties.style = + styleValue + '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;'; + } + }, + line(node) { + // Add "user-select: none;" for "+"/"-" diff symbols. + // Transform `+ something + // into `+ something` + if (lang === 'diff') { + const innerSpanNode = node.children[0]; + const innerSpanTextNode = + innerSpanNode?.type === 'element' && innerSpanNode.children?.[0]; - if (innerSpanTextNode && innerSpanTextNode.type === 'text') { - const start = innerSpanTextNode.value[0]; - if (start === '+' || start === '-') { - innerSpanTextNode.value = innerSpanTextNode.value.slice(1); - innerSpanNode.children.unshift({ - type: 'element', - tagName: 'span', - properties: { style: 'user-select: none;' }, - children: [{ type: 'text', value: start }], - }); + if (innerSpanTextNode && innerSpanTextNode.type === 'text') { + const start = innerSpanTextNode.value[0]; + if (start === '+' || start === '-') { + innerSpanTextNode.value = innerSpanTextNode.value.slice(1); + innerSpanNode.children.unshift({ + type: 'element', + tagName: 'span', + properties: { style: 'user-select: none;' }, + children: [{ type: 'text', value: start }], + }); + } } } - } - }, - code(node) { - if (inline) { - return node.children[0] as typeof node; - } - }, - root(node) { - if (Object.values(experimentalThemes).length) { - return; - } + }, + code(node) { + if (inline) { + return node.children[0] as typeof node; + } + }, + root(node) { + if (Object.values(experimentalThemes).length) { + return; + } - // theme.id for shiki -> shikiji compat - const themeName = typeof theme === 'string' ? theme : theme.name; - if (themeName === 'css-variables') { - // Replace special color tokens to CSS variables - visit(node as any, 'element', (child) => { - if (child.properties?.style) { - child.properties.style = replaceCssVariables(child.properties.style); - } - }); - } + // theme.id for shiki -> shikiji compat + const themeName = typeof theme === 'string' ? theme : theme.name; + if (themeName === 'css-variables') { + // Replace special color tokens to CSS variables + visit(node as any, 'element', (child) => { + if (child.properties?.style) { + child.properties.style = replaceCssVariables(child.properties.style); + } + }); + } + }, }, - }, + ...transformers, + ], }); }, }; diff --git a/packages/markdown/remark/src/types.ts b/packages/markdown/remark/src/types.ts index ab5af8ed134b..6ab7e2128b86 100644 --- a/packages/markdown/remark/src/types.ts +++ b/packages/markdown/remark/src/types.ts @@ -4,6 +4,7 @@ import type { Options as RemarkRehypeOptions } from 'remark-rehype'; import type { BuiltinTheme, LanguageRegistration, + ShikijiTransformer, ThemeRegistration, ThemeRegistrationRaw, } from 'shikiji'; @@ -37,6 +38,7 @@ export interface ShikiConfig { theme?: BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw; experimentalThemes?: Record; wrap?: boolean | null; + transformers?: ShikijiTransformer[]; } export interface AstroMarkdownOptions { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7dd02558ad6a..1ed35a526d46 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5002,8 +5002,8 @@ importers: specifier: ^2.0.0 version: 2.0.0 shikiji: - specifier: ^0.6.13 - version: 0.6.13 + specifier: ^0.9.17 + version: 0.9.17 unified: specifier: ^11.0.4 version: 11.0.4 @@ -14481,12 +14481,22 @@ packages: vscode-textmate: 5.2.0 dev: true + /shikiji-core@0.9.17: + resolution: {integrity: sha512-r1FWTXk6SO2aYqfWgcsJ11MuVQ1ymPSdXzJjK7q8EXuyqu8yc2N5qrQy5+BL6gTVOaF4yLjbxFjF+KTRM1Sp8Q==} + dev: false + /shikiji@0.6.13: resolution: {integrity: sha512-4T7X39csvhT0p7GDnq9vysWddf2b6BeioiN3Ymhnt3xcy9tXmDcnsEFVxX18Z4YcQgEE/w48dLJ4pPPUcG9KkA==} dependencies: hast-util-to-html: 9.0.0 dev: false + /shikiji@0.9.17: + resolution: {integrity: sha512-0z/1NfkhBkm3ijrfFeHg3G9yDNuHhXdAGbQm7tRxj4WQ5z2y0XDbnagFyKyuV2ebCTS1Mwy1I3n0Fzcc/4xdmw==} + dependencies: + shikiji-core: 0.9.17 + dev: false + /side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: From 4bc3de0cc71d0edaec7940126f4ed85382abaafd Mon Sep 17 00:00:00 2001 From: Degreat Date: Mon, 8 Jan 2024 20:31:31 +0000 Subject: [PATCH 02/12] update astro config schema --- packages/astro/package.json | 2 +- packages/astro/src/core/config/schema.ts | 2 ++ packages/integrations/markdoc/package.json | 2 +- pnpm-lock.yaml | 14 ++++---------- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/astro/package.json b/packages/astro/package.json index 1e9c416afaea..b6e0e03cef28 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -166,7 +166,7 @@ "resolve": "^1.22.4", "semver": "^7.5.4", "server-destroy": "^1.0.1", - "shikiji": "^0.6.13", + "shikiji": "^0.9.17", "string-width": "^7.0.0", "strip-ansi": "^7.1.0", "tsconfck": "^3.0.0", diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index 5d30d1b5305c..3bff17121d30 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -20,6 +20,7 @@ import 'mdast-util-to-hast'; type ShikiLangs = NonNullable; type ShikiTheme = NonNullable; +type ShikiTransformers = ShikiConfig['transformers']; const ASTRO_CONFIG_DEFAULTS = { root: '.', @@ -274,6 +275,7 @@ export const AstroConfigSchema = z.object({ ) .default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.experimentalThemes!), wrap: z.boolean().or(z.null()).default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.wrap!), + transformers: z.custom(), }) .default({}), remarkPlugins: z diff --git a/packages/integrations/markdoc/package.json b/packages/integrations/markdoc/package.json index d3edca0afc0b..9abf866b9b15 100644 --- a/packages/integrations/markdoc/package.json +++ b/packages/integrations/markdoc/package.json @@ -71,7 +71,7 @@ "gray-matter": "^4.0.3", "htmlparser2": "^9.0.0", "kleur": "^4.1.5", - "shikiji": "^0.6.13", + "shikiji": "^0.9.17", "zod": "^3.22.4" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1ed35a526d46..60b9222954c9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -645,8 +645,8 @@ importers: specifier: ^1.0.1 version: 1.0.1 shikiji: - specifier: ^0.6.13 - version: 0.6.13 + specifier: ^0.9.17 + version: 0.9.17 string-width: specifier: ^7.0.0 version: 7.0.0 @@ -3839,8 +3839,8 @@ importers: specifier: ^4.1.5 version: 4.1.5 shikiji: - specifier: ^0.6.13 - version: 0.6.13 + specifier: ^0.9.17 + version: 0.9.17 zod: specifier: ^3.22.4 version: 3.22.4 @@ -14485,12 +14485,6 @@ packages: resolution: {integrity: sha512-r1FWTXk6SO2aYqfWgcsJ11MuVQ1ymPSdXzJjK7q8EXuyqu8yc2N5qrQy5+BL6gTVOaF4yLjbxFjF+KTRM1Sp8Q==} dev: false - /shikiji@0.6.13: - resolution: {integrity: sha512-4T7X39csvhT0p7GDnq9vysWddf2b6BeioiN3Ymhnt3xcy9tXmDcnsEFVxX18Z4YcQgEE/w48dLJ4pPPUcG9KkA==} - dependencies: - hast-util-to-html: 9.0.0 - dev: false - /shikiji@0.9.17: resolution: {integrity: sha512-0z/1NfkhBkm3ijrfFeHg3G9yDNuHhXdAGbQm7tRxj4WQ5z2y0XDbnagFyKyuV2ebCTS1Mwy1I3n0Fzcc/4xdmw==} dependencies: From 266180701304963aa93742091cb52972c15198f5 Mon Sep 17 00:00:00 2001 From: Degreat Date: Mon, 8 Jan 2024 20:40:03 +0000 Subject: [PATCH 03/12] include shikiji-core --- packages/astro/package.json | 1 + packages/astro/src/core/config/schema.ts | 1 + pnpm-lock.yaml | 8 +++++++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/astro/package.json b/packages/astro/package.json index b6e0e03cef28..36cd435107f9 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -224,6 +224,7 @@ "remark-code-titles": "^0.1.2", "rollup": "^4.5.0", "sass": "^1.69.5", + "shikiji-core": "^0.9.17", "srcset-parse": "^1.1.0", "unified": "^11.0.4" }, diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index 3bff17121d30..50ae63088e4e 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -17,6 +17,7 @@ import { appendForwardSlash, prependForwardSlash, removeTrailingForwardSlash } f // This import is required to appease TypeScript! // See https://github.com/withastro/astro/pull/8762 import 'mdast-util-to-hast'; +import 'shikiji-core/types'; type ShikiLangs = NonNullable; type ShikiTheme = NonNullable; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 60b9222954c9..d29710ef52c3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -808,6 +808,9 @@ importers: sass: specifier: ^1.69.5 version: 1.69.6 + shikiji-core: + specifier: ^0.9.17 + version: 0.9.17 srcset-parse: specifier: ^1.1.0 version: 1.1.0 @@ -9001,9 +9004,11 @@ packages: /color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + requiresBuild: true /color-string@1.9.1: resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==} + requiresBuild: true dependencies: color-name: 1.1.4 simple-swizzle: 0.2.2 @@ -11023,6 +11028,7 @@ packages: /is-arrayish@0.3.2: resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==} + requiresBuild: true dev: false /is-bigint@1.0.4: @@ -14483,7 +14489,6 @@ packages: /shikiji-core@0.9.17: resolution: {integrity: sha512-r1FWTXk6SO2aYqfWgcsJ11MuVQ1ymPSdXzJjK7q8EXuyqu8yc2N5qrQy5+BL6gTVOaF4yLjbxFjF+KTRM1Sp8Q==} - dev: false /shikiji@0.9.17: resolution: {integrity: sha512-0z/1NfkhBkm3ijrfFeHg3G9yDNuHhXdAGbQm7tRxj4WQ5z2y0XDbnagFyKyuV2ebCTS1Mwy1I3n0Fzcc/4xdmw==} @@ -14528,6 +14533,7 @@ packages: /simple-swizzle@0.2.2: resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==} + requiresBuild: true dependencies: is-arrayish: 0.3.2 dev: false From e92fee30b577fa389aa27cdf85572bfad1458e34 Mon Sep 17 00:00:00 2001 From: Degreat Date: Tue, 9 Jan 2024 10:34:39 +0000 Subject: [PATCH 04/12] Use default import --- packages/astro/src/core/config/schema.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index 50ae63088e4e..c9336cae7d3e 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -17,7 +17,7 @@ import { appendForwardSlash, prependForwardSlash, removeTrailingForwardSlash } f // This import is required to appease TypeScript! // See https://github.com/withastro/astro/pull/8762 import 'mdast-util-to-hast'; -import 'shikiji-core/types'; +import 'shikiji-core'; type ShikiLangs = NonNullable; type ShikiTheme = NonNullable; From 98a501b7791c1a0e17767270cbf67e0ae0e83a56 Mon Sep 17 00:00:00 2001 From: Degreat Date: Tue, 9 Jan 2024 13:20:20 +0000 Subject: [PATCH 05/12] address css-variables theme --- packages/markdown/remark/src/shiki.ts | 21 +++++++++------------ packages/markdown/remark/src/types.ts | 6 ++++-- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts index 5bb4f05273eb..fa643d87c640 100644 --- a/packages/markdown/remark/src/shiki.ts +++ b/packages/markdown/remark/src/shiki.ts @@ -1,4 +1,4 @@ -import { bundledLanguages, getHighlighter } from 'shikiji'; +import { bundledLanguages, createCssVariablesTheme, getHighlighter } from 'shikiji'; import { visit } from 'unist-util-visit'; import type { ShikiConfig } from './types.js'; @@ -7,23 +7,18 @@ export interface ShikiHighlighter { } const ASTRO_COLOR_REPLACEMENTS: Record = { - '#000001': 'var(--astro-code-color-text)', - '#000002': 'var(--astro-code-color-background)', - '#000004': 'var(--astro-code-token-constant)', - '#000005': 'var(--astro-code-token-string)', - '#000006': 'var(--astro-code-token-comment)', - '#000007': 'var(--astro-code-token-keyword)', - '#000008': 'var(--astro-code-token-parameter)', - '#000009': 'var(--astro-code-token-function)', - '#000010': 'var(--astro-code-token-string-expression)', - '#000011': 'var(--astro-code-token-punctuation)', - '#000012': 'var(--astro-code-token-link)', + '--astro-code-foreground': '--astro-code-color-text', + '--astro-code-background': '--astro-code-color-background', }; const COLOR_REPLACEMENT_REGEX = new RegExp( `(${Object.keys(ASTRO_COLOR_REPLACEMENTS).join('|')})`, 'g' ); +const cssVariablesTheme = createCssVariablesTheme({ + variablePrefix: '--astro-code-', +}); + export async function createShikiHighlighter({ langs = [], theme = 'github-dark', @@ -33,6 +28,8 @@ export async function createShikiHighlighter({ }: ShikiConfig = {}): Promise { const themes = experimentalThemes; + theme = theme === 'css-variables' ? cssVariablesTheme : theme; + const highlighter = await getHighlighter({ langs: langs.length ? langs : Object.keys(bundledLanguages), themes: Object.values(themes).length ? Object.values(themes) : [theme], diff --git a/packages/markdown/remark/src/types.ts b/packages/markdown/remark/src/types.ts index 6ab7e2128b86..69e6d52009f7 100644 --- a/packages/markdown/remark/src/types.ts +++ b/packages/markdown/remark/src/types.ts @@ -33,10 +33,12 @@ export type RehypePlugins = (string | [string, any] | RehypePlugin | [RehypePlug export type RemarkRehype = RemarkRehypeOptions; +export type ThemePresets = BuiltinTheme | 'css-variables'; + export interface ShikiConfig { langs?: LanguageRegistration[]; - theme?: BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw; - experimentalThemes?: Record; + theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw; + experimentalThemes?: Record; wrap?: boolean | null; transformers?: ShikijiTransformer[]; } From 894ba66e51477c22b084f46f30723f32a404f6af Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 10 Jan 2024 20:08:07 +0800 Subject: [PATCH 06/12] Remove shikiji markdoc --- .changeset/polite-dogs-join.md | 5 +++++ packages/integrations/markdoc/package.json | 1 - pnpm-lock.yaml | 3 --- 3 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 .changeset/polite-dogs-join.md diff --git a/.changeset/polite-dogs-join.md b/.changeset/polite-dogs-join.md new file mode 100644 index 000000000000..3bb0128d620f --- /dev/null +++ b/.changeset/polite-dogs-join.md @@ -0,0 +1,5 @@ +--- +"@astrojs/markdoc": patch +--- + +Removes unnecessary `shikiji` dependency diff --git a/packages/integrations/markdoc/package.json b/packages/integrations/markdoc/package.json index 9abf866b9b15..0c6a997f03d0 100644 --- a/packages/integrations/markdoc/package.json +++ b/packages/integrations/markdoc/package.json @@ -71,7 +71,6 @@ "gray-matter": "^4.0.3", "htmlparser2": "^9.0.0", "kleur": "^4.1.5", - "shikiji": "^0.9.17", "zod": "^3.22.4" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d29710ef52c3..3feeb3f77b09 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3841,9 +3841,6 @@ importers: kleur: specifier: ^4.1.5 version: 4.1.5 - shikiji: - specifier: ^0.9.17 - version: 0.9.17 zod: specifier: ^3.22.4 version: 3.22.4 From a2b3321f78c3693deae0f600a0d46d0148d6e9e4 Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 10 Jan 2024 20:18:43 +0800 Subject: [PATCH 07/12] Improve schema transformers handling --- packages/astro/src/core/config/schema.ts | 7 +++++-- packages/markdown/remark/src/index.ts | 1 + 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts index c9336cae7d3e..b1d3ddfa8f0c 100644 --- a/packages/astro/src/core/config/schema.ts +++ b/packages/astro/src/core/config/schema.ts @@ -21,7 +21,7 @@ import 'shikiji-core'; type ShikiLangs = NonNullable; type ShikiTheme = NonNullable; -type ShikiTransformers = ShikiConfig['transformers']; +type ShikiTransformers = NonNullable; const ASTRO_CONFIG_DEFAULTS = { root: '.', @@ -276,7 +276,10 @@ export const AstroConfigSchema = z.object({ ) .default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.experimentalThemes!), wrap: z.boolean().or(z.null()).default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.wrap!), - transformers: z.custom(), + transformers: z + .custom() + .array() + .default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.transformers!), }) .default({}), remarkPlugins: z diff --git a/packages/markdown/remark/src/index.ts b/packages/markdown/remark/src/index.ts index 14301584793c..7881614e5dbd 100644 --- a/packages/markdown/remark/src/index.ts +++ b/packages/markdown/remark/src/index.ts @@ -36,6 +36,7 @@ export const markdownConfigDefaults: Required = { theme: 'github-dark', experimentalThemes: {}, wrap: false, + transformers: [], }, remarkPlugins: [], rehypePlugins: [], From 063bf6f39dd124286289d2c52e40304cb6bace73 Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 10 Jan 2024 20:38:50 +0800 Subject: [PATCH 08/12] Fix tests --- packages/astro/src/core/errors/dev/vite.ts | 19 ++++++++----------- packages/astro/src/core/errors/overlay.ts | 4 ++-- packages/markdown/remark/src/shiki.ts | 10 ++++++---- 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts index 1bd448145123..bfdd043a7567 100644 --- a/packages/astro/src/core/errors/dev/vite.ts +++ b/packages/astro/src/core/errors/dev/vite.ts @@ -1,7 +1,6 @@ -import { replaceCssVariables } from '@astrojs/markdown-remark'; import * as fs from 'node:fs'; import { fileURLToPath } from 'node:url'; -import { codeToHtml } from 'shikiji'; +import { codeToHtml, createCssVariablesTheme } from 'shikiji'; import type { ErrorPayload } from 'vite'; import type { ModuleLoader } from '../../module-loader/index.js'; import { FailedToLoadModuleSSR, InvalidGlob, MdxIntegrationMissingError } from '../errors-data.js'; @@ -124,7 +123,11 @@ export interface AstroErrorPayload { // Map these to `.js` during error highlighting. const ALTERNATIVE_JS_EXTS = ['cjs', 'mjs']; const ALTERNATIVE_MD_EXTS = ['mdoc']; -const INLINE_STYLE_SELECTOR_GLOBAL = /style="(.*?)"/g; + +let _cssVariablesTheme: ReturnType; +const cssVariablesTheme = () => + _cssVariablesTheme ?? + (_cssVariablesTheme = createCssVariablesTheme({ variablePrefix: '--astro-code-' })); /** * Generate a payload for Vite's error overlay @@ -147,21 +150,15 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise - replaceCssVariables(m) - ); - } - return { type: 'error', err: { diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts index 1062680bd9da..282c79cd6a21 100644 --- a/packages/astro/src/core/errors/overlay.ts +++ b/packages/astro/src/core/errors/overlay.ts @@ -68,7 +68,7 @@ const style = /* css */ ` --toggle-border-color: #C3CADB; /* Syntax Highlighting */ - --astro-code-color-text: #000000; + --astro-code-foreground: #000000; --astro-code-token-constant: #4ca48f; --astro-code-token-string: #9f722a; --astro-code-token-comment: #8490b5; @@ -121,7 +121,7 @@ const style = /* css */ ` --toggle-border-color: #3D4663; /* Syntax Highlighting */ - --astro-code-color-text: #ffffff; + --astro-code-foreground: #ffffff; --astro-code-token-constant: #90f4e3; --astro-code-token-string: #f4cf90; --astro-code-token-comment: #8490b5; diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts index fa643d87c640..04b1bbcf6a72 100644 --- a/packages/markdown/remark/src/shiki.ts +++ b/packages/markdown/remark/src/shiki.ts @@ -6,6 +6,7 @@ export interface ShikiHighlighter { highlight(code: string, lang?: string, options?: { inline?: boolean }): string; } +// TODO: Remove this special replacement in Astro 5 const ASTRO_COLOR_REPLACEMENTS: Record = { '--astro-code-foreground': '--astro-code-color-text', '--astro-code-background': '--astro-code-color-background', @@ -15,9 +16,10 @@ const COLOR_REPLACEMENT_REGEX = new RegExp( 'g' ); -const cssVariablesTheme = createCssVariablesTheme({ - variablePrefix: '--astro-code-', -}); +let _cssVariablesTheme: ReturnType; +const cssVariablesTheme = () => + _cssVariablesTheme ?? + (_cssVariablesTheme = createCssVariablesTheme({ variablePrefix: '--astro-code-' })); export async function createShikiHighlighter({ langs = [], @@ -28,7 +30,7 @@ export async function createShikiHighlighter({ }: ShikiConfig = {}): Promise { const themes = experimentalThemes; - theme = theme === 'css-variables' ? cssVariablesTheme : theme; + theme = theme === 'css-variables' ? cssVariablesTheme() : theme; const highlighter = await getHighlighter({ langs: langs.length ? langs : Object.keys(bundledLanguages), From 120be64b4a3ffd7a1afca40b3663efb454ff4bce Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 10 Jan 2024 20:50:38 +0800 Subject: [PATCH 09/12] Update changeset --- .changeset/six-scissors-worry.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/six-scissors-worry.md b/.changeset/six-scissors-worry.md index 76bd0fbd1a8d..575bdd92b10b 100644 --- a/.changeset/six-scissors-worry.md +++ b/.changeset/six-scissors-worry.md @@ -1,5 +1,6 @@ --- "@astrojs/markdown-remark": minor +"astro": minor --- -Bump shikiji, use transformers API +Bumps shikiji and exposes a new `markdown.shikiConfig.transformers` config option. You can use this option to transform the shikiji hast (AST format of the generated HTML) to extend the features of the final HTML. See [shikiji's documentation](https://shikiji.netlify.app/guide/transformers) for more details. From 3629f56f17a4ad911943667ffe55938903bc2668 Mon Sep 17 00:00:00 2001 From: Degreat Date: Thu, 11 Jan 2024 06:18:09 +0000 Subject: [PATCH 10/12] bump shikiji version --- packages/astro/package.json | 4 ++-- packages/markdown/remark/package.json | 2 +- pnpm-lock.yaml | 22 +++++++++++----------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/astro/package.json b/packages/astro/package.json index 36cd435107f9..8dcddd4fbca7 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -166,7 +166,7 @@ "resolve": "^1.22.4", "semver": "^7.5.4", "server-destroy": "^1.0.1", - "shikiji": "^0.9.17", + "shikiji": "^0.9.18", "string-width": "^7.0.0", "strip-ansi": "^7.1.0", "tsconfck": "^3.0.0", @@ -224,7 +224,7 @@ "remark-code-titles": "^0.1.2", "rollup": "^4.5.0", "sass": "^1.69.5", - "shikiji-core": "^0.9.17", + "shikiji-core": "^0.9.18", "srcset-parse": "^1.1.0", "unified": "^11.0.4" }, diff --git a/packages/markdown/remark/package.json b/packages/markdown/remark/package.json index e59155d7d78f..8594fcb2fd17 100644 --- a/packages/markdown/remark/package.json +++ b/packages/markdown/remark/package.json @@ -38,7 +38,7 @@ "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "remark-smartypants": "^2.0.0", - "shikiji": "^0.9.17", + "shikiji": "^0.9.18", "unified": "^11.0.4", "unist-util-visit": "^5.0.0", "vfile": "^6.0.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3feeb3f77b09..b69e476cfa29 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -645,8 +645,8 @@ importers: specifier: ^1.0.1 version: 1.0.1 shikiji: - specifier: ^0.9.17 - version: 0.9.17 + specifier: ^0.9.18 + version: 0.9.18 string-width: specifier: ^7.0.0 version: 7.0.0 @@ -809,8 +809,8 @@ importers: specifier: ^1.69.5 version: 1.69.6 shikiji-core: - specifier: ^0.9.17 - version: 0.9.17 + specifier: ^0.9.18 + version: 0.9.18 srcset-parse: specifier: ^1.1.0 version: 1.1.0 @@ -5002,8 +5002,8 @@ importers: specifier: ^2.0.0 version: 2.0.0 shikiji: - specifier: ^0.9.17 - version: 0.9.17 + specifier: ^0.9.18 + version: 0.9.18 unified: specifier: ^11.0.4 version: 11.0.4 @@ -14484,13 +14484,13 @@ packages: vscode-textmate: 5.2.0 dev: true - /shikiji-core@0.9.17: - resolution: {integrity: sha512-r1FWTXk6SO2aYqfWgcsJ11MuVQ1ymPSdXzJjK7q8EXuyqu8yc2N5qrQy5+BL6gTVOaF4yLjbxFjF+KTRM1Sp8Q==} + /shikiji-core@0.9.18: + resolution: {integrity: sha512-PKTXptbrp/WEDjNHV8OFG9KkfhmR0pSd161kzlDDlgQ0HXAnqJYNDSjqsy1CYZMx5bSvLMy42yJj9oFTqmkNTQ==} - /shikiji@0.9.17: - resolution: {integrity: sha512-0z/1NfkhBkm3ijrfFeHg3G9yDNuHhXdAGbQm7tRxj4WQ5z2y0XDbnagFyKyuV2ebCTS1Mwy1I3n0Fzcc/4xdmw==} + /shikiji@0.9.18: + resolution: {integrity: sha512-/tFMIdV7UQklzN13VjF0/XFzmii6C606Jc878hNezvB8ZR8FG8FW9j0I4J9EJre0owlnPntgLVPpHqy27Gs+DQ==} dependencies: - shikiji-core: 0.9.17 + shikiji-core: 0.9.18 dev: false /side-channel@1.0.4: From 129227a353a16678eebae2c5002e8a9d08a750f6 Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Fri, 12 Jan 2024 14:54:14 +0000 Subject: [PATCH 11/12] Update .changeset/six-scissors-worry.md Co-authored-by: Sarah Rainsberger --- .changeset/six-scissors-worry.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/six-scissors-worry.md b/.changeset/six-scissors-worry.md index 575bdd92b10b..1a9db27364e4 100644 --- a/.changeset/six-scissors-worry.md +++ b/.changeset/six-scissors-worry.md @@ -3,4 +3,4 @@ "astro": minor --- -Bumps shikiji and exposes a new `markdown.shikiConfig.transformers` config option. You can use this option to transform the shikiji hast (AST format of the generated HTML) to extend the features of the final HTML. See [shikiji's documentation](https://shikiji.netlify.app/guide/transformers) for more details. +Bumps Shikiji and exposes a new `markdown.shikiConfig.transformers` config option. You can use this option to transform the Shikiji hast (AST format of the generated HTML) to extend the features of the final HTML. See [shikiji's documentation](https://shikiji.netlify.app/guide/transformers) for more details. From 7d24b321dc7c60ab07f7a1d69c14661237b01c3d Mon Sep 17 00:00:00 2001 From: Degreat Date: Mon, 15 Jan 2024 22:31:35 +0000 Subject: [PATCH 12/12] Update wording Co-authored-by: Sarah Rainsberger --- .changeset/six-scissors-worry.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.changeset/six-scissors-worry.md b/.changeset/six-scissors-worry.md index 1a9db27364e4..ebba0da66d63 100644 --- a/.changeset/six-scissors-worry.md +++ b/.changeset/six-scissors-worry.md @@ -3,4 +3,6 @@ "astro": minor --- -Bumps Shikiji and exposes a new `markdown.shikiConfig.transformers` config option. You can use this option to transform the Shikiji hast (AST format of the generated HTML) to extend the features of the final HTML. See [shikiji's documentation](https://shikiji.netlify.app/guide/transformers) for more details. +Adds a new `markdown.shikiConfig.transformers` config option. You can use this option to transform the Shikiji hast (AST format of the generated HTML) to customize the final HTML. Also updates Shikiji to the latest stable version. + +See [Shikiji's documentation](https://shikiji.netlify.app/guide/transformers) for more details about creating your own custom transformers, and [a list of common transformers](https://shikiji.netlify.app/packages/transformers) you can add directly to your project.