From c081adf998d30419fed97d8fccc11340cdc512e0 Mon Sep 17 00:00:00 2001 From: StandardGage <50509562+StandardGage@users.noreply.github.com> Date: Fri, 8 Mar 2024 08:02:53 -0500 Subject: [PATCH] Allow Code Component to have custom props and extra class styles (#9960) * Create simple react element if element has no children * Fix for when element has text * add changeset * Add additionalProps to Code component and ShikiHighlighter.highlight() * Add changeset * Create simple react element if element has no children * Fix for when element has text * add changeset * Add additionalProps to Code component and ShikiHighlighter.highlight() * Add changeset * reverted accidental changes * remove unnecessary parts * Add HTMLAttributes type to additionalProps * Update .changeset/calm-bags-deliver.md Co-authored-by: Florian Lefebvre * extend HTMLAtts instead * add suggestions * feat: address reviews * chore: remove empty line * feat: move attributes to options --------- Co-authored-by: Florian Lefebvre Co-authored-by: Emanuele Stoppa --- .changeset/calm-bags-deliver.md | 6 ++++++ packages/astro/components/Code.astro | 5 ++++- packages/markdown/remark/src/shiki.ts | 17 ++++++++++++++--- 3 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 .changeset/calm-bags-deliver.md diff --git a/.changeset/calm-bags-deliver.md b/.changeset/calm-bags-deliver.md new file mode 100644 index 000000000000..8cb125d60ee7 --- /dev/null +++ b/.changeset/calm-bags-deliver.md @@ -0,0 +1,6 @@ +--- +"@astrojs/markdown-remark": minor +"astro": minor +--- + +Allows passing any props to the `` component diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro index a7f6f725aeec..98047b5b8ea5 100644 --- a/packages/astro/components/Code.astro +++ b/packages/astro/components/Code.astro @@ -9,8 +9,9 @@ import type { } from 'shiki'; import { bundledLanguages } from 'shiki/langs'; import { getCachedHighlighter } from '../dist/core/shiki.js'; +import type { HTMLAttributes } from '../types'; -interface Props { +interface Props extends Omit, 'lang'> { /** The code to highlight. Required. */ code: string; /** @@ -58,6 +59,7 @@ const { themes = {}, wrap = false, inline = false, + ...rest } = Astro.props; // shiki 1.0 compat @@ -87,6 +89,7 @@ const highlighter = await getCachedHighlighter({ const html = highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, { inline, + attributes: rest, }); --- diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts index c0fc798e9830..2e7bce24d0d7 100644 --- a/packages/markdown/remark/src/shiki.ts +++ b/packages/markdown/remark/src/shiki.ts @@ -4,7 +4,11 @@ import { visit } from 'unist-util-visit'; import type { ShikiConfig } from './types.js'; export interface ShikiHighlighter { - highlight(code: string, lang?: string, options?: { inline?: boolean }): string; + highlight( + code: string, + lang?: string, + options?: { inline?: boolean; attributes?: Record } + ): string; } // TODO: Remove this special replacement in Astro 5 @@ -60,8 +64,15 @@ export async function createShikiHighlighter({ node.tagName = 'code'; } - const classValue = normalizePropAsString(node.properties.class) ?? ''; - const styleValue = normalizePropAsString(node.properties.style) ?? ''; + const { class: attributesClass, style: attributesStyle, ...rest } = options?.attributes ?? {}; + Object.assign(node.properties, rest); + + const classValue = + (normalizePropAsString(node.properties.class) ?? '') + + (attributesClass ? ` ${attributesClass}` : ''); + const styleValue = + (normalizePropAsString(node.properties.style) ?? '') + + (attributesStyle ? `; ${attributesStyle}` : ''); // Replace "shiki" class naming with "astro-code" node.properties.class = classValue.replace(/shiki/g, 'astro-code');