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.
When building the string-strip-htmlGUI, I wanted: line wrapping, full-screen flexbox layout, with scrollbars on Codemirror box only. That's a common layout seen on code-oriented sites like Codepen or Stackblitz. I created a minimal proof-of-concept sandbox to prove it works.
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.
The latest TS doesn't support the types key at the package.json root level. Paul Zaczkiewicz raised an issue on our GH tracker about it, and together we were able to come up with a repoduction (later I also discovered a related ticket on TS issues board). From there on, it was easy to solve; here's what we did.