diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2022-07-21 16:43:58 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-07-21 16:43:58 -0400 |
| commit | 3b8a7445247221100462ba035f6778b43ea180e7 (patch) | |
| tree | c242680269c56ef20c121097432c6874bf5a2d03 /examples/with-mdx/src | |
| parent | 3f7b5f155e85dc28b7fc95e4386a304aa9e80cdd (diff) | |
| download | astro-3b8a7445247221100462ba035f6778b43ea180e7.tar.gz astro-3b8a7445247221100462ba035f6778b43ea180e7.tar.zst astro-3b8a7445247221100462ba035f6778b43ea180e7.zip | |
[MDX] Add Prism and Shiki support (#4002)
* deps: add rehype-prism, shiki, rehype-pretty-code
* wip: apply rehype plugins depending on config
* wip: cherry-pick jsx-runtime fix?
* deps: rehype-pretty-code -> shiki-twoslash, add rehype-raw
* wip: add jsx-runtime fix
* feat: get shiki working!
* deps: add @astrojs/prism, prismjs, unist-util-visit
* feat: add prism support
* example: add small syntax highlight demo to with-mdx
* deps: remove rehype-prism
* chore: remove unused async
* chore: add .test.js to all mdx tests
* test: shiki, shikiConfig, prism
* fix: remove "is:raw" from prism output
* docs: add syntax highlighting section
* chore: add changeset
* nit: "Shiki config" -> Shiki config
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
* Revert "wip: add jsx-runtime fix"
This reverts commit 07f4528f449281afb7bbc154b09292244795a183.
* docs: link to integration README from example
Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Diffstat (limited to 'examples/with-mdx/src')
| -rw-r--r-- | examples/with-mdx/src/pages/index.mdx | 12 |
1 files changed, 12 insertions, 0 deletions
diff --git a/examples/with-mdx/src/pages/index.mdx b/examples/with-mdx/src/pages/index.mdx index 84c9cc5fd..b93def233 100644 --- a/examples/with-mdx/src/pages/index.mdx +++ b/examples/with-mdx/src/pages/index.mdx @@ -15,3 +15,15 @@ Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}. Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}. <Counter client:idle>This is a **counter**!</Counter> + +## Syntax highlighting + +We also support syntax highlighting in MDX out-of-the-box! This example uses our default [Shiki theme](https://github.com/shikijs/shiki). See the [MDX integration docs](https://docs.astro.build/en/guides/integrations-guide/mdx/#syntax-highlighting) for configuration options. + +```astro +--- +const weSupportAstro = true +--- + +<h1>Hey, what theme is that? Looks nice!</h1> +``` |