Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MDX] Add Prism and Shiki support #4002

Merged
merged 21 commits into from
Jul 21, 2022
Merged

[MDX] Add Prism and Shiki support #4002

merged 21 commits into from
Jul 21, 2022

Conversation

bholmesdev
Copy link
Contributor

@bholmesdev bholmesdev commented Jul 21, 2022

Changes

  • Add a bunch of helper dependencies (most of which already in Astro core!)
    • remark-shiki-twoslash *new
    • shiki
    • @astrojs/prism
    • prismjs
    • rehype-raw
    • unist-util-visit
    • @mdx-js/mdx (used by the rollup plugin already)
  • Apply relevant remark and rehype plugins when shiki is configured
    • pass through shiki config options to remark-shiki-twoslash
  • Apply relevant remark and rehype plugins when prism is configured

Testing

Test Shiki, Shiki config options, and Prism -> mdx-syntax-highlighting.test.js

Docs

Add "Syntax Highlighting" section to README

@changeset-bot
Copy link

changeset-bot bot commented Jul 21, 2022

🦋 Changeset detected

Latest commit: 7ab7794

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

This PR includes changesets to release 5 packages
Name Type
@astrojs/mdx Minor
@e2e/preact-component Patch
@e2e/react-component Patch
@e2e/solid-component Patch
@e2e/svelte-component 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

@github-actions github-actions bot added pkg: astro Related to the core `astro` package (scope) pkg: example Related to an example package (scope) pkg: integration Related to any renderer integration (scope) labels Jul 21, 2022
if (key === 'className') {
return markHTMLString(` class="${toAttributeString(value, shouldEscape)}"`);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TODO: remove changes when blocking draft PR is ready!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bholmesdev should be good to remove this now!

@bholmesdev bholmesdev marked this pull request as draft July 21, 2022 14:15
@@ -134,6 +134,42 @@ const posts = await Astro.glob('./*.mdx');
))}
```

### Syntax highlighting
Copy link
Contributor Author

@bholmesdev bholmesdev Jul 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tagging @sarah11918 for proofing!

@bholmesdev bholmesdev marked this pull request as ready for review July 21, 2022 14:47
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
@okikio
Copy link
Member

okikio commented Jul 21, 2022

YESSSSSSS, LETTTSS GOOOOOOO

examples/with-mdx/src/pages/index.mdx Outdated Show resolved Hide resolved
@github-actions github-actions bot removed the pkg: astro Related to the core `astro` package (scope) label Jul 21, 2022
@bholmesdev bholmesdev merged commit 3b8a744 into main Jul 21, 2022
@bholmesdev bholmesdev deleted the feat/mdx-shiki branch July 21, 2022 20:43
@astrobot-houston astrobot-houston mentioned this pull request Jul 21, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: example Related to an example package (scope) pkg: integration Related to any renderer integration (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants