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.
This weekend I was tinkering with string-strip-html GUI; I wanted to sync the state with URL params so that users could bookmark the page and visit later and automatically get those settings restored.
Here’s an MVP based on a forked Remix.js starter template on StackBlitz.
sort-package-json v2 pure ESMThe npm package sort-package-json migrated to ES Modules in their v2 release and indirectly broke their named exports which our packages have been consuming. It was a major semver bump, but breaking changes slipped from their changelog and readme radar, so I wanted to explain what actually happened there.
I used to believe that three-theme UI toggle (auto-dark-light) was superior to the two-theme, dark-light. But I don’t think that way anymore.
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?
Frameworks come and go — Remix, Next, Gatsby, WordPress, Hugo, Hexo, TextPattern — but the “classic” CSS styling tactics stay. If you still use SASS and embrace the CSS inheritance — you’re probably already using this technique.