From bccd88f0ebe1fbf383c0cee4b27a4c24c72dea72 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Wed, 20 Jul 2022 16:45:05 -0400 Subject: [PATCH] Move the Markdown component to its own package (#3986) * Move the Markdown component to its own package * Update the examples * Updated lockfile * Use is:raw * Add a main field * Update the formatting of the readme * Rename to @astrojs/markdown-component --- .changeset/wild-socks-drive.md | 22 ++ .../src/layouts/main.astro | 1 - .../src/pages/about.astro | 20 - examples/with-markdown-shiki/README.md | 3 +- examples/with-markdown/.gitignore | 19 - examples/with-markdown/.npmrc | 2 - examples/with-markdown/.stackblitzrc | 6 - examples/with-markdown/README.md | 12 - examples/with-markdown/astro.config.mjs | 11 - examples/with-markdown/package.json | 26 -- examples/with-markdown/public/favicon.ico | Bin 4286 -> 0 bytes examples/with-markdown/sandbox.config.json | 11 - .../src/components/PreactCounter.tsx | 20 - .../src/components/ReactCounter.jsx | 19 - .../src/components/SvelteCounter.svelte | 22 -- .../src/components/VueCounter.vue | 27 -- examples/with-markdown/src/layouts/main.astro | 18 - .../with-markdown/src/pages/external.astro | 19 - examples/with-markdown/src/pages/index.astro | 65 ---- examples/with-markdown/src/pages/other.md | 18 - examples/with-markdown/src/styles/global.css | 70 ---- examples/with-markdown/tsconfig.json | 15 - packages/astro/components/index.ts | 1 - packages/astro/package.json | 2 +- .../astro/test/astro-markdown-plugins.test.js | 11 - .../astro/test/astro-markdown-shiki.test.js | 71 ---- packages/astro/test/astro-markdown.test.js | 150 -------- .../astro-markdown/src/pages/content.astro | 6 - .../src/pages/no-elements.astro | 5 - .../ssr-markdown/src/pages/page.astro | 14 - packages/astro/test/ssr-markdown.test.js | 6 - .../component}/Markdown.astro | 0 packages/markdown/component/package.json | 31 ++ packages/markdown/component/readme.md | 17 + .../test/astro-markdown-plugins.test.js | 37 ++ .../test/astro-markdown-shiki.test.js | 147 ++++++++ .../component/test/astro-markdown.test.js | 350 ++++++++++++++++++ .../astro-markdown-plugins/add-classes.mjs | 18 + .../astro-markdown-plugins/astro.config.mjs | 7 + .../astro-markdown-plugins/package.json | 12 + .../src/layouts/content.astro | 10 + .../src/pages/astro.astro | 2 +- .../langs/astro.config.mjs | 19 + .../astro-markdown-shiki/langs/package.json | 9 + .../langs/src/layouts/content.astro | 10 + .../langs/src/pages/astro.astro | 2 +- .../normal/astro.config.mjs | 5 + .../astro-markdown-shiki/normal/package.json | 9 + .../normal/src/layouts/content.astro | 10 + .../normal}/src/pages/astro.astro | 2 +- .../astro-markdown-shiki/package.json | 9 + .../themes-custom/astro.config.mjs | 10 + .../themes-custom/package.json | 9 + .../themes-custom/src/layouts/content.astro | 10 + .../themes-custom}/src/pages/astro.astro | 2 +- .../themes-integrated/astro.config.mjs | 6 + .../themes-integrated/package.json | 9 + .../src/layouts/content.astro | 10 + .../themes-integrated}/src/pages/astro.astro | 2 +- .../themes-integrated/src/pages/index.md | 24 ++ .../wrap-false/astro.config.mjs | 6 + .../wrap-false/package.json | 9 + .../wrap-false/src/layouts/content.astro | 10 + .../wrap-false/src/pages/astro.astro | 2 +- .../wrap-null/astro.config.mjs | 6 + .../wrap-null/package.json | 9 + .../wrap-null/src/layouts/content.astro | 10 + .../wrap-null}/src/pages/astro.astro | 2 +- .../wrap-true/astro.config.mjs | 6 + .../wrap-true/package.json | 9 + .../wrap-true/src/layouts/content.astro | 10 + .../wrap-true}/src/pages/astro.astro | 2 +- .../fixtures/astro-markdown/astro.config.mjs | 9 + .../test/fixtures/astro-markdown/package.json | 11 + .../astro-markdown/src/components/Counter.jsx | 7 + .../astro-markdown/src/components/Example.jsx | 5 + .../astro-markdown/src/components/Hello.jsx | 5 + .../src/components/SlotComponent.astro | 13 + .../src/components/SvelteButton.svelte | 11 + .../src/components/TextBlock.jsx | 20 + .../astro-markdown/src/components/index.js | 5 + .../src/content/code-element.md | 3 + .../astro-markdown/src/imported-md/plain.md | 6 + .../src/imported-md/with-components.md | 17 + .../astro-markdown/src/layouts/content.astro | 10 + .../src/layouts/layout-props.astro | 17 + .../astro-markdown/src/pages/braces.astro | 4 +- .../astro-markdown/src/pages/children.md | 12 + .../astro-markdown/src/pages/close.astro | 2 +- .../src/pages/code-element.astro | 7 + .../astro-markdown/src/pages/code-in-md.md | 16 + .../astro-markdown/src/pages/code.astro | 2 +- .../src/pages/comment-with-js.md | 23 ++ .../astro-markdown/src/pages/comment.md | 2 + .../astro-markdown/src/pages/complex.astro | 2 +- .../astro-markdown/src/pages/content.astro | 6 + .../fixtures/astro-markdown/src/pages/dash.md | 14 + .../astro-markdown/src/pages/deep.astro | 2 +- .../astro-markdown/src/pages/empty-code.md | 20 + .../astro-markdown/src/pages/external.astro | 4 +- .../pages/imported-md/with-components.astro | 9 + .../src/pages/jsx-expressions.md | 13 + .../astro-markdown/src/pages/layout-props.md | 4 + .../astro-markdown/src/pages/namespace.md | 7 + .../src/pages/nested-list.astro | 2 +- .../src/pages/no-elements.astro | 5 + .../astro-markdown/src/pages/post.astro | 2 +- .../src/pages/raw-content.json.js | 10 + .../src/pages/scopedStyles-code.astro | 4 +- .../astro-markdown/src/pages/script.md | 7 + .../astro-markdown/src/pages/slots.md | 38 ++ .../fixtures/astro-markdown/src/pages/slug.md | 7 + .../astro-markdown/src/pages/vite-env-vars.md | 35 ++ .../astro-markdown/src/scripts/test.js | 1 + .../markdown/component/test/test-utils.js | 12 + pnpm-lock.yaml | 139 +++++-- 116 files changed, 1392 insertions(+), 719 deletions(-) create mode 100644 .changeset/wild-socks-drive.md delete mode 100644 examples/with-markdown-plugins/src/pages/about.astro delete mode 100644 examples/with-markdown/.gitignore delete mode 100644 examples/with-markdown/.npmrc delete mode 100644 examples/with-markdown/.stackblitzrc delete mode 100644 examples/with-markdown/README.md delete mode 100644 examples/with-markdown/astro.config.mjs delete mode 100644 examples/with-markdown/package.json delete mode 100644 examples/with-markdown/public/favicon.ico delete mode 100644 examples/with-markdown/sandbox.config.json delete mode 100644 examples/with-markdown/src/components/PreactCounter.tsx delete mode 100644 examples/with-markdown/src/components/ReactCounter.jsx delete mode 100644 examples/with-markdown/src/components/SvelteCounter.svelte delete mode 100644 examples/with-markdown/src/components/VueCounter.vue delete mode 100644 examples/with-markdown/src/layouts/main.astro delete mode 100644 examples/with-markdown/src/pages/external.astro delete mode 100644 examples/with-markdown/src/pages/index.astro delete mode 100644 examples/with-markdown/src/pages/other.md delete mode 100644 examples/with-markdown/src/styles/global.css delete mode 100644 examples/with-markdown/tsconfig.json delete mode 100644 packages/astro/test/fixtures/astro-markdown/src/pages/content.astro delete mode 100644 packages/astro/test/fixtures/astro-markdown/src/pages/no-elements.astro delete mode 100644 packages/astro/test/fixtures/ssr-markdown/src/pages/page.astro rename packages/{astro/components => markdown/component}/Markdown.astro (100%) create mode 100644 packages/markdown/component/package.json create mode 100644 packages/markdown/component/readme.md create mode 100644 packages/markdown/component/test/astro-markdown-plugins.test.js create mode 100644 packages/markdown/component/test/astro-markdown-shiki.test.js create mode 100644 packages/markdown/component/test/astro-markdown.test.js create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-plugins/add-classes.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-plugins/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-plugins/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-plugins/src/layouts/content.astro rename packages/{astro => markdown/component}/test/fixtures/astro-markdown-plugins/src/pages/astro.astro (69%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/src/layouts/content.astro rename packages/{astro => markdown/component}/test/fixtures/astro-markdown-shiki/langs/src/pages/astro.astro (88%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/src/layouts/content.astro rename packages/{astro/test/fixtures/astro-markdown-shiki/wrap-null => markdown/component/test/fixtures/astro-markdown-shiki/normal}/src/pages/astro.astro (78%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/src/layouts/content.astro rename packages/{astro/test/fixtures/astro-markdown-shiki/themes-integrated => markdown/component/test/fixtures/astro-markdown-shiki/themes-custom}/src/pages/astro.astro (75%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/layouts/content.astro rename packages/{astro/test/fixtures/astro-markdown-shiki/themes-custom => markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated}/src/pages/astro.astro (75%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/index.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/src/layouts/content.astro rename packages/{astro => markdown/component}/test/fixtures/astro-markdown-shiki/wrap-false/src/pages/astro.astro (78%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/src/layouts/content.astro rename packages/{astro/test/fixtures/astro-markdown-shiki/wrap-true => markdown/component/test/fixtures/astro-markdown-shiki/wrap-null}/src/pages/astro.astro (78%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/src/layouts/content.astro rename packages/{astro/test/fixtures/astro-markdown-shiki/normal => markdown/component/test/fixtures/astro-markdown-shiki/wrap-true}/src/pages/astro.astro (78%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/astro.config.mjs create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/package.json create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/components/Counter.jsx create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/components/Example.jsx create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/components/Hello.jsx create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/components/SlotComponent.astro create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/components/SvelteButton.svelte create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/components/TextBlock.jsx create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/components/index.js create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/content/code-element.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/imported-md/plain.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/imported-md/with-components.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/layouts/content.astro create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/layouts/layout-props.astro rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/braces.astro (71%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/children.md rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/close.astro (77%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/code-element.astro create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/code-in-md.md rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/code.astro (77%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/comment-with-js.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/comment.md rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/complex.astro (87%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/content.astro create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/dash.md rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/deep.astro (89%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/empty-code.md rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/external.astro (78%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/imported-md/with-components.astro create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/jsx-expressions.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/layout-props.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/namespace.md rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/nested-list.astro (91%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/no-elements.astro rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/post.astro (85%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/raw-content.json.js rename packages/{astro => markdown/component}/test/fixtures/astro-markdown/src/pages/scopedStyles-code.astro (78%) create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/script.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/slots.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/slug.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/pages/vite-env-vars.md create mode 100644 packages/markdown/component/test/fixtures/astro-markdown/src/scripts/test.js create mode 100644 packages/markdown/component/test/test-utils.js diff --git a/.changeset/wild-socks-drive.md b/.changeset/wild-socks-drive.md new file mode 100644 index 000000000000..c69216ca37c4 --- /dev/null +++ b/.changeset/wild-socks-drive.md @@ -0,0 +1,22 @@ +--- +'astro': minor +'@astrojs/markdown-component': minor +--- + +Move the Markdown component to its own package + +This change moves the Markdown component into its own package where it will be maintained separately. All that needs to change from a user's perspective is the import statement: + +```astro +--- +import { Markdown } from 'astro/components'; +--- +``` + +Becomes: + +```astro +--- +import Markdown from '@astrojs/markdown-component'; +--- +``` diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro index 4ab5b7888633..758e5d083f1c 100644 --- a/examples/with-markdown-plugins/src/layouts/main.astro +++ b/examples/with-markdown-plugins/src/layouts/main.astro @@ -27,7 +27,6 @@ const { content } = Astro.props;
diff --git a/examples/with-markdown-plugins/src/pages/about.astro b/examples/with-markdown-plugins/src/pages/about.astro deleted file mode 100644 index e533ceac868d..000000000000 --- a/examples/with-markdown-plugins/src/pages/about.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -import { Markdown } from "astro/components"; -import MainLayout from "../layouts/main.astro"; ---- - - - - # About - - Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. - - Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. - - ## My story - - Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. - - Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. - - diff --git a/examples/with-markdown-shiki/README.md b/examples/with-markdown-shiki/README.md index 5b744b15ddb4..2c39f9334fd5 100644 --- a/examples/with-markdown-shiki/README.md +++ b/examples/with-markdown-shiki/README.md @@ -8,5 +8,4 @@ npm init astro -- --template with-markdown-shiki This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/). -- `src/pages/index.astro` uses Astro's `` component. -- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`. +- `src/pages/index.md` is a treated as a page entrypoint and uses a `layout`. diff --git a/examples/with-markdown/.gitignore b/examples/with-markdown/.gitignore deleted file mode 100644 index 02f6e50b494c..000000000000 --- a/examples/with-markdown/.gitignore +++ /dev/null @@ -1,19 +0,0 @@ -# build output -dist/ - -# dependencies -node_modules/ - -# logs -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* - - -# environment variables -.env -.env.production - -# macOS-specific files -.DS_Store diff --git a/examples/with-markdown/.npmrc b/examples/with-markdown/.npmrc deleted file mode 100644 index ef83021af3ec..000000000000 --- a/examples/with-markdown/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -# Expose Astro dependencies for `pnpm` users -shamefully-hoist=true diff --git a/examples/with-markdown/.stackblitzrc b/examples/with-markdown/.stackblitzrc deleted file mode 100644 index 43798ecff844..000000000000 --- a/examples/with-markdown/.stackblitzrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "startCommand": "npm start", - "env": { - "ENABLE_CJS_IMPORTS": true - } -} \ No newline at end of file diff --git a/examples/with-markdown/README.md b/examples/with-markdown/README.md deleted file mode 100644 index 5acc87f7c508..000000000000 --- a/examples/with-markdown/README.md +++ /dev/null @@ -1,12 +0,0 @@ -# Astro Example: Markdown - -``` -npm init astro -- --template with-markdown -``` - -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdown) - -This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/). - -- `src/pages/index.astro` uses Astro's `` component. -- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`. diff --git a/examples/with-markdown/astro.config.mjs b/examples/with-markdown/astro.config.mjs deleted file mode 100644 index c5dcad0731bc..000000000000 --- a/examples/with-markdown/astro.config.mjs +++ /dev/null @@ -1,11 +0,0 @@ -import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; -import react from '@astrojs/react'; -import svelte from '@astrojs/svelte'; -import vue from '@astrojs/vue'; - -// https://astro.build/config -export default defineConfig({ - // Enable many frameworks to support all different kinds of components. - integrations: [preact(), react(), svelte(), vue()], -}); diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json deleted file mode 100644 index bea3a9ec311f..000000000000 --- a/examples/with-markdown/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "@example/with-markdown", - "version": "0.0.1", - "private": true, - "scripts": { - "dev": "astro dev", - "start": "astro dev", - "build": "astro build", - "preview": "astro preview" - }, - "devDependencies": { - "@astrojs/markdown-remark": "^0.12.0", - "@astrojs/preact": "^0.5.2", - "@astrojs/react": "^0.4.2", - "@astrojs/svelte": "^0.4.1", - "@astrojs/vue": "^0.4.1", - "astro": "^1.0.0-beta.73" - }, - "dependencies": { - "preact": "^10.7.3", - "react": "^18.1.0", - "react-dom": "^18.1.0", - "svelte": "^3.48.0", - "vue": "^3.2.37" - } -} diff --git a/examples/with-markdown/public/favicon.ico b/examples/with-markdown/public/favicon.ico deleted file mode 100644 index 578ad458b8906c08fbed84f42b045fea04db89d1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4286 zcmchZF=!M)6ox0}Fc8GdTHG!cdIY>nA!3n2f|wxIl0rn}Hl#=uf>?-!2r&jMEF^_k zh**lGut*gwBmoNv7AaB&2~nbzULg{WBhPQ{ZVzvF_HL8Cb&hv$_s#qN|IO^o>?+mA zuTW6tU%k~z<&{z+7$G%*nRsTcEO|90xy<-G5&JTt%CgZZCDT4%R?+{Vd^wh>P8_)} z`+dF$HQb9!>1o`Ivn;GInlCw{9T@Rt%q+d^T3Ke%cxkk;$v`{s^zCB9nHAv6w$Vbn z8fb<+eQTNM`;rf9#obfGnV#3+OQEUv4gU;{oA@zol%keY9-e>4W>p7AHmH~&!P7f7!Uj` zwgFeQ=<3G4O;mwWO`L!=R-=y3_~-DPjH3W^3f&jjCfC$o#|oGaahSL`_=f?$&Aa+W z2h8oZ+@?NUcjGW|aWJfbM*ZzxzmCPY`b~RobNrrj=rd`=)8-j`iSW64@0_b6?;GYk zNB+-fzOxlqZ?`y{OA$WigtZXa8)#p#=DPYxH=VeC_Q5q9Cv`mvW6*zU&Gnp1;oPM6 zaK_B3j(l^FyJgYeE9RrmDyhE7W2}}nW%ic#0v@i1E!yTey$W)U>fyd+!@2hWQ!Wa==NAtKoj`f3tp4y$Al`e;?)76?AjdaRR>|?&r)~3Git> zb1)a?uiv|R0_{m#A9c;7)eZ1y6l@yQ#oE*>(Z2fG-&&smPa2QTW>m*^K65^~`coP$ z8y5Y?iS<4Gz{Zg##$1mk)u-0;X|!xu^FCr;ce~X<&UWE&pBgqfYmEJTzpK9I%vr%b z3Ksd6qlPJLI%HFfeXK_^|BXiKZC>Ocu(Kk6hD3G-8usLzVG^q00Qh gz)s7ge@$ApxGu7=(6IGIk+uG&HTev01^#CH3$(Wk5&!@I diff --git a/examples/with-markdown/sandbox.config.json b/examples/with-markdown/sandbox.config.json deleted file mode 100644 index 9178af77d7de..000000000000 --- a/examples/with-markdown/sandbox.config.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "infiniteLoopProtection": true, - "hardReloadOnChange": false, - "view": "browser", - "template": "node", - "container": { - "port": 3000, - "startScript": "start", - "node": "14" - } -} diff --git a/examples/with-markdown/src/components/PreactCounter.tsx b/examples/with-markdown/src/components/PreactCounter.tsx deleted file mode 100644 index e67afb4fe96c..000000000000 --- a/examples/with-markdown/src/components/PreactCounter.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { h, Fragment } from 'preact'; -import { useState } from 'preact/hooks'; - -/** a counter written in Preact */ -export default function PreactCounter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); - - return ( - <> -
- - 
{count}
- -
-
{children}
- - ); -} diff --git a/examples/with-markdown/src/components/ReactCounter.jsx b/examples/with-markdown/src/components/ReactCounter.jsx deleted file mode 100644 index e322f7050c5c..000000000000 --- a/examples/with-markdown/src/components/ReactCounter.jsx +++ /dev/null @@ -1,19 +0,0 @@ -import React, { useState } from 'react'; - -/** a counter written in React */ -export default function ReactCounter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); - - return ( - <> -
- - 
{count}
- -
-
{children}
- - ); -} diff --git a/examples/with-markdown/src/components/SvelteCounter.svelte b/examples/with-markdown/src/components/SvelteCounter.svelte deleted file mode 100644 index 8d6b3f5e1688..000000000000 --- a/examples/with-markdown/src/components/SvelteCounter.svelte +++ /dev/null @@ -1,22 +0,0 @@ - - - -
- - 
{ count }
- -
-
- -
diff --git a/examples/with-markdown/src/components/VueCounter.vue b/examples/with-markdown/src/components/VueCounter.vue deleted file mode 100644 index 2f25066dca03..000000000000 --- a/examples/with-markdown/src/components/VueCounter.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro deleted file mode 100644 index 006c4ca6cad9..000000000000 --- a/examples/with-markdown/src/layouts/main.astro +++ /dev/null @@ -1,18 +0,0 @@ ---- -import "../styles/global.css"; - -const { content } = Astro.props; ---- - - - - - - - - {content.title} - - - - - diff --git a/examples/with-markdown/src/pages/external.astro b/examples/with-markdown/src/pages/external.astro deleted file mode 100644 index 395e27c715e5..000000000000 --- a/examples/with-markdown/src/pages/external.astro +++ /dev/null @@ -1,19 +0,0 @@ ---- -import { Markdown } from "astro/components"; -import Layout from "../layouts/main.astro"; - -const title = `External Markdown`; -const content = `Markdown *content* to render`; ---- - - -
-
- - - -

Some other stuff

-
-

Lastly...

-
- diff --git a/examples/with-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro deleted file mode 100644 index 1cc85c16c432..000000000000 --- a/examples/with-markdown/src/pages/index.astro +++ /dev/null @@ -1,65 +0,0 @@ ---- -// Component Imports -import { Markdown } from "astro/components"; -import Layout from "../layouts/main.astro"; -import ReactCounter from "../components/ReactCounter.jsx"; -import PreactCounter from "../components/PreactCounter.tsx"; -import VueCounter from "../components/VueCounter.vue"; -import SvelteCounter from "../components/SvelteCounter.svelte"; - -// Component Script: -// You can write any JavaScript/TypeScript that you'd like here. -// It will run during the build, but never in the browser. -// All variables are available to use in the HTML template below. -const title = "Astro Markdown"; -const variable = "content"; -const items = ["A", "B", "C"]; - -// Full Astro Component Syntax: -// https://docs.astro.build/core-concepts/astro-components/ ---- - - - - # Introducing {title} - - **Astro Markdown** brings native Markdown support to HTML! - - > It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark). - - The best part? It comes with all the Astro features you expect. - - [Other example](./other) - - ## Embed framework components - - - - - - - ## Use Expressions - - You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')}) - - ## Oh yeah... - - - - 🤯 It's also _recursive_! - - ### Markdown can be embedded in any child component - - - - ## Code - - Should work! - - ```js - import Something from "./another"; - - const thing = new Something(); - ``` - - diff --git a/examples/with-markdown/src/pages/other.md b/examples/with-markdown/src/pages/other.md deleted file mode 100644 index d4180940d470..000000000000 --- a/examples/with-markdown/src/pages/other.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Some Markdown Page -layout: ../layouts/main.astro ---- - -# Code - -```js -var foo = 'bar'; - -function doSomething() { - return foo; -} -``` - -# Paragraph - -text here. diff --git a/examples/with-markdown/src/styles/global.css b/examples/with-markdown/src/styles/global.css deleted file mode 100644 index 7ea16821efdf..000000000000 --- a/examples/with-markdown/src/styles/global.css +++ /dev/null @@ -1,70 +0,0 @@ -pre, -code { - color: #d4d4d4; - font-size: 14px; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - line-height: 1.5; - direction: ltr; - white-space: pre; - text-align: left; - text-shadow: none; - word-break: normal; - word-spacing: normal; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre::selection, -code::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - pre, - code { - text-shadow: none; - } -} - -pre { - margin: 0.5rem 0 16px; - padding: 0.8rem 1rem 0.9rem; - overflow: auto; - background: #282a36; - border-radius: 4px; -} - -code { - padding: 0.1em 0.3em; - color: #db4c69; - background: #f9f2f4; - border-radius: 0.3em; - white-space: pre-wrap; -} - -pre.astro-code > code { - all: unset; -} - -/********************************************************* -* Line highlighting -*/ -pre[data-line] { - position: relative; -} - -pre > code { - position: relative; - z-index: 1; -} - -body { - max-width: 900px; - margin: auto; -} diff --git a/examples/with-markdown/tsconfig.json b/examples/with-markdown/tsconfig.json deleted file mode 100644 index 4db6ee7011ac..000000000000 --- a/examples/with-markdown/tsconfig.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "compilerOptions": { - // Enable top-level await, and other modern ESM features. - "target": "ESNext", - "module": "ESNext", - // Enable node-style module resolution, for things like npm package imports. - "moduleResolution": "node", - // Enable JSON imports. - "resolveJsonModule": true, - // Enable stricter transpilation for better output. - "isolatedModules": true, - // Add type definitions for our Astro runtime. - "types": ["astro/client"] - } -} diff --git a/packages/astro/components/index.ts b/packages/astro/components/index.ts index b16d8983ac48..864c7cc3bbdf 100644 --- a/packages/astro/components/index.ts +++ b/packages/astro/components/index.ts @@ -1,3 +1,2 @@ export { default as Code } from './Code.astro'; export { default as Debug } from './Debug.astro'; -export { default as Markdown } from './Markdown.astro'; diff --git a/packages/astro/package.json b/packages/astro/package.json index a5c7dfd97a5b..929c74017410 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -82,7 +82,7 @@ "test:e2e:match": "playwright test -g" }, "dependencies": { - "@astrojs/compiler": "^0.19.0", + "@astrojs/compiler": "^0.20.0", "@astrojs/language-server": "^0.20.0", "@astrojs/markdown-remark": "^0.12.0", "@astrojs/prism": "0.6.1", diff --git a/packages/astro/test/astro-markdown-plugins.test.js b/packages/astro/test/astro-markdown-plugins.test.js index 350997c66438..9a925bdf0f28 100644 --- a/packages/astro/test/astro-markdown-plugins.test.js +++ b/packages/astro/test/astro-markdown-plugins.test.js @@ -34,15 +34,4 @@ describe('Astro Markdown plugins', () => { // teste 2: Added .title to h1 expect($('#hello-world').hasClass('title')).to.equal(true); }); - - it('Can render Astro with plugins', async () => { - const html = await fixture.readFile('/astro/index.html'); - const $ = cheerio.load(html); - - // test 1: Added a TOC - expect($('.toc')).to.have.lengthOf(1); - - // teste 2: Added .title to h1 - expect($('#hello-world').hasClass('title')).to.equal(true); - }); }); diff --git a/packages/astro/test/astro-markdown-shiki.test.js b/packages/astro/test/astro-markdown-shiki.test.js index 039062ea7ac5..9c8d86689a71 100644 --- a/packages/astro/test/astro-markdown-shiki.test.js +++ b/packages/astro/test/astro-markdown-shiki.test.js @@ -23,20 +23,6 @@ describe('Astro Markdown Shiki', () => { expect($('pre').attr().style).to.equal('background-color: #0d1117; overflow-x: auto;'); }); - it('Can render Astro with shiki', async () => { - const html = await fixture.readFile('/astro/index.html'); - const $ = cheerio.load(html); - - // There should be no HTML from Prism - expect($('.token')).to.have.lengthOf(0); - - expect($('pre')).to.have.lengthOf(2); - - expect($('span.line')).to.have.lengthOf(2); - expect($('span.line').get(0).children).to.have.lengthOf(1); - expect($('span.line').get(1).children).to.have.lengthOf(5); - }); - it('Can render diff syntax with "user-select: none"', async () => { const html = await fixture.readFile('/index.html'); const $ = cheerio.load(html); @@ -63,15 +49,6 @@ describe('Astro Markdown Shiki', () => { expect($('pre').hasClass('astro-code')).to.equal(true); expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;'); }); - - it(' component', async () => { - const html = await fixture.readFile('/astro/index.html'); - const $ = cheerio.load(html); - - expect($('pre')).to.have.lengthOf(1); - expect($('pre').hasClass('astro-code')).to.equal(true); - expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;'); - }); }); describe('Custom theme', async () => { @@ -90,15 +67,6 @@ describe('Astro Markdown Shiki', () => { expect($('pre').hasClass('astro-code')).to.equal(true); expect($('pre').attr().style).to.equal('background-color: #FDFDFE; overflow-x: auto;'); }); - - it(' component', async () => { - const html = await fixture.readFile('/astro/index.html'); - const $ = cheerio.load(html); - - expect($('pre')).to.have.lengthOf(1); - expect($('pre').hasClass('astro-code')).to.equal(true); - expect($('pre').attr().style).to.equal('background-color: #FDFDFE; overflow-x: auto;'); - }); }); }); @@ -125,21 +93,6 @@ describe('Astro Markdown Shiki', () => { 'This language does not exist' ); }); - - it(' component', async () => { - const html = await fixture.readFile('/astro/index.html'); - const $ = cheerio.load(html); - - const segments = $('.line').get(6).children; - expect(segments).to.have.lengthOf(3); - expect(segments[0].attribs.style).to.be.equal('color: #C9D1D9'); - expect(segments[1].attribs.style).to.be.equal('color: #79C0FF'); - - const unknownLang = $('.line').last().html(); - expect(unknownLang).to.be.equal( - 'This language does not exist' - ); - }); }); describe('Wrap', () => { @@ -160,14 +113,6 @@ describe('Astro Markdown Shiki', () => { expect($('pre')).to.have.lengthOf(1); expect($('pre').attr('style')).to.equal(style); }); - - it(' component', async () => { - const html = await fixture.readFile('/astro/index.html'); - const $ = cheerio.load(html); - - expect($('pre').get(0).attribs.style).to.equal(style); - expect($('pre').get(1).attribs.style).to.equal(style); - }); }); }); @@ -187,14 +132,6 @@ describe('Astro Markdown Shiki', () => { expect($('pre')).to.have.lengthOf(1); expect($('pre').attr('style')).to.equal(style); }); - - it(' component', async () => { - const html = await fixture.readFile('/astro/index.html'); - const $ = cheerio.load(html); - - expect($('pre').get(0).attribs.style).to.equal(style); - expect($('pre').get(1).attribs.style).to.equal(style); - }); }); describe('wrap = null', () => { @@ -213,13 +150,5 @@ describe('Astro Markdown Shiki', () => { expect($('pre')).to.have.lengthOf(1); expect($('pre').attr('style')).to.equal(style); }); - - it(' component', async () => { - const html = await fixture.readFile('/astro/index.html'); - const $ = cheerio.load(html); - - expect($('pre').get(0).attribs.style).to.equal(style); - expect($('pre').get(1).attribs.style).to.equal(style); - }); }); }); diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js index c0726d2caf55..92b78121adfb 100644 --- a/packages/astro/test/astro-markdown.test.js +++ b/packages/astro/test/astro-markdown.test.js @@ -12,17 +12,6 @@ describe('Astro Markdown', () => { await fixture.build(); }); - it('Can load markdown pages with Astro', async () => { - const html = await fixture.readFile('/post/index.html'); - const $ = cheerio.load(html); - - // test 1: There is a div added in markdown - expect($('#first').length).to.be.ok; - - // test 2: There is a div added via a component from markdown - expect($('#test').length).to.be.ok; - }); - it('Can parse JSX expressions in markdown pages', async () => { const html = await fixture.readFile('/jsx-expressions/index.html'); const $ = cheerio.load(html); @@ -99,13 +88,6 @@ describe('Astro Markdown', () => { expect(html).not.to.match(new RegExp('/src/scripts/test.js')); }); - it('Can load more complex jsxy stuff', async () => { - const html = await fixture.readFile('/complex/index.html'); - const $ = cheerio.load(html); - - expect($('#test').text()).to.equal('Hello world'); - }); - it('Empty code blocks do not fail', async () => { const html = await fixture.readFile('/empty-code/index.html'); const $ = cheerio.load(html); @@ -117,143 +99,11 @@ describe('Astro Markdown', () => { expect($('pre')[1].children).to.have.lengthOf(0); }); - it('Runs code blocks through syntax highlighter', async () => { - const html = await fixture.readFile('/code/index.html'); - const $ = cheerio.load(html); - - // test 1: There are child spans in code blocks - expect($('code span').length).greaterThan(0); - }); - - it('Scoped styles should not break syntax highlight', async () => { - const html = await fixture.readFile('/scopedStyles-code/index.html'); - const $ = cheerio.load(html); - - // test 1: 
 tag has correct shiki class
-		expect($('pre').hasClass('astro-code')).to.equal(true);
-
-		// test 2: inline styles are still applied
-		expect($('pre').is('[style]')).to.equal(true);
-
-		// test 3: There are styled child spans in code blocks
-		expect($('pre code span').length).to.be.greaterThan(0);
-		expect($('pre code span').is('[style]')).to.equal(true);
-	});
-
-	function isAstroScopedClass(cls) {
-		return /^astro-.*/.test(cls);
-	}
-
-	it('Scoped styles should be applied to syntax highlighted lines', async () => {
-		const html = await fixture.readFile('/scopedStyles-code/index.html');
-		const $ = cheerio.load(html);
-
-		// test 1: the "pre" tag receives scoped style
-		const preClassList = $('pre').attr('class').split(/\s+/);
-		expect(preClassList.length).to.equal(2);
-		const preAstroClass = preClassList.find(isAstroScopedClass);
-		expect(Boolean(preAstroClass)).to.equal(true);
-
-		// test 2: each "span" line receives scoped style
-		const spanClassList = $('pre code span').attr('class').split(/\s+/);
-		expect(spanClassList.length).to.equal(2);
-		const spanAstroClass = spanClassList.find(isAstroScopedClass);
-		expect(Boolean(spanAstroClass)).to.equal(true);
-	});
-
-	it('Renders correctly when deeply nested on a page', async () => {
-		const html = await fixture.readFile('/deep/index.html');
-		const $ = cheerio.load(html);
-
-		// test 1: Rendered all children
-		expect($('#deep').children()).to.have.lengthOf(3);
-
-		// tests 2–4: Only rendered title in each section
-		expect($('.a').children()).to.have.lengthOf(1);
-		expect($('.b').children()).to.have.lengthOf(1);
-		expect($('.c').children()).to.have.lengthOf(1);
-
-		// test 5–7: Rendered title in correct section
-		expect($('.a > h2').text()).to.equal('A');
-		expect($('.b > h2').text()).to.equal('B');
-		expect($('.c > h2').text()).to.equal('C');
-	});
-
-	it('Renders dynamic content though the content attribute', async () => {
-		const html = await fixture.readFile('/external/index.html');
-		const $ = cheerio.load(html);
-
-		// test 1: Rendered markdown content
-		expect($('#outer')).to.have.lengthOf(1);
-
-		// test 2: Nested markdown content
-		expect($('#inner')).to.have.lengthOf(1);
-
-		// test 3: Scoped class passed down
-		expect($('#inner').is('[class]')).to.equal(true);
-	});
-
-	it('Renders curly braces correctly', async () => {
-		const html = await fixture.readFile('/braces/index.html');
-		const $ = cheerio.load(html);
-
-		// test 1: Rendered curly braces markdown content
-		expect($('code')).to.have.lengthOf(3);
-
-		// test 2: Rendered curly braces markdown content
-		expect($('code:first-child').text()).to.equal('({})');
-
-		// test 3: Rendered curly braces markdown content
-		expect($('code:nth-child(2)').text()).to.equal('{...props}');
-
-		// test 4: Rendered curly braces markdown content
-		expect($('code:last-child').text()).to.equal('{/* JavaScript */}');
-	});
-
-	it('Does not close parent early when using content attribute (#494)', async () => {
-		const html = await fixture.readFile('/close/index.html');
-		const $ = cheerio.load(html);
-
-		// test  closed div#target early
-		expect($('#target').children()).to.have.lengthOf(2);
-	});
-
 	it('Can render markdown with --- for horizontal rule', async () => {
 		const html = await fixture.readFile('/dash/index.html');
 		expect(!!html).to.equal(true);
 	});
 
-	it('Can render markdown content prop (#1259)', async () => {
-		const html = await fixture.readFile('/content/index.html');
-		const $ = cheerio.load(html);
-
-		// test Markdown rendered correctly via content prop
-		expect($('h1').text()).to.equal('Foo');
-	});
-
-	it("doesn't occurs TypeError when no elements", async () => {
-		const html = await fixture.readFile('/no-elements/index.html');
-		// render html without error
-		expect(html).to.be.ok;
-	});
-
-	it('can render nested list correctly', async () => {
-		const html = await fixture.readFile('/nested-list/index.html');
-		const $ = cheerio.load(html);
-		/**
-		 * - list
-		 *  - list
-		 */
-		expect($('#target > ul > li').children()).to.have.lengthOf(1);
-		expect($('#target > ul > li > ul > li').text()).to.equal('nested list');
-		/**
-		 * 1. Hello
-		 *  1. nested hello
-		 */
-		expect($('#target > ol > li').children()).to.have.lengthOf(1);
-		expect($('#target > ol > li > ol > li').text()).to.equal('nested hello');
-	});
-
 	it('Exposes raw markdown content', async () => {
 		const { raw } = JSON.parse(await fixture.readFile('/raw-content.json'));
 
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/content.astro b/packages/astro/test/fixtures/astro-markdown/src/pages/content.astro
deleted file mode 100644
index 8c07debd27b4..000000000000
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/content.astro
+++ /dev/null
@@ -1,6 +0,0 @@
----
-import { Markdown } from 'astro/components';
-const content = '# Foo';
----
-
-
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/no-elements.astro b/packages/astro/test/fixtures/astro-markdown/src/pages/no-elements.astro
deleted file mode 100644
index d865e9046661..000000000000
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/no-elements.astro
+++ /dev/null
@@ -1,5 +0,0 @@
----
-import { Markdown } from 'astro/components';
----
-
-
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/ssr-markdown/src/pages/page.astro b/packages/astro/test/fixtures/ssr-markdown/src/pages/page.astro
deleted file mode 100644
index 83ec88d9f7c1..000000000000
--- a/packages/astro/test/fixtures/ssr-markdown/src/pages/page.astro
+++ /dev/null
@@ -1,14 +0,0 @@
----
-import { Markdown } from 'astro/components';
----
-
-
-Testing
-
-	
-		# Something
-
-		else here
-	
-
-
diff --git a/packages/astro/test/ssr-markdown.test.js b/packages/astro/test/ssr-markdown.test.js
index a33fc85d60a0..40c12449e872 100644
--- a/packages/astro/test/ssr-markdown.test.js
+++ b/packages/astro/test/ssr-markdown.test.js
@@ -31,10 +31,4 @@ describe('Markdown pages in SSR', () => {
 		const $ = cheerioLoad(html);
 		expect($('#subheading').text()).to.equal('Subheading');
 	});
-
-	it('Renders the Markdown component correctly', async () => {
-		const html = await fetchHTML('/page');
-		const $ = cheerioLoad(html);
-		expect($('#something')).to.have.lengthOf(1);
-	});
 });
diff --git a/packages/astro/components/Markdown.astro b/packages/markdown/component/Markdown.astro
similarity index 100%
rename from packages/astro/components/Markdown.astro
rename to packages/markdown/component/Markdown.astro
diff --git a/packages/markdown/component/package.json b/packages/markdown/component/package.json
new file mode 100644
index 000000000000..5308899e08dd
--- /dev/null
+++ b/packages/markdown/component/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@astrojs/markdown-component",
+  "version": "0.1.0",
+  "type": "module",
+  "author": "withastro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/withastro/astro.git",
+    "directory": "packages/markdown/component"
+  },
+  "bugs": "https://github.com/withastro/astro/issues",
+  "homepage": "https://astro.build",
+  "main": "./Markdown.astro",
+  "exports": {
+    ".": {
+      "astro": "./Markdown.astro"
+    }
+  },
+  "scripts": {
+    "test": "mocha --exit --timeout 20000"
+  },
+  "devDependencies": {
+    "astro": "workspace:*",
+    "chai": "^4.3.6",
+    "cheerio": "^1.0.0-rc.11",
+    "mocha": "^9.2.2",
+    "@types/mocha": "^9.1.1"
+  },
+  "keywords": ["astro", "astro-component"]
+}
diff --git a/packages/markdown/component/readme.md b/packages/markdown/component/readme.md
new file mode 100644
index 000000000000..aa48e274d4bb
--- /dev/null
+++ b/packages/markdown/component/readme.md
@@ -0,0 +1,17 @@
+# @astrojs/markdown
+
+This package brings legacy support for the `` component to all Astro projects.
+
+> The `` component does not work in SSR. Consider [importing Markdown content](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) instead.
+:::
+
+```astro
+---
+import Markdown from '@astrojs/markdown-component';
+---
+
+  # Markdown syntax is now supported! **Yay!**
+
+```
+
+See our [Markdown Guide](https://docs.astro.build/en/guides/markdown-content/) for more info.
diff --git a/packages/markdown/component/test/astro-markdown-plugins.test.js b/packages/markdown/component/test/astro-markdown-plugins.test.js
new file mode 100644
index 000000000000..c748d81c9406
--- /dev/null
+++ b/packages/markdown/component/test/astro-markdown-plugins.test.js
@@ -0,0 +1,37 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+import addClasses from './fixtures/astro-markdown-plugins/add-classes.mjs';
+
+describe('Astro Markdown plugins', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/astro-markdown-plugins/',
+			markdown: {
+				remarkPlugins: [
+					'remark-code-titles',
+					['rehype-autolink-headings', { behavior: 'prepend' }],
+				],
+				rehypePlugins: [
+					'rehype-slug',
+					['rehype-toc', { headings: ['h2', 'h3'] }],
+					[addClasses, { 'h1,h2,h3': 'title' }],
+				],
+			},
+		});
+		await fixture.build();
+	});
+
+	it('Can render Astro  with plugins', async () => {
+		const html = await fixture.readFile('/astro/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: Added a TOC
+		expect($('.toc')).to.have.lengthOf(1);
+
+		// teste 2: Added .title to h1
+		expect($('#hello-world').hasClass('title')).to.equal(true);
+	});
+});
diff --git a/packages/markdown/component/test/astro-markdown-shiki.test.js b/packages/markdown/component/test/astro-markdown-shiki.test.js
new file mode 100644
index 000000000000..fb4f8f9622a2
--- /dev/null
+++ b/packages/markdown/component/test/astro-markdown-shiki.test.js
@@ -0,0 +1,147 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture } from './test-utils.js';
+
+describe('Astro Markdown Shiki', () => {
+	describe('Render shiki', () => {
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/normal/' });
+			await fixture.build();
+		});
+
+		it('Can render Astro  with shiki', async () => {
+			const html = await fixture.readFile('/astro/index.html');
+			const $ = cheerio.load(html);
+
+			// There should be no HTML from Prism
+			expect($('.token')).to.have.lengthOf(0);
+
+			expect($('pre')).to.have.lengthOf(2);
+
+			expect($('span.line')).to.have.lengthOf(2);
+			expect($('span.line').get(0).children).to.have.lengthOf(1);
+			expect($('span.line').get(1).children).to.have.lengthOf(5);
+		});
+	});
+
+	describe('Themes', () => {
+		describe('Integrated theme', async () => {
+			let fixture;
+
+			before(async () => {
+				fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/themes-integrated/' });
+				await fixture.build();
+			});
+
+			it(' component', async () => {
+				const html = await fixture.readFile('/astro/index.html');
+				const $ = cheerio.load(html);
+
+				expect($('pre')).to.have.lengthOf(1);
+				expect($('pre').hasClass('astro-code')).to.equal(true);
+				expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;');
+			});
+		});
+
+		describe('Custom theme', async () => {
+			let fixture;
+
+			before(async () => {
+				fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/themes-custom/' });
+				await fixture.build();
+			});
+
+			it(' component', async () => {
+				const html = await fixture.readFile('/astro/index.html');
+				const $ = cheerio.load(html);
+
+				expect($('pre')).to.have.lengthOf(1);
+				expect($('pre').hasClass('astro-code')).to.equal(true);
+				expect($('pre').attr().style).to.equal('background-color: #FDFDFE; overflow-x: auto;');
+			});
+		});
+	});
+
+	describe('Custom langs', () => {
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/langs/' });
+			await fixture.build();
+		});
+
+		it(' component', async () => {
+			const html = await fixture.readFile('/astro/index.html');
+			const $ = cheerio.load(html);
+
+			const segments = $('.line').get(6).children;
+			expect(segments).to.have.lengthOf(3);
+			expect(segments[0].attribs.style).to.be.equal('color: #C9D1D9');
+			expect(segments[1].attribs.style).to.be.equal('color: #79C0FF');
+
+			const unknownLang = $('.line').last().html();
+			expect(unknownLang).to.be.equal(
+				'This language does not exist'
+			);
+		});
+	});
+
+	describe('Wrap', () => {
+		describe('wrap = true', () => {
+			const style =
+				'background-color: #0d1117; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
+			let fixture;
+
+			before(async () => {
+				fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/wrap-true/' });
+				await fixture.build();
+			});
+
+			it(' component', async () => {
+				const html = await fixture.readFile('/astro/index.html');
+				const $ = cheerio.load(html);
+
+				expect($('pre').get(0).attribs.style).to.equal(style);
+				expect($('pre').get(1).attribs.style).to.equal(style);
+			});
+		});
+	});
+
+	describe('wrap = false', () => {
+		const style = 'background-color: #0d1117; overflow-x: auto;';
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/wrap-false/' });
+			await fixture.build();
+		});
+
+		it(' component', async () => {
+			const html = await fixture.readFile('/astro/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('pre').get(0).attribs.style).to.equal(style);
+			expect($('pre').get(1).attribs.style).to.equal(style);
+		});
+	});
+
+	describe('wrap = null', () => {
+		const style = 'background-color: #0d1117';
+		let fixture;
+
+		before(async () => {
+			fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/wrap-null/' });
+			await fixture.build();
+		});
+
+		it(' component', async () => {
+			const html = await fixture.readFile('/astro/index.html');
+			const $ = cheerio.load(html);
+
+			expect($('pre').get(0).attribs.style).to.equal(style);
+			expect($('pre').get(1).attribs.style).to.equal(style);
+		});
+	});
+});
diff --git a/packages/markdown/component/test/astro-markdown.test.js b/packages/markdown/component/test/astro-markdown.test.js
new file mode 100644
index 000000000000..c0726d2caf55
--- /dev/null
+++ b/packages/markdown/component/test/astro-markdown.test.js
@@ -0,0 +1,350 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { loadFixture, fixLineEndings } from './test-utils.js';
+
+describe('Astro Markdown', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/astro-markdown/',
+		});
+		await fixture.build();
+	});
+
+	it('Can load markdown pages with Astro', async () => {
+		const html = await fixture.readFile('/post/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: There is a div added in markdown
+		expect($('#first').length).to.be.ok;
+
+		// test 2: There is a div added via a component from markdown
+		expect($('#test').length).to.be.ok;
+	});
+
+	it('Can parse JSX expressions in markdown pages', async () => {
+		const html = await fixture.readFile('/jsx-expressions/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h2').html()).to.equal('Blog Post with JSX expressions');
+
+		expect(html).to.contain('JSX at the start of the line!');
+		for (let listItem of ['test-1', 'test-2', 'test-3']) {
+			expect($(`#${listItem}`).html()).to.equal(`${listItem}`);
+		}
+	});
+
+	it('Can handle slugs with JSX expressions in markdown pages', async () => {
+		const html = await fixture.readFile('/slug/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h1').attr('id')).to.equal('my-blog-post');
+	});
+
+	it('Can handle code elements without extra spacing', async () => {
+		const html = await fixture.readFile('/code-element/index.html');
+		const $ = cheerio.load(html);
+
+		$('code').each((_, el) => {
+			expect($(el).html()).to.equal($(el).html().trim());
+		});
+	});
+
+	it('Can handle namespaced components in markdown', async () => {
+		const html = await fixture.readFile('/namespace/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h1').text()).to.equal('Hello Namespace!');
+		expect($('button').length).to.equal(1);
+	});
+
+	it('Correctly handles component children in markdown pages (#3319)', async () => {
+		const html = await fixture.readFile('/children/index.html');
+
+		expect(html).not.to.contain('
');
+	});
+
+	it('Can handle HTML comments in markdown pages', async () => {
+		const html = await fixture.readFile('/comment/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h1').text()).to.equal('It works!');
+	});
+
+	it('Prevents `*/` sequences from breaking HTML comments (#3476)', async () => {
+		const html = await fixture.readFile('/comment-with-js/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('h1').text()).to.equal('It still works!');
+	});
+
+	it('Can handle HTML comments in inline code', async () => {
+		const html = await fixture.readFile('/comment-with-js/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('p code').text()).to.equal('');
+	});
+
+	it('Can handle HTML comments in code fences', async () => {
+		const html = await fixture.readFile('/comment-with-js/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('pre > code').text()).to.equal('');
+	});
+
+	// https://github.com/withastro/astro/issues/3254
+	it('Can handle scripts in markdown pages', async () => {
+		const html = await fixture.readFile('/script/index.html');
+		expect(html).not.to.match(new RegExp('/src/scripts/test.js'));
+	});
+
+	it('Can load more complex jsxy stuff', async () => {
+		const html = await fixture.readFile('/complex/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('#test').text()).to.equal('Hello world');
+	});
+
+	it('Empty code blocks do not fail', async () => {
+		const html = await fixture.readFile('/empty-code/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: There is not a `` in the codeblock
+		expect($('pre')[0].children).to.have.lengthOf(1);
+
+		// test 2: The empty `
` failed to render
+		expect($('pre')[1].children).to.have.lengthOf(0);
+	});
+
+	it('Runs code blocks through syntax highlighter', async () => {
+		const html = await fixture.readFile('/code/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: There are child spans in code blocks
+		expect($('code span').length).greaterThan(0);
+	});
+
+	it('Scoped styles should not break syntax highlight', async () => {
+		const html = await fixture.readFile('/scopedStyles-code/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: 
 tag has correct shiki class
+		expect($('pre').hasClass('astro-code')).to.equal(true);
+
+		// test 2: inline styles are still applied
+		expect($('pre').is('[style]')).to.equal(true);
+
+		// test 3: There are styled child spans in code blocks
+		expect($('pre code span').length).to.be.greaterThan(0);
+		expect($('pre code span').is('[style]')).to.equal(true);
+	});
+
+	function isAstroScopedClass(cls) {
+		return /^astro-.*/.test(cls);
+	}
+
+	it('Scoped styles should be applied to syntax highlighted lines', async () => {
+		const html = await fixture.readFile('/scopedStyles-code/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: the "pre" tag receives scoped style
+		const preClassList = $('pre').attr('class').split(/\s+/);
+		expect(preClassList.length).to.equal(2);
+		const preAstroClass = preClassList.find(isAstroScopedClass);
+		expect(Boolean(preAstroClass)).to.equal(true);
+
+		// test 2: each "span" line receives scoped style
+		const spanClassList = $('pre code span').attr('class').split(/\s+/);
+		expect(spanClassList.length).to.equal(2);
+		const spanAstroClass = spanClassList.find(isAstroScopedClass);
+		expect(Boolean(spanAstroClass)).to.equal(true);
+	});
+
+	it('Renders correctly when deeply nested on a page', async () => {
+		const html = await fixture.readFile('/deep/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: Rendered all children
+		expect($('#deep').children()).to.have.lengthOf(3);
+
+		// tests 2–4: Only rendered title in each section
+		expect($('.a').children()).to.have.lengthOf(1);
+		expect($('.b').children()).to.have.lengthOf(1);
+		expect($('.c').children()).to.have.lengthOf(1);
+
+		// test 5–7: Rendered title in correct section
+		expect($('.a > h2').text()).to.equal('A');
+		expect($('.b > h2').text()).to.equal('B');
+		expect($('.c > h2').text()).to.equal('C');
+	});
+
+	it('Renders dynamic content though the content attribute', async () => {
+		const html = await fixture.readFile('/external/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: Rendered markdown content
+		expect($('#outer')).to.have.lengthOf(1);
+
+		// test 2: Nested markdown content
+		expect($('#inner')).to.have.lengthOf(1);
+
+		// test 3: Scoped class passed down
+		expect($('#inner').is('[class]')).to.equal(true);
+	});
+
+	it('Renders curly braces correctly', async () => {
+		const html = await fixture.readFile('/braces/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: Rendered curly braces markdown content
+		expect($('code')).to.have.lengthOf(3);
+
+		// test 2: Rendered curly braces markdown content
+		expect($('code:first-child').text()).to.equal('({})');
+
+		// test 3: Rendered curly braces markdown content
+		expect($('code:nth-child(2)').text()).to.equal('{...props}');
+
+		// test 4: Rendered curly braces markdown content
+		expect($('code:last-child').text()).to.equal('{/* JavaScript */}');
+	});
+
+	it('Does not close parent early when using content attribute (#494)', async () => {
+		const html = await fixture.readFile('/close/index.html');
+		const $ = cheerio.load(html);
+
+		// test  closed div#target early
+		expect($('#target').children()).to.have.lengthOf(2);
+	});
+
+	it('Can render markdown with --- for horizontal rule', async () => {
+		const html = await fixture.readFile('/dash/index.html');
+		expect(!!html).to.equal(true);
+	});
+
+	it('Can render markdown content prop (#1259)', async () => {
+		const html = await fixture.readFile('/content/index.html');
+		const $ = cheerio.load(html);
+
+		// test Markdown rendered correctly via content prop
+		expect($('h1').text()).to.equal('Foo');
+	});
+
+	it("doesn't occurs TypeError when no elements", async () => {
+		const html = await fixture.readFile('/no-elements/index.html');
+		// render html without error
+		expect(html).to.be.ok;
+	});
+
+	it('can render nested list correctly', async () => {
+		const html = await fixture.readFile('/nested-list/index.html');
+		const $ = cheerio.load(html);
+		/**
+		 * - list
+		 *  - list
+		 */
+		expect($('#target > ul > li').children()).to.have.lengthOf(1);
+		expect($('#target > ul > li > ul > li').text()).to.equal('nested list');
+		/**
+		 * 1. Hello
+		 *  1. nested hello
+		 */
+		expect($('#target > ol > li').children()).to.have.lengthOf(1);
+		expect($('#target > ol > li > ol > li').text()).to.equal('nested hello');
+	});
+
+	it('Exposes raw markdown content', async () => {
+		const { raw } = JSON.parse(await fixture.readFile('/raw-content.json'));
+
+		expect(fixLineEndings(raw)).to.equal(
+			`\n## With components\n\n### Non-hydrated\n\n\n\n### Hydrated\n\n\n\n`
+		);
+	});
+
+	it('Exposes HTML parser for raw markdown content', async () => {
+		const { compiled } = JSON.parse(await fixture.readFile('/raw-content.json'));
+
+		expect(fixLineEndings(compiled)).to.equal(
+			`
With components
\n
Non-hydrated
\n\n
Hydrated
\n\n`
+		);
+	});
+
+	it('Allows referencing Vite env var names in markdown (#3412)', async () => {
+		const html = await fixture.readFile('/vite-env-vars/index.html');
+		const $ = cheerio.load(html);
+
+		// test 1: referencing an existing var name
+		expect($('code').eq(0).text()).to.equal('import.meta.env.SITE');
+		expect($('li').eq(0).text()).to.equal('import.meta.env.SITE');
+		expect($('code').eq(3).text()).to.contain('site: import.meta.env.SITE');
+		expect($('blockquote').text()).to.contain('import.meta.env.SITE');
+
+		// test 2: referencing a non-existing var name
+		expect($('code').eq(1).text()).to.equal('import.meta.env.TITLE');
+		expect($('li').eq(1).text()).to.equal('import.meta.env.TITLE');
+		expect($('code').eq(3).text()).to.contain('title: import.meta.env.TITLE');
+		expect($('blockquote').text()).to.contain('import.meta.env.TITLE');
+
+		// test 3: referencing `import.meta.env` itself (without any var name)
+		expect($('code').eq(2).text()).to.equal('import.meta.env');
+		expect($('li').eq(2).text()).to.equal('import.meta.env');
+		expect($('code').eq(3).text()).to.contain('// Use Vite env vars with import.meta.env');
+		expect($('blockquote').text()).to.match(/import\.meta\.env\s*$/);
+	});
+
+	it('Escapes HTML tags in code blocks', async () => {
+		const html = await fixture.readFile('/code-in-md/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('code').eq(0).html()).to.equal('<script>');
+		expect($('blockquote').length).to.equal(1);
+		expect($('code').eq(1).html()).to.equal('</script>');
+		expect($('pre').html()).to.contain('>This should also work without any problems.<');
+	});
+
+	it('Allows defining slot contents in component children', async () => {
+		const html = await fixture.readFile('/slots/index.html');
+		const $ = cheerio.load(html);
+
+		const slots = $('article').eq(0);
+		expect(slots.find('> .fragmentSlot > div').text()).to.contain('1:');
+		expect(slots.find('> .fragmentSlot > div + p').text()).to.contain('2:');
+		expect(slots.find('> .pSlot > p[title="hello"]').text()).to.contain('3:');
+		expect(slots.find('> .defaultSlot').html()).to.match(
+			new RegExp(
+				`
4: Div in default slot
` +
+					// Optional extra paragraph due to the line breaks between components
+					`(
)?` +
+					`
5: Paragraph in fragment in default slot
` +
+					// Optional whitespace due to the line breaks between components
+					`[\s\n]*` +
+					`6: Regular text in default slot`
+			)
+		);
+
+		const nestedSlots = $('article').eq(1);
+		expect(nestedSlots.find('> .fragmentSlot').html()).to.contain('1:');
+		expect(nestedSlots.find('> .pSlot > p').text()).to.contain('2:');
+		expect(nestedSlots.find('> .defaultSlot > article').text().replace(/\s+/g, ' ')).to.equal(
+			`
+			3: nested fragmentSlot
+			4: nested pSlot
+			5: nested text in default slot
+		`.replace(/\s+/g, ' ')
+		);
+
+		expect($('article').eq(3).text().replace(/[^❌]/g, '')).to.equal('❌❌❌');
+
+		expect($('article').eq(4).text().replace(/[^❌]/g, '')).to.equal('❌❌❌');
+	});
+
+	it('Generate the right props for the layout', async () => {
+		const html = await fixture.readFile('/layout-props/index.html');
+		const $ = cheerio.load(html);
+
+		expect($('#title').text()).to.equal('Hello world!');
+		expect($('#url').text()).to.equal('/layout-props');
+		expect($('#file').text()).to.match(/.*\/layout-props.md$/);
+	});
+});
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-plugins/add-classes.mjs b/packages/markdown/component/test/fixtures/astro-markdown-plugins/add-classes.mjs
new file mode 100644
index 000000000000..39acabd52670
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-plugins/add-classes.mjs
@@ -0,0 +1,18 @@
+import { selectAll } from 'hast-util-select';
+
+export default (additions) => {
+	const adders = Object.entries(additions).map(adder);
+	return (node) => adders.forEach((a) => a(node));
+};
+
+const adder = ([selector, className]) => {
+	const writer = write(className);
+	return (node) => selectAll(selector, node).forEach(writer);
+};
+
+const write =
+	(className) =>
+	({ properties }) => {
+		if (!properties.className) properties.className = className;
+		else properties.className += ` ${className}`;
+	};
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-plugins/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown-plugins/astro.config.mjs
new file mode 100644
index 000000000000..08916b1fea78
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-plugins/astro.config.mjs
@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [preact()],
+});
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-plugins/package.json b/packages/markdown/component/test/fixtures/astro-markdown-plugins/package.json
new file mode 100644
index 000000000000..4babf437ada3
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-plugins/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@test/astro-markdown-component-plugins",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/preact": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*",
+    "astro": "workspace:*",
+    "hast-util-select": "^5.0.2",
+    "rehype-slug": "^5.0.1"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-plugins/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown-plugins/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-plugins/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/astro/test/fixtures/astro-markdown-plugins/src/pages/astro.astro b/packages/markdown/component/test/fixtures/astro-markdown-plugins/src/pages/astro.astro
similarity index 69%
rename from packages/astro/test/fixtures/astro-markdown-plugins/src/pages/astro.astro
rename to packages/markdown/component/test/fixtures/astro-markdown-plugins/src/pages/astro.astro
index 4ddb6dabdb93..f3a019f585b0 100644
--- a/packages/astro/test/fixtures/astro-markdown-plugins/src/pages/astro.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown-plugins/src/pages/astro.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/astro.config.mjs
new file mode 100644
index 000000000000..130596b0c4c5
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/astro.config.mjs
@@ -0,0 +1,19 @@
+const riGrammar = JSON.parse(
+	String.raw`{"name":"rinfo","patterns":[{"include":"#lf-rinfo"}],"repository":{"lf-rinfo":{"patterns":[{"include":"#control"},{"include":"#operator"},{"include":"#strings"},{"include":"#number"},{"include":"#comment"},{"include":"#literal"}]},"control":{"patterns":[{"name":"keyword.control.ri","match":"\\b(si|mientras|repetir)\\b"},{"name":"keyword.other.ri","match":"\\b(programa|robots|areas|variables|comenzar|fin)\\b"},{"name":"support.function.other.ri","match":"\\b(tomarFlor|HayFlorEnLaBolsa|HayFlorEnLaEsquina|depositarFlor|HayPapelEnLaBolsa|HayPapelEnLaEsquina|tomarPapel|depositarPapel)\\b"}]},"operator":{"comment":"Captures operators and also puts them in different sub-groups that further describe them","patterns":[{"match":"\\+|-|\\*|/","name":"keyword.operator.arithmetic.ri"},{"match":"<|>|<=|>=|=|<>|!=","name":"keyword.operator.comparison.ri"},{"match":"\\b(Pos|Informar|Leer|Iniciar|AsignarArea|AreaC)\\b","name":"support.function.arithmetic.ri"},{"match":":=","name":"keyword.operator.assign.ri"},{"match":"(&|~)","name":"support.function.logical.ri"}]},"strings":{"name":"string.quoted.double.ri","beginCaptures":{"0":{"name":"string.quoted.double.begin.ri"}},"endCaptures":{"0":{"name":"string.quoted.double.end.ri"}},"begin":"\"","end":"\"","patterns":[{"name":"constant.character.escape.ri","match":"\\\\."}]},"comment":{"patterns":[{"name":"comment.block.ri","begin":"{","end":"}","patterns":[{"include":"#comment"}]}]},"literal":{"patterns":[{"name":"constant.language.ri","match":"\\b(verdadero|falso|boolean|numero)\\b"}]},"number":{"patterns":[{"comment":"Captures decimal numbers, with the negative sign being considered an operator","match":"(-)?(?:((?:\\b\\d+(?:\\.\\d*)?|\\.\\d+)(?:\\b|e-?\\d+\\b)%?)|(\\$[0-9]+\\b))","captures":{"1":{"name":"keyword.operator.arithmetic.ri"},"2":{"name":"constant.numeric.decimal.ri"},"3":{"name":"constant.numeric.hex.ri"}}}]}},"scopeName":"source.rinfo"}`
+);
+
+export default {
+	markdown: {
+		syntaxHighlight: 'shiki',
+		shikiConfig: {
+			langs: [
+				{
+					id: 'rinfo',
+					scopeName: 'source.rinfo',
+					grammar: riGrammar,
+					aliases: ['ri'],
+				},
+			],
+		},
+	},
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/package.json b/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/package.json
new file mode 100644
index 000000000000..ecf89dba4769
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-markdown-skiki-langs",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/astro.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/src/pages/astro.astro
similarity index 88%
rename from packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/astro.astro
rename to packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/src/pages/astro.astro
index 1e4e0dc8a602..d6740987dd08 100644
--- a/packages/astro/test/fixtures/astro-markdown-shiki/langs/src/pages/astro.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/langs/src/pages/astro.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/astro.config.mjs
new file mode 100644
index 000000000000..acd4c5abc673
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/astro.config.mjs
@@ -0,0 +1,5 @@
+export default {
+	markdown: {
+		syntaxHighlight: 'shiki',
+	},
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/package.json b/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/package.json
new file mode 100644
index 000000000000..6b54139e45cb
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-markdown-skiki-normal",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/wrap-null/src/pages/astro.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/src/pages/astro.astro
similarity index 78%
rename from packages/astro/test/fixtures/astro-markdown-shiki/wrap-null/src/pages/astro.astro
rename to packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/src/pages/astro.astro
index d3a3493a65e5..89047146848e 100644
--- a/packages/astro/test/fixtures/astro-markdown-shiki/wrap-null/src/pages/astro.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/normal/src/pages/astro.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/package.json b/packages/markdown/component/test/fixtures/astro-markdown-shiki/package.json
new file mode 100644
index 000000000000..876b42a66d73
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-markdown-component-shiki",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/astro.config.mjs
new file mode 100644
index 000000000000..fa208789e50e
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/astro.config.mjs
@@ -0,0 +1,10 @@
+const serendipity = JSON.parse(
+	String.raw`{"name":"Serendipity Morning","type":"light","colors":{"activityBar.activeBorder":"#4E5377","activityBar.background":"#FDFDFE","activityBar.dropBorder":"#D8DAE4","activityBar.foreground":"#4E5377","activityBar.inactiveForeground":"#5F6488","activityBarBadge.background":"#F19A8E","activityBarBadge.foreground":"#FDFDFE","badge.background":"#F19A8E","badge.foreground":"#FDFDFE","banner.background":"#F1F1F4","banner.foreground":"#4E5377","banner.iconForeground":"#5F6488","breadcrumb.activeSelectionForeground":"#F19A8E","breadcrumb.background":"#FDFDFE","breadcrumb.focusForeground":"#5F6488","breadcrumb.foreground":"#8388AD","breadcrumbPicker.background":"#F1F1F4","button.background":"#F19A8E","button.foreground":"#FDFDFE","button.hoverBackground":"#F19A8Ee6","button.secondaryBackground":"#F1F1F4","button.secondaryForeground":"#4E5377","button.secondaryHoverBackground":"#D8DAE4","charts.lines":"#5F6488","charts.foreground":"#4E5377","charts.blue":"#7397DE","charts.green":"#3788BE","charts.orange":"#F19A8E","charts.purple":"#77AAB3","charts.red":"#D26A5D","charts.yellow":"#886CDB","checkbox.background":"#F1F1F4","checkbox.border":"#6e6a8614","checkbox.foreground":"#4E5377","debugExceptionWidget.background":"#F1F1F4","debugExceptionWidget.border":"#6e6a8614","debugIcon.breakpointCurrentStackframeForeground":"#5F6488","debugIcon.breakpointDisabledForeground":"#5F6488","debugIcon.breakpointForeground":"#5F6488","debugIcon.breakpointStackframeForeground":"#5F6488","debugIcon.breakpointUnverifiedForeground":"#5F6488","debugIcon.continueForeground":"#5F6488","debugIcon.disconnectForeground":"#5F6488","debugIcon.pauseForeground":"#5F6488","debugIcon.restartForeground":"#5F6488","debugIcon.startForeground":"#5F6488","debugIcon.stepBackForeground":"#5F6488","debugIcon.stepIntoForeground":"#5F6488","debugIcon.stepOutForeground":"#5F6488","debugIcon.stepOverForeground":"#5F6488","debugIcon.stopForeground":"#D26A5D","debugToolBar.background":"#F1F1F4","debugToolBar.border":"#D8DAE4","descriptionForeground":"#5F6488","diffEditor.border":"#D8DAE4","diffEditor.diagonalFill":"#6e6a8626","diffEditor.insertedTextBackground":"#7397DE14","diffEditor.insertedTextBorder":"#7397DE80","diffEditor.removedTextBackground":"#D26A5D14","diffEditor.removedTextBorder":"#D26A5D80","dropdown.background":"#F1F1F4","dropdown.border":"#6e6a8614","dropdown.foreground":"#4E5377","dropdown.listBackground":"#F1F1F4","editor.background":"#FDFDFE","editor.findMatchBackground":"#6e6a8626","editor.findMatchHighlightBackground":"#6e6a8626","editor.findRangeHighlightBackground":"#6e6a8626","editor.findRangeHighlightBorder":"#0000","editor.focusedStackFrameHighlightBackground":"#6e6a8614","editor.foldBackground":"#F1F1F4","editor.foreground":"#4E5377","editor.hoverHighlightBackground":"#0000","editor.inactiveSelectionBackground":"#6e6a860d","editor.inlineValuesBackground":"#0000","editor.inlineValuesForeground":"#5F6488","editor.lineHighlightBackground":"#6e6a860d","editor.lineHighlightBorder":"#0000","editor.linkedEditingBackground":"#F1F1F4","editor.rangeHighlightBackground":"#6e6a860d","editor.rangeHighlightBorder":"#0000","editor.selectionBackground":"#6e6a8614","editor.selectionForeground":"#4E5377","editor.selectionHighlightBackground":"#6e6a8614","editor.selectionHighlightBorder":"#0000","editor.snippetFinalTabstopHighlightBackground":"#6e6a8614","editor.snippetFinalTabstopHighlightBorder":"#F1F1F4","editor.snippetTabstopHighlightBackground":"#6e6a8614","editor.snippetTabstopHighlightBorder":"#F1F1F4","editor.stackFrameHighlightBackground":"#6e6a8614","editor.symbolHighlightBackground":"#6e6a8614","editor.symbolHighlightBorder":"#0000","editor.wordHighlightBackground":"#6e6a8614","editor.wordHighlightBorder":"#0000","editor.wordHighlightStrongBackground":"#6e6a8614","editor.wordHighlightStrongBorder":"#6e6a8614","editorBracketHighlight.foreground1":"#D26A5D80","editorBracketHighlight.foreground2":"#3788BE80","editorBracketHighlight.foreground3":"#886CDB80","editorBracketHighlight.foreground4":"#7397DE80","editorBracketHighlight.foreground5":"#F19A8E80","editorBracketHighlight.foreground6":"#77AAB380","editorBracketMatch.background":"#0000","editorBracketMatch.border":"#5F6488","editorBracketPairGuide.activeBackground1":"#3788BE","editorBracketPairGuide.activeBackground2":"#F19A8E","editorBracketPairGuide.activeBackground3":"#77AAB3","editorBracketPairGuide.activeBackground4":"#7397DE","editorBracketPairGuide.activeBackground5":"#886CDB","editorBracketPairGuide.activeBackground6":"#D26A5D","editorBracketPairGuide.background1":"#3788BE80","editorBracketPairGuide.background2":"#F19A8E80","editorBracketPairGuide.background3":"#77AAB380","editorBracketPairGuide.background4":"#7397DE80","editorBracketPairGuide.background5":"#886CDB80","editorBracketPairGuide.background6":"#D26A5D80","editorCodeLens.foreground":"#F19A8E","editorCursor.background":"#4E5377","editorCursor.foreground":"#8388AD","editorError.border":"#0000","editorError.foreground":"#D26A5D","editorGhostText.foreground":"#5F6488","editorGroup.border":"#0000","editorGroup.dropBackground":"#F1F1F4","editorGroup.emptyBackground":"#0000","editorGroup.focusedEmptyBorder":"#0000","editorGroupHeader.noTabsBackground":"#0000","editorGroupHeader.tabsBackground":"#0000","editorGroupHeader.tabsBorder":"#0000","editorGutter.addedBackground":"#7397DE","editorGutter.background":"#0000","editorGutter.commentRangeForeground":"#5F6488","editorGutter.deletedBackground":"#D26A5D","editorGutter.foldingControlForeground":"#77AAB3","editorGutter.modifiedBackground":"#F19A8E","editorHint.border":"#0000","editorHint.foreground":"#5F6488","editorHoverWidget.background":"#F1F1F4","editorHoverWidget.border":"#8388AD80","editorHoverWidget.foreground":"#5F6488","editorHoverWidget.highlightForeground":"#4E5377","editorHoverWidget.statusBarBackground":"#0000","editorIndentGuide.activeBackground":"#8388AD","editorIndentGuide.background":"#6e6a8626","editorInfo.border":"#D8DAE4","editorInfo.foreground":"#7397DE","editorInlayHint.background":"#D8DAE4","editorInlayHint.foreground":"#5F6488","editorInlayHint.parameterBackground":"#D8DAE4","editorInlayHint.parameterForeground":"#77AAB3","editorInlayHint.typeBackground":"#D8DAE4","editorInlayHint.typeForeground":"#7397DE","editorLightBulb.foreground":"#3788BE","editorLightBulbAutoFix.foreground":"#F19A8E","editorLineNumber.activeForeground":"#4E5377","editorLineNumber.foreground":"#5F6488","editorLink.activeForeground":"#F19A8E","editorMarkerNavigation.background":"#F1F1F4","editorMarkerNavigationError.background":"#F1F1F4","editorMarkerNavigationInfo.background":"#F1F1F4","editorMarkerNavigationWarning.background":"#F1F1F4","editorOverviewRuler.addedForeground":"#7397DE80","editorOverviewRuler.background":"#FDFDFE","editorOverviewRuler.border":"#6e6a8626","editorOverviewRuler.bracketMatchForeground":"#5F6488","editorOverviewRuler.commonContentForeground":"#6e6a860d","editorOverviewRuler.currentContentForeground":"#6e6a8614","editorOverviewRuler.deletedForeground":"#D26A5D80","editorOverviewRuler.errorForeground":"#D26A5D80","editorOverviewRuler.findMatchForeground":"#6e6a8626","editorOverviewRuler.incomingContentForeground":"#77AAB380","editorOverviewRuler.infoForeground":"#7397DE80","editorOverviewRuler.modifiedForeground":"#F19A8E80","editorOverviewRuler.rangeHighlightForeground":"#6e6a8626","editorOverviewRuler.selectionHighlightForeground":"#6e6a8626","editorOverviewRuler.warningForeground":"#886CDB80","editorOverviewRuler.wordHighlightForeground":"#6e6a8614","editorOverviewRuler.wordHighlightStrongForeground":"#6e6a8626","editorPane.background":"#0000","editorRuler.foreground":"#6e6a8626","editorSuggestWidget.background":"#F1F1F4","editorSuggestWidget.border":"#0000","editorSuggestWidget.focusHighlightForeground":"#F19A8E","editorSuggestWidget.foreground":"#5F6488","editorSuggestWidget.highlightForeground":"#F19A8E","editorSuggestWidget.selectedBackground":"#6e6a8614","editorSuggestWidget.selectedForeground":"#4E5377","editorSuggestWidget.selectedIconForeground":"#4E5377","editorUnnecessaryCode.border":"#0000","editorUnnecessaryCode.opacity":"#00000080","editorWarning.border":"#0000","editorWarning.foreground":"#886CDB","editorWhitespace.foreground":"#8388AD","editorWidget.background":"#F1F1F4","editorWidget.border":"#D8DAE4","editorWidget.foreground":"#5F6488","editorWidget.resizeBorder":"#8388AD","errorForeground":"#D26A5D","extensionBadge.remoteBackground":"#77AAB3","extensionBadge.remoteForeground":"#FDFDFE","extensionButton.prominentBackground":"#F19A8E","extensionButton.prominentForeground":"#FDFDFE","extensionButton.prominentHoverBackground":"#F19A8Ee6","extensionIcon.starForeground":"#F19A8E","extensionIcon.verifiedForeground":"#77AAB3","focusBorder":"#6e6a8614","foreground":"#4E5377","gitDecoration.addedResourceForeground":"#7397DE","gitDecoration.conflictingResourceForeground":"#D26A5D","gitDecoration.deletedResourceForeground":"#5F6488","gitDecoration.ignoredResourceForeground":"#8388AD","gitDecoration.modifiedResourceForeground":"#F19A8E","gitDecoration.renamedResourceForeground":"#3788BE","gitDecoration.stageDeletedResourceForeground":"#D26A5D","gitDecoration.stageModifiedResourceForeground":"#77AAB3","gitDecoration.submoduleResourceForeground":"#886CDB","gitDecoration.untrackedResourceForeground":"#886CDB","icon.foreground":"#5F6488","input.background":"#D8DAE480","input.border":"#6e6a8614","input.foreground":"#4E5377","input.placeholderForeground":"#5F6488","inputOption.activeBackground":"#F19A8E","inputOption.activeBorder":"#0000","inputOption.activeForeground":"#FDFDFE","inputValidation.errorBackground":"#0000","inputValidation.errorBorder":"#0000","inputValidation.errorForeground":"#D26A5D","inputValidation.infoBackground":"#0000","inputValidation.infoBorder":"#0000","inputValidation.infoForeground":"#7397DE","inputValidation.warningBackground":"#0000","inputValidation.warningBorder":"#0000","inputValidation.warningForeground":"#7397DE80","keybindingLabel.background":"#D8DAE4","keybindingLabel.border":"#6e6a8626","keybindingLabel.bottomBorder":"#6e6a8626","keybindingLabel.foreground":"#77AAB3","keybindingTable.headerBackground":"#D8DAE4","keybindingTable.rowsBackground":"#F1F1F4","list.activeSelectionBackground":"#6e6a8614","list.activeSelectionForeground":"#4E5377","list.activeSelectionIconForeground":"#4E5377","list.deemphasizedForeground":"#5F6488","list.dropBackground":"#F1F1F4","list.errorForeground":"#D26A5D","list.filterMatchBackground":"#F1F1F4","list.filterMatchBorder":"#F19A8E","list.focusBackground":"#6e6a8626","list.focusForeground":"#4E5377","list.focusOutline":"#6e6a8614","list.highlightForeground":"#F19A8E","list.hoverBackground":"#6e6a860d","list.hoverForeground":"#4E5377","list.inactiveFocusBackground":"#6e6a860d","list.inactiveSelectionBackground":"#F1F1F4","list.inactiveSelectionForeground":"#4E5377","list.inactiveSelectionIconForeground":"#5F6488","list.invalidItemForeground":"#D26A5D","list.warningForeground":"#886CDB","listFilterWidget.background":"#F1F1F4","listFilterWidget.noMatchesOutline":"#D26A5D","listFilterWidget.outline":"#D8DAE4","menu.background":"#F1F1F4","menu.border":"#6e6a860d","menu.foreground":"#4E5377","menu.selectionBackground":"#6e6a8614","menu.selectionBorder":"#D8DAE4","menu.selectionForeground":"#4E5377","menu.separatorBackground":"#4E5377","menubar.selectionBackground":"#6e6a8614","menubar.selectionBorder":"#6e6a860d","menubar.selectionForeground":"#4E5377","merge.border":"#D8DAE4","merge.commonContentBackground":"#6e6a8614","merge.commonHeaderBackground":"#6e6a8614","merge.currentContentBackground":"#886CDB80","merge.currentHeaderBackground":"#886CDB80","merge.incomingContentBackground":"#7397DE80","merge.incomingHeaderBackground":"#7397DE80","minimap.background":"#F1F1F4","minimap.errorHighlight":"#D26A5D80","minimap.findMatchHighlight":"#6e6a8614","minimap.selectionHighlight":"#6e6a8614","minimap.warningHighlight":"#886CDB80","minimapGutter.addedBackground":"#7397DE","minimapGutter.deletedBackground":"#D26A5D","minimapGutter.modifiedBackground":"#F19A8E","minimapSlider.activeBackground":"#6e6a8626","minimapSlider.background":"#6e6a8614","minimapSlider.hoverBackground":"#6e6a8614","notificationCenter.border":"#6e6a8614","notificationCenterHeader.background":"#F1F1F4","notificationCenterHeader.foreground":"#5F6488","notificationLink.foreground":"#77AAB3","notifications.background":"#F1F1F4","notifications.border":"#6e6a8614","notifications.foreground":"#4E5377","notificationsErrorIcon.foreground":"#D26A5D","notificationsInfoIcon.foreground":"#7397DE","notificationsWarningIcon.foreground":"#886CDB","notificationToast.border":"#6e6a8614","panel.background":"#F1F1F4","panel.border":"#0000","panel.dropBorder":"#D8DAE4","panelInput.border":"#F1F1F4","panelSection.dropBackground":"#6e6a8614","panelSectionHeader.background":"#F1F1F4","panelSectionHeader.foreground":"#4E5377","panelTitle.activeBorder":"#6e6a8626","panelTitle.activeForeground":"#4E5377","panelTitle.inactiveForeground":"#5F6488","peekView.border":"#D8DAE4","peekViewEditor.background":"#F1F1F4","peekViewEditor.matchHighlightBackground":"#6e6a8626","peekViewResult.background":"#F1F1F4","peekViewResult.fileForeground":"#5F6488","peekViewResult.lineForeground":"#5F6488","peekViewResult.matchHighlightBackground":"#6e6a8626","peekViewResult.selectionBackground":"#6e6a8614","peekViewResult.selectionForeground":"#4E5377","peekViewTitle.background":"#D8DAE4","peekViewTitleDescription.foreground":"#5F6488","pickerGroup.border":"#6e6a8626","pickerGroup.foreground":"#77AAB3","ports.iconRunningProcessForeground":"#F19A8E","problemsErrorIcon.foreground":"#D26A5D","problemsInfoIcon.foreground":"#7397DE","problemsWarningIcon.foreground":"#886CDB","progressBar.background":"#F19A8E","quickInput.background":"#F1F1F4","quickInput.foreground":"#5F6488","quickInputList.focusBackground":"#6e6a8614","quickInputList.focusForeground":"#4E5377","quickInputList.focusIconForeground":"#4E5377","scrollbar.shadow":"#0000","scrollbarSlider.activeBackground":"#6e6a8626","scrollbarSlider.background":"#6e6a860d","scrollbarSlider.hoverBackground":"#6e6a8614","searchEditor.findMatchBackground":"#6e6a8614","selection.background":"#6e6a8626","settings.focusedRowBackground":"#F1F1F4","settings.headerForeground":"#4E5377","settings.modifiedItemIndicator":"#F19A8E","settings.focusedRowBorder":"#6e6a8614","settings.rowHoverBackground":"#F1F1F4","sideBar.background":"#FDFDFE","sideBar.dropBackground":"#F1F1F4","sideBar.foreground":"#5F6488","sideBarSectionHeader.background":"#0000","sideBarSectionHeader.border":"#6e6a8614","statusBar.background":"#FDFDFE","statusBar.debuggingBackground":"#77AAB3","statusBar.debuggingForeground":"#FDFDFE","statusBar.foreground":"#5F6488","statusBar.noFolderBackground":"#FDFDFE","statusBar.noFolderForeground":"#5F6488","statusBarItem.activeBackground":"#6e6a8626","statusBarItem.hoverBackground":"#6e6a8614","statusBarItem.prominentBackground":"#D8DAE4","statusBarItem.prominentForeground":"#4E5377","statusBarItem.prominentHoverBackground":"#6e6a8614","statusBarItem.remoteBackground":"#FDFDFE","statusBarItem.remoteForeground":"#886CDB","statusBarItem.errorBackground":"#FDFDFE","statusBarItem.errorForeground":"#D26A5D","symbolIcon.arrayForeground":"#5F6488","symbolIcon.classForeground":"#5F6488","symbolIcon.colorForeground":"#5F6488","symbolIcon.constantForeground":"#5F6488","symbolIcon.constructorForeground":"#5F6488","symbolIcon.enumeratorForeground":"#5F6488","symbolIcon.enumeratorMemberForeground":"#5F6488","symbolIcon.eventForeground":"#5F6488","symbolIcon.fieldForeground":"#5F6488","symbolIcon.fileForeground":"#5F6488","symbolIcon.folderForeground":"#5F6488","symbolIcon.functionForeground":"#5F6488","symbolIcon.interfaceForeground":"#5F6488","symbolIcon.keyForeground":"#5F6488","symbolIcon.keywordForeground":"#5F6488","symbolIcon.methodForeground":"#5F6488","symbolIcon.moduleForeground":"#5F6488","symbolIcon.namespaceForeground":"#5F6488","symbolIcon.nullForeground":"#5F6488","symbolIcon.numberForeground":"#5F6488","symbolIcon.objectForeground":"#5F6488","symbolIcon.operatorForeground":"#5F6488","symbolIcon.packageForeground":"#5F6488","symbolIcon.propertyForeground":"#5F6488","symbolIcon.referenceForeground":"#5F6488","symbolIcon.snippetForeground":"#5F6488","symbolIcon.stringForeground":"#5F6488","symbolIcon.structForeground":"#5F6488","symbolIcon.textForeground":"#5F6488","symbolIcon.typeParameterForeground":"#5F6488","symbolIcon.unitForeground":"#5F6488","symbolIcon.variableForeground":"#5F6488","tab.activeBackground":"#6e6a860d","tab.activeForeground":"#4E5377","tab.activeModifiedBorder":"#7397DE","tab.border":"#0000","tab.hoverBackground":"#6e6a8614","tab.inactiveBackground":"#0000","tab.inactiveForeground":"#5F6488","tab.inactiveModifiedBorder":"#7397DE80","tab.lastPinnedBorder":"#8388AD","tab.unfocusedActiveBackground":"#0000","tab.unfocusedHoverBackground":"#0000","tab.unfocusedInactiveBackground":"#0000","tab.unfocusedInactiveModifiedBorder":"#7397DE80","terminal.ansiWhite":"#4E5377","terminal.ansiBrightWhite":"#4E5377","terminal.ansiBlack":"#D8DAE4","terminal.ansiBrightBlack":"#5F6488","terminal.ansiBlue":"#7397DE","terminal.ansiBrightBlue":"#7397DE","terminal.ansiCyan":"#F19A8E","terminal.ansiBrightCyan":"#F19A8E","terminal.ansiGreen":"#3788BE","terminal.ansiBrightGreen":"#3788BE","terminal.ansiMagenta":"#77AAB3","terminal.ansiBrightMagenta":"#77AAB3","terminal.ansiRed":"#D26A5D","terminal.ansiBrightRed":"#D26A5D","terminal.ansiBrightYellow":"#886CDB","terminal.ansiYellow":"#886CDB","terminal.dropBackground":"#6e6a8614","terminal.foreground":"#4E5377","terminal.selectionBackground":"#6e6a8614","terminal.tab.activeBorder":"#4E5377","terminalCursor.background":"#4E5377","terminalCursor.foreground":"#8388AD","textBlockQuote.background":"#F1F1F4","textBlockQuote.border":"#6e6a8614","textCodeBlock.background":"#F1F1F4","textLink.activeForeground":"#77AAB3e6","textLink.foreground":"#77AAB3","textPreformat.foreground":"#886CDB","textSeparator.foreground":"#5F6488","titleBar.activeBackground":"#FDFDFE","titleBar.activeForeground":"#5F6488","titleBar.inactiveBackground":"#F1F1F4","titleBar.inactiveForeground":"#5F6488","toolbar.activeBackground":"#6e6a8626","toolbar.hoverBackground":"#6e6a8614","tree.indentGuidesStroke":"#5F6488","walkThrough.embeddedEditorBackground":"#FDFDFE","welcomePage.background":"#FDFDFE","welcomePage.buttonBackground":"#F1F1F4","welcomePage.buttonHoverBackground":"#D8DAE4","widget.shadow":"#D8DAE44d","window.activeBorder":"#F1F1F4","window.inactiveBorder":"#F1F1F4"},"tokenColors":[{"scope":["comment"],"settings":{"foreground":"#8388AD","fontStyle":"italic"}},{"scope":["constant"],"settings":{"foreground":"#3788BE"}},{"scope":["constant.numeric","constant.language","constant.charcter.escape"],"settings":{"foreground":"#F19A8E"}},{"scope":["entity.name"],"settings":{"foreground":"#F19A8E"}},{"scope":["entity.name.section","entity.name.tag","entity.name.namespace","entity.name.type"],"settings":{"foreground":"#7397DE"}},{"scope":["entity.other.attribute-name","entity.other.inherited-class"],"settings":{"foreground":"#77AAB3","fontStyle":"italic"}},{"scope":["invalid"],"settings":{"foreground":"#D26A5D"}},{"scope":["invalid.deprecated"],"settings":{"foreground":"#5F6488"}},{"scope":["keyword"],"settings":{"foreground":"#3788BE"}},{"scope":["meta.tag","meta.brace"],"settings":{"foreground":"#4E5377"}},{"scope":["meta.import","meta.export"],"settings":{"foreground":"#3788BE"}},{"scope":"meta.directive.vue","settings":{"foreground":"#77AAB3","fontStyle":"italic"}},{"scope":"meta.property-name.css","settings":{"foreground":"#7397DE"}},{"scope":"meta.property-value.css","settings":{"foreground":"#886CDB"}},{"scope":"meta.tag.other.html","settings":{"foreground":"#5F6488"}},{"scope":["punctuation"],"settings":{"foreground":"#5F6488"}},{"scope":["punctuation.accessor"],"settings":{"foreground":"#3788BE"}},{"scope":["punctuation.definition.string"],"settings":{"foreground":"#886CDB"}},{"scope":["punctuation.definition.tag"],"settings":{"foreground":"#8388AD"}},{"scope":["storage.type","storage.modifier"],"settings":{"foreground":"#3788BE"}},{"scope":["string"],"settings":{"foreground":"#886CDB"}},{"scope":["support"],"settings":{"foreground":"#7397DE"}},{"scope":["support.constant"],"settings":{"foreground":"#886CDB"}},{"scope":["support.function"],"settings":{"foreground":"#D26A5D","fontStyle":"italic"}},{"scope":["variable"],"settings":{"foreground":"#F19A8E","fontStyle":"italic"}},{"scope":["variable.other","variable.language","variable.function","variable.argument"],"settings":{"foreground":"#4E5377"}},{"scope":["variable.parameter"],"settings":{"foreground":"#77AAB3"}}]}`
+);
+
+export default {
+	markdown: {
+		syntaxHighlight: 'shiki',
+		shikiConfig: { theme: serendipity },
+	},
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/package.json b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/package.json
new file mode 100644
index 000000000000..fd2a6e55f749
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-markdown-skiki-themes-custom",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/astro.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/src/pages/astro.astro
similarity index 75%
rename from packages/astro/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/astro.astro
rename to packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/src/pages/astro.astro
index ccb606caf0ca..ec99141e10e1 100644
--- a/packages/astro/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/astro.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-custom/src/pages/astro.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/astro.config.mjs
new file mode 100644
index 000000000000..7ddfeeb16cbc
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/astro.config.mjs
@@ -0,0 +1,6 @@
+export default {
+	markdown: {
+		syntaxHighlight: 'shiki',
+		shikiConfig: { theme: 'github-light' },
+	},
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/package.json b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/package.json
new file mode 100644
index 000000000000..b4c6525511e5
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-markdown-skiki-themes-integrated",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/themes-custom/src/pages/astro.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/astro.astro
similarity index 75%
rename from packages/astro/test/fixtures/astro-markdown-shiki/themes-custom/src/pages/astro.astro
rename to packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/astro.astro
index ccb606caf0ca..ec99141e10e1 100644
--- a/packages/astro/test/fixtures/astro-markdown-shiki/themes-custom/src/pages/astro.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/astro.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/index.md b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/index.md
new file mode 100644
index 000000000000..a75170537cce
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/themes-integrated/src/pages/index.md
@@ -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
+```
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/astro.config.mjs
new file mode 100644
index 000000000000..e95742529e96
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/astro.config.mjs
@@ -0,0 +1,6 @@
+export default {
+	markdown: {
+		syntaxHighlight: 'shiki',
+		shikiConfig: { wrap: false },
+	},
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/package.json b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/package.json
new file mode 100644
index 000000000000..13fd7a90a2d2
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-markdown-skiki-wrap-false",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/wrap-false/src/pages/astro.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/src/pages/astro.astro
similarity index 78%
rename from packages/astro/test/fixtures/astro-markdown-shiki/wrap-false/src/pages/astro.astro
rename to packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/src/pages/astro.astro
index d3a3493a65e5..89047146848e 100644
--- a/packages/astro/test/fixtures/astro-markdown-shiki/wrap-false/src/pages/astro.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-false/src/pages/astro.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/astro.config.mjs
new file mode 100644
index 000000000000..b1fa06335add
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/astro.config.mjs
@@ -0,0 +1,6 @@
+export default {
+	markdown: {
+		syntaxHighlight: 'shiki',
+		shikiConfig: { wrap: null },
+	},
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/package.json b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/package.json
new file mode 100644
index 000000000000..6e1b2e8e6c50
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-markdown-skiki-wrap-null",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/wrap-true/src/pages/astro.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/src/pages/astro.astro
similarity index 78%
rename from packages/astro/test/fixtures/astro-markdown-shiki/wrap-true/src/pages/astro.astro
rename to packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/src/pages/astro.astro
index d3a3493a65e5..89047146848e 100644
--- a/packages/astro/test/fixtures/astro-markdown-shiki/wrap-true/src/pages/astro.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-null/src/pages/astro.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/astro.config.mjs
new file mode 100644
index 000000000000..0e95f569bbf1
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/astro.config.mjs
@@ -0,0 +1,6 @@
+export default {
+	markdown: {
+		syntaxHighlight: 'shiki',
+		shikiConfig: { wrap: true },
+	},
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/package.json b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/package.json
new file mode 100644
index 000000000000..e51b0a746fdf
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@test/astro-markdown-skiki-wrap-true",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/normal/src/pages/astro.astro b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/src/pages/astro.astro
similarity index 78%
rename from packages/astro/test/fixtures/astro-markdown-shiki/normal/src/pages/astro.astro
rename to packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/src/pages/astro.astro
index d3a3493a65e5..89047146848e 100644
--- a/packages/astro/test/fixtures/astro-markdown-shiki/normal/src/pages/astro.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown-shiki/wrap-true/src/pages/astro.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/astro.config.mjs b/packages/markdown/component/test/fixtures/astro-markdown/astro.config.mjs
new file mode 100644
index 000000000000..be33a26cced0
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/astro.config.mjs
@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import svelte from "@astrojs/svelte";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [preact(), svelte()],
+  site: 'https://astro.build/',
+});
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/package.json b/packages/markdown/component/test/fixtures/astro-markdown/package.json
new file mode 100644
index 000000000000..a5864786e9cc
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@test/astro-markdown-component",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/preact": "workspace:*",
+    "@astrojs/svelte": "workspace:*",
+    "@astrojs/markdown-component": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/components/Counter.jsx b/packages/markdown/component/test/fixtures/astro-markdown/src/components/Counter.jsx
new file mode 100644
index 000000000000..a75f858b518b
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/components/Counter.jsx
@@ -0,0 +1,7 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+
+export default function () {
+  const [count, setCount] = useState(0);
+  return ;
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/components/Example.jsx b/packages/markdown/component/test/fixtures/astro-markdown/src/components/Example.jsx
new file mode 100644
index 000000000000..e1f67ee506f4
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/components/Example.jsx
@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+export default function () {
+  return 
Testing
;
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/components/Hello.jsx b/packages/markdown/component/test/fixtures/astro-markdown/src/components/Hello.jsx
new file mode 100644
index 000000000000..d30dec516e9e
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/components/Hello.jsx
@@ -0,0 +1,5 @@
+import { h } from 'preact';
+
+export default function ({ name }) {
+  return 
Hello {name}
;
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/components/SlotComponent.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/components/SlotComponent.astro
new file mode 100644
index 000000000000..f0aa9fc1c457
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/components/SlotComponent.astro
@@ -0,0 +1,13 @@
+

+	

+		❌ Missing content for slot "fragmentSlot"
+	

+
+	

+		❌ Missing content for slot "pSlot"
+	

+
+	

+		❌ Missing content for default slot
+	

+

diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/components/SvelteButton.svelte b/packages/markdown/component/test/fixtures/astro-markdown/src/components/SvelteButton.svelte
new file mode 100644
index 000000000000..74f3ff6a9c75
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/components/SvelteButton.svelte
@@ -0,0 +1,11 @@
+
+
+
+
+
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/components/TextBlock.jsx b/packages/markdown/component/test/fixtures/astro-markdown/src/components/TextBlock.jsx
new file mode 100644
index 000000000000..d9ea2534fec2
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/components/TextBlock.jsx
@@ -0,0 +1,20 @@
+import { h } from 'preact';
+
+const TextBlock = ({
+  title,
+  children,
+  noPadding = false,
+}) => {
+  return (
+    

+      
{title}

+      
{children}

+    

+  );
+};
+
+export default TextBlock;
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/components/index.js b/packages/markdown/component/test/fixtures/astro-markdown/src/components/index.js
new file mode 100644
index 000000000000..e7cc94c588f2
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/components/index.js
@@ -0,0 +1,5 @@
+import Counter from './Counter';
+
+export default {
+	Counter
+}
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/content/code-element.md b/packages/markdown/component/test/fixtures/astro-markdown/src/content/code-element.md
new file mode 100644
index 000000000000..b091decc0ffc
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/content/code-element.md
@@ -0,0 +1,3 @@
+This should have `nospace` around it.
+
+This should have nospace around it.
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/imported-md/plain.md b/packages/markdown/component/test/fixtures/astro-markdown/src/imported-md/plain.md
new file mode 100644
index 000000000000..d548b3356b65
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/imported-md/plain.md
@@ -0,0 +1,6 @@
+---
+---
+
+## Plain jane
+
+I am plain markdown!
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/imported-md/with-components.md b/packages/markdown/component/test/fixtures/astro-markdown/src/imported-md/with-components.md
new file mode 100644
index 000000000000..dc6c23bf9c19
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/imported-md/with-components.md
@@ -0,0 +1,17 @@
+---
+setup: |
+  import Counter from '../components/Counter.jsx'
+  import Hello from '../components/Hello.jsx'
+  import SvelteButton from '../components/SvelteButton.svelte'
+---
+
+## With components
+
+### Non-hydrated
+
+
+
+### Hydrated
+
+
+
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/layouts/content.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/layouts/content.astro
new file mode 100644
index 000000000000..925a243a9368
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/layouts/content.astro
@@ -0,0 +1,10 @@
+
+  
+    
+  
+  
+    

+      
+    

+  
+
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/layouts/layout-props.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/layouts/layout-props.astro
new file mode 100644
index 000000000000..a11abb8fb5d1
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/layouts/layout-props.astro
@@ -0,0 +1,17 @@
+---
+  interface Props {
+    url: string;
+    file: string;
+    title: string;
+  }
+
+  const { title, url, file } = Astro.props.content as Props;
+---
+
+
+  
+    
{title}

+    
{url}

+    
{file}

+  
+
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/braces.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/braces.astro
similarity index 71%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/braces.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/braces.astro
index ee09e44339e4..d92ce6bc3ad4 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/braces.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/braces.astro
@@ -1,10 +1,10 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 const title = 'My Blog Post';
 const description = 'This is a post about some stuff.';
 ---
 
-
+
 	## Interesting Topic
 
 	`({})`
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/children.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/children.md
new file mode 100644
index 000000000000..a22ee5f96148
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/children.md
@@ -0,0 +1,12 @@
+---
+setup: import TextBlock from '../components/TextBlock'
+---
+{/* https://github.com/withastro/astro/issues/3319 */}
+
+
+  
    
+    
  • A
    • 
+    
  • B
    • 
+    
  • C
    • 
+  

+
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/close.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/close.astro
similarity index 77%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/close.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/close.astro
index 1da319c034dd..034d9a31582b 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/close.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/close.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 const content = `Markdown *content* to render`;
 ---
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/code-element.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/code-element.astro
new file mode 100644
index 000000000000..43ca0bfc5a0e
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/code-element.astro
@@ -0,0 +1,7 @@
+---
+const content = await Astro.glob('../content/*.md');
+---
+
+

+	{content.map(({ Content }) => )}
+

diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/code-in-md.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/code-in-md.md
new file mode 100644
index 000000000000..52a799ab1d07
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/code-in-md.md
@@ -0,0 +1,16 @@
+# Inline code blocks
+
+`` tags without any problems.
+
+# Fenced code blocks
+
+```html
+
+	
This should also work without any problems.

+
+```
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/code.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/code.astro
similarity index 77%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/code.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/code.astro
index 9ababd20c870..c3f9af2d324a 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/code.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/code.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 const title = 'My Blog Post';
 const description = 'This is a post about some stuff.';
 ---
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/comment-with-js.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/comment-with-js.md
new file mode 100644
index 000000000000..374463d2db11
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/comment-with-js.md
@@ -0,0 +1,23 @@
+
+
+
+
+```
+
+```
+
+``
+
+# It still works!
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/comment.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/comment.md
new file mode 100644
index 000000000000..39a916351829
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/comment.md
@@ -0,0 +1,2 @@
+
+# It works!
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/complex.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/complex.astro
similarity index 87%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/complex.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/complex.astro
index 79098b4aae4c..37d3807e4125 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/complex.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/complex.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 import Hello from '../components/Hello.jsx';
 import Counter from '../components/Counter.jsx';
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/content.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/content.astro
new file mode 100644
index 000000000000..a90bd8c31d5e
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/content.astro
@@ -0,0 +1,6 @@
+---
+import Markdown from '@astrojs/markdown-component';
+const content = '# Foo';
+---
+
+
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/dash.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/dash.md
new file mode 100644
index 000000000000..269a774f5a6d
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/dash.md
@@ -0,0 +1,14 @@
+---
+title: My Blog Post
+layout: ../layouts/content.astro
+---
+
+## Title
+
+Hello world
+
+With this in the body ---
+
+## Another
+
+more content
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/deep.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/deep.astro
similarity index 89%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/deep.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/deep.astro
index 96b3897e1287..32117a505306 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/deep.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/deep.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 import Hello from '../components/Hello.jsx';
 import Counter from '../components/Counter.jsx';
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/empty-code.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/empty-code.md
new file mode 100644
index 000000000000..93cb4eedb8a9
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/empty-code.md
@@ -0,0 +1,20 @@
+---
+title: My Blog Post
+layout: ../layouts/content.astro
+---
+
+## Title
+
+Hello world
+
+With this in the body ---
+
+## Another
+
+more content
+
+```
+
+```
+
+

\ No newline at end of file
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/external.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/external.astro
similarity index 78%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/external.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/external.astro
index a3f748497d64..cf6273bceabf 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/external.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/external.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 
 const outer = `# Outer`;
 const inner = `## Inner`;
@@ -16,4 +16,4 @@ const inner = `## Inner`;
 
 		
 	
-
\ No newline at end of file
+
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/imported-md/with-components.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/imported-md/with-components.astro
new file mode 100644
index 000000000000..97cd8f211249
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/imported-md/with-components.astro
@@ -0,0 +1,9 @@
+---
+import Layout from '../../layouts/content.astro'
+
+const posts = await Astro.glob('../../imported-md/*.md')
+---
+
+
+	{posts.map(({ Content }) => )}
+
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/jsx-expressions.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/jsx-expressions.md
new file mode 100644
index 000000000000..b87efbb2d889
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/jsx-expressions.md
@@ -0,0 +1,13 @@
+---
+title: Blog Post with JSX expressions
+paragraph: JSX at the start of the line!
+list: ['test-1', 'test-2', 'test-3']
+---
+
+## {frontmatter.title}
+
+{frontmatter.paragraph}
+
+
    
+  {frontmatter.list.map(item => 
  • {item}
    • )}
+

diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/layout-props.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/layout-props.md
new file mode 100644
index 000000000000..0f87c1bd0aef
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/layout-props.md
@@ -0,0 +1,4 @@
+---
+title: 'Hello world!'
+layout: '../layouts/layout-props.astro'
+---
\ No newline at end of file
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/namespace.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/namespace.md
new file mode 100644
index 000000000000..abbe26a3b027
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/namespace.md
@@ -0,0 +1,7 @@
+---
+setup: import ns from '../components/index.js';
+---
+
+# Hello Namespace!
+
+Click me!
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/nested-list.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/nested-list.astro
similarity index 91%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/nested-list.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/nested-list.astro
index 32a0f2916f0b..3795f78f7ecb 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/nested-list.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/nested-list.astro
@@ -1,6 +1,6 @@
 ---
 // Component imports and setup JavaScript go here!
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 const content = `
 - list 1
   - list 2
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/no-elements.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/no-elements.astro
new file mode 100644
index 000000000000..aca4e31d5d6f
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/no-elements.astro
@@ -0,0 +1,5 @@
+---
+import Markdown from '@astrojs/markdown-component';
+---
+
+
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/post.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/post.astro
similarity index 85%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/post.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/post.astro
index 9bfcc847cb78..2745edae1486 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/post.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/post.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 import Example from '../components/Example.jsx';
 
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/raw-content.json.js b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/raw-content.json.js
new file mode 100644
index 000000000000..21be533e1020
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/raw-content.json.js
@@ -0,0 +1,10 @@
+import { rawContent, compiledContent } from '../imported-md/with-components.md';
+
+export async function get() {
+	return {
+		body: JSON.stringify({
+			raw: rawContent(),
+			compiled: await compiledContent(),
+		}),
+	}
+}
diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/scopedStyles-code.astro b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/scopedStyles-code.astro
similarity index 78%
rename from packages/astro/test/fixtures/astro-markdown/src/pages/scopedStyles-code.astro
rename to packages/markdown/component/test/fixtures/astro-markdown/src/pages/scopedStyles-code.astro
index 1de76dfe6557..1ee0e357d9fb 100644
--- a/packages/astro/test/fixtures/astro-markdown/src/pages/scopedStyles-code.astro
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/scopedStyles-code.astro
@@ -1,5 +1,5 @@
 ---
-import { Markdown } from 'astro/components';
+import Markdown from '@astrojs/markdown-component';
 import Layout from '../layouts/content.astro';
 
 ---
@@ -18,4 +18,4 @@ import Layout from '../layouts/content.astro';
 			```
 		
 	
-
\ No newline at end of file
+
diff --git a/packages/markdown/component/test/fixtures/astro-markdown/src/pages/script.md b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/script.md
new file mode 100644
index 000000000000..f2b8bca88293
--- /dev/null
+++ b/packages/markdown/component/test/fixtures/astro-markdown/src/pages/script.md
@@ -0,0 +1,7 @@
+# Test
+
+## Let's try a script...
+
+This should work!
+
+