diff --git a/.changeset/nervous-dodos-compete.md b/.changeset/nervous-dodos-compete.md new file mode 100644 index 000000000000..cd734056242d --- /dev/null +++ b/.changeset/nervous-dodos-compete.md @@ -0,0 +1,5 @@ +--- +"@astrojs/markdown-remark": patch +--- + +Fixes a case where transformers wouldn't work on the `class` property diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts index 04b1bbcf6a72..492d5a821eb3 100644 --- a/packages/markdown/remark/src/shiki.ts +++ b/packages/markdown/remark/src/shiki.ts @@ -1,5 +1,6 @@ import { bundledLanguages, createCssVariablesTheme, getHighlighter } from 'shikiji'; import { visit } from 'unist-util-visit'; +import type { Properties } from 'hast'; import type { ShikiConfig } from './types.js'; export interface ShikiHighlighter { @@ -61,9 +62,8 @@ export async function createShikiHighlighter({ 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) ?? ''; + const classValue = normalizePropAsString(node.properties.class) ?? ''; + const styleValue = normalizePropAsString(node.properties.style) ?? ''; // Replace "shiki" class naming with "astro-code" node.properties.class = classValue.replace(/shiki/g, 'astro-code'); @@ -129,6 +129,10 @@ export async function createShikiHighlighter({ }; } +function normalizePropAsString(value: Properties[string]): string | null { + return Array.isArray(value) ? value.join(' ') : (value as string | null); +} + /** * shiki -> shikiji compat as we need to manually replace it * @internal Exported for error overlay use only