Markdoc - improve syntax highlighting support (#7209)

* feat: prism and shiki support, with better exports!

* chore: update tests

* chore: fix lock

* chore: add prism test

* chore: remove `async` from prism

* docs: update syntax highlight readme

* chore: changeset

* edit: remove `await` from prism docs

* chore: update old changest with new shiki instructions

* fix: add trailing newline on ts-expect-error

* refactor: resolve promises internally

* docs: remove `await` from shiki examples

1 files changed, 22 insertions, 9 deletions

diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md
index 815f0420b..dd2f2d4de 100644
--- a/packages/integrations/markdoc/README.md
+++ b/packages/integrations/markdoc/README.md
@@ -205,23 +205,20 @@ export default defineMarkdocConfig({
 
 ### Syntax highlighting
 
-`@astrojs/markdoc` provides a [Shiki](https://github.com/shikijs/shiki) extension to highlight your code blocks.
+`@astrojs/markdoc` provides [Shiki](https://github.com/shikijs/shiki) and [Prism](https://github.com/PrismJS) extensions to highlight your code blocks.
 
-To use this extension, you must separately install `shiki` as a dependency:
+#### Shiki
 
-```bash
-npm i shiki
-```
-
-Then, apply the `shiki()` extension to your Markdoc config using the `extends` property. You can optionally pass a shiki configuration object:
+Apply the `shiki()` extension to your Markdoc config using the `extends` property. You can optionally pass a shiki configuration object:
 
 ```js
 // markdoc.config.mjs
-import { defineMarkdocConfig, shiki } from '@astrojs/markdoc/config';
+import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+import shiki from '@astrojs/markdoc/shiki';
 
 export default defineMarkdocConfig({
   extends: [
-    await shiki({
+    shiki({
       // Choose from Shiki's built-in themes (or add your own)
       // Default: 'github-dark'
       // https://github.com/shikijs/shiki/blob/main/docs/themes.md
@@ -238,6 +235,22 @@ export default defineMarkdocConfig({
 })
 ```
 
+#### Prism
+
+Apply the `prism()` extension to your Markdoc config using the `extends` property.
+
+```js
+// markdoc.config.mjs
+import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+import prism from '@astrojs/markdoc/prism';
+
+export default defineMarkdocConfig({
+  extends: [prism()],
+})
+```
+
+📚 To learn about configuring Prism stylesheets, [see our syntax highlighting guide.](https://docs.astro.build/en/guides/markdown-content/#prism-configuration)
+
 ### Access frontmatter and content collection information from your templates
 
 You can access content collection information from your Markdoc templates using the `$entry` variable. This includes the entry `slug`, `collection` name, and frontmatter `data` parsed by your content collection schema (if any). This example renders the `title` frontmatter property as a heading: