Add new <Code> component, to succeed <Prism>

[FredKSchott]

Changes

• Adds a new <Code> component, similar to <Prism>
• Powered internally by shiki
• RFC: 💡 RFC: Replace Prism with Shiki #1212
• Bonus: Reimplements Debug component to use Code internally, removing the problem of CSS getting added to the page incorrectly! Moves Debug back to import {Debug} from 'astro/components'; with a nice backwards-compat deprecation message for anyone still using the old import URL.

Testing

• Tests added.

Docs

• Docs updated.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2f0c73c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
astro	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

astro-www – ./www

🔍 Inspect: https://vercel.com/pikapkg/astro-www/ELGi2hZ3W19nd1b9Vb4jYLvrt7tX
✅ Preview: https://astro-www-git-new-code-component-pikapkg.vercel.app

astro-docs – ./docs

🔍 Inspect: https://vercel.com/pikapkg/astro-docs/6n452e1sTKAHGSuQ4TaMKaDpVQQy
✅ Preview: https://astro-docs-git-new-code-component-pikapkg.vercel.app

[jasikpark]

Could you add a link to the Shiki docs, especially the dark theme docs?

[jasikpark]

Left a comment, otherwise looks pretty great!

[jasikpark]

I want to get the docs site setup with <Code> asap.. would that be via something like remark-shiki?

I think @natemoo-re built a theme for VSCode that we could pull in!

[matthewp]

Just a note that this PR is for the Phase 1 section fo the RFC.

[FredKSchott]

Talked with @matthewp and @natemoo-re today and they convinced me that the Debug change should get pulled out into a separate PR so as not to block the Phase 1 <Code> work that we set out to do.

Will remove and ALSO update shiki to latest which will get our tests passing!

[FredKSchott]

Maybe the docs could show an example of using the debug and code components perhaps?

Docs already added, at builtin-components.md

[FredKSchott]

Fixed the code overflow by default problem and added a new wrap prop to the component which lets you control overflow yourself.

<Code> // Default. overflow-x: auto;
<Code wrap={false}> // overflow-x: auto;
<Code wrap>  // Default: word wrap.
<Code wrap={null}> // no overflow control added. Will most likely overflow.

bug? re-requested review

[jasikpark]

Maybe the docs could show an example of using the debug and code components perhaps?

Docs already added, at builtin-components.md

I forgot to add wanting to show the outputted component w/in the page! both the source & the end result!

[jasikpark]

It'd be really cool to make use of https://github.com/unlight/remark-sources so that we can provide the rendered version of this code example inline with the component!