🎉 initiate project *astro_rewrite*

node_modules/astro/components/Code.astro

@@ -0,0 +1,90 @@
+---
+import type * as shiki from 'shiki';
+import { renderToHtml } from 'shiki';
+import { getHighlighter } from './Shiki.js';
+
+interface Props {
+	/** The code to highlight. Required. */
+	code: string;
+	/**
+	 * The language of your code.
+	 * Supports all languages listed here: https://github.com/shikijs/shiki/blob/main/docs/languages.md#all-languages
+	 * Instructions for loading a custom language: https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki
+	 *
+	 * @default "plaintext"
+	 */
+	lang?: shiki.Lang | shiki.ILanguageRegistration;
+	/**
+	 * The styling theme.
+	 * Supports all themes listed here: https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes
+	 * Instructions for loading a custom theme: https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme
+	 *
+	 * @default "github-dark"
+	 */
+	theme?: shiki.IThemeRegistration;
+	/**
+	 * Enable word wrapping.
+	 *  - true: enabled.
+	 *  - false: disabled.
+	 *  - null: All overflow styling removed. Code will overflow the element by default.
+	 *
+	 * @default false
+	 */
+	wrap?: boolean | null;
+	/**
+	 * Generate inline code element only, without the pre element wrapper.
+	 *
+	 * @default false
+	 */
+	inline?: boolean;
+}
+
+const {
+	code,
+	lang = 'plaintext',
+	theme = 'github-dark',
+	wrap = false,
+	inline = false,
+} = Astro.props;
+
+// 1. Get the shiki syntax highlighter
+const highlighter = await getHighlighter({
+	theme,
+	// Load custom lang if passed an object, otherwise load the default
+	langs: typeof lang !== 'string' ? [lang] : undefined,
+});
+
+// 2. Turn code into shiki theme tokens
+const tokens = highlighter.codeToThemedTokens(code, typeof lang === 'string' ? lang : lang.id);
+
+// 3. Get shiki theme object
+const _theme = highlighter.getTheme();
+
+// 4. Render the theme tokens as html
+const html = renderToHtml(tokens, {
+	themeName: _theme.name,
+	fg: _theme.fg,
+	bg: _theme.bg,
+	elements: {
+		pre({ className, style, children }) {
+			// Swap to `code` tag if inline
+			const tag = inline ? 'code' : 'pre';
+			// Replace "shiki" class naming with "astro-code"
+			className = className.replace(/shiki/g, 'astro-code');
+			// Handle code wrapping
+			// if wrap=null, do nothing.
+			if (wrap === false) {
+				style += '; overflow-x: auto;"';
+			} else if (wrap === true) {
+				style += '; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"';
+			}
+			return `<${tag} class="${className}" style="${style}" tabindex="0">${children}</${tag}>`;
+		},
+		code({ children }) {
+			return inline ? children : `<code>${children}</code>`;
+		},
+	},
+});
+---
+
+<Fragment set:html={html} />