Future-proofing custom code blocks with Expressive Code
YonicDev opened this issue · comments
🏢✔️ 🏛️✔️
This issue applies to both Modern and Legacy versions.
Checklist
- Make a list of not IE11 nor Legacy-friendly transformations made by Expressive Code
- Decide on which built-in features from Expressive Code to support
- Make plugins to render IE11 and Legacy-friendly code blocks
Details
The currently used method for rendering custom code blocks in MDX breaks in Astro v4 with whitespaces (johnzanussi/astro-mdx-code-blocks#3) and I've considered on future-proofing the customization of the code blocks by using a more maintained solution: Expressive Code, which also allows for adding more features and is compatible with the existing content API.
However, Expressive Code modifies the HTML inside the block to use modern features that clash with the backwards compatibility design of the blog in both Modern and Legacy versions.
It seems like the most viable solution would be to make plugins that render the code block as intended for the blog, taking reference from the CodeBlock.astro component.
Unwanted transformations
This table lists all HTML transformations that have been found to clash with the blog's design and whether it applies to the Modern or Legacy designs in their current support scope (Modern: IE11, Legacy: IE5.5).
| Transformation | Modern | Legacy |
|---|---|---|
| Lines are rendered as CSS grids. | ✔️ | ✔️ |
| Optional numbered lines plugin displays the numbers as grid elements. | ✔️ | ✔️ |
| Built-in frames plugin constructs the frame with CSS flex. | ✔️ | ✔️ |
| Block frames are not constructed using tables. | ❌ | ✔️ |
| Built-in plugin Shiki replaces inline styles for colored text with CSS variables that cannot be transformed by PostCSS. | ✔️ | ✔️ |
| JS hoisted to ES6 modules instead of being inlined | ❔ | ❔ |
Closing this as the whitespace issue has been resolved in a following update of Astro, and the extended features have been added.
This should really be wont-fix, actually.