Support Prism in the blog template example #2622
Conversation
The Prism syntax highlighter failed to render properly when Astro was initialized with the blog template. This was because the Prism CSS conflicted with the default blog template. This change-set removes the Viewport Width from the `pre` transform as this property conflicted with the prism CSS. This change-set also includes Prism in the Blog Post layout and adds a small javascript example to the sample post.
|
| Name | Type |
|---|---|
| @astrojs/markdown-remark | Patch |
| @astrojs/renderer-lit | Patch |
| @astrojs/renderer-preact | Patch |
| @astrojs/renderer-react | Patch |
| @astrojs/renderer-solid | Patch |
| @astrojs/renderer-svelte | Patch |
| @astrojs/renderer-vue | Patch |
| @astrojs/parser | Patch |
| astro | Patch |
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
|
Just confirming that readonlychild and I both confirmed this behaviour in a Discord support thread: https://discord.com/channels/830184174198718474/944312807476830238 The css we currently have in the blog starter template when combined with a Prism stylesheet causes code blocks in a .md file to render shifted off the left side of the page. This doesn't happen in all starter templates, but I haven't checked each and every one. Perhaps it's also worth checking for this behaviour in the blog (complex) starter, too, since they might have been built similarly? |
The Prism syntax highlighter failed to render properly when Astro was
initialized with the blog template. This was because the Prism CSS
conflicted with the default blog template.
This change-set removes the Viewport Width from the
pretransform asthis property conflicted with the prism CSS. This change-set also
includes Prism in the Blog Post layout and adds a small javascript
example to the sample post.
Changes
Testing
Docs