Syntax highlighting is done using either highlight.js or prism.js. Once you’ve picked one, you’ll have to set it up for code blocks: 1. within MDX and 2. outside MDX. That’s how it works on all kinds of frameworks, not just Remix, although I’ll post examples for Remix.
This setup is mostly a trivial task; however, there are a few niggles worth mentioning.
A decade ago, Chris Coyier from CSS-Tricks described ways to consume SVG, which can be distilled into two groups: to link and to embed.
Fast forward to 2022, the market has shifted from WordPress+PHP to React+TypeScript, but the same dilemma “to link or to embed?” still applies because, at the bottom of it, we’re still dealing with the same HTML and CSS as we did a decade ago.
So what’s the best way to import SVG in MDX?