For the highlighted code, you’ve made unhighlighted lines look more like <i>comments</i> than merely deemphasised lines. One alternative style that I’ve found effective in such situations is to reduce the opacity and partially desaturate:<p><pre><code> -.sx5jq50 .highlight-line[data-highlighted="false"], .sx5jq50 .highlight-line[data-highlighted="false"] * {
- color: var(---fadedLines);
-}
+.sx5jq50 .highlight-line[data-highlighted="false"] {
+ opacity: 0.5;
+ filter: grayscale(0.6);
+}
</code></pre>
But I have always found adding a yellow background to the line to be by <i>far</i> the most effective (that is, the most likely to be read and understood correctly without explanation), most likely combined with opacity reduction and/or desaturation. And yes, specifically yellow will normally yield the best results. (There may be cultural factors to weigh against this recommendation, but there’s also some actual colour science supporting it. I’d definitely avoid red and green for normal highlighting in western culture, though it’s great for removed and added lines in diffs—but do remember the colourblind and not make colour the only indication.)
This is pretty good!
One thing I wasn't able to trigger (or understand) was the "hover me" part from the "Interact with the content" section.
It's looks great.<p>I think for me biggest problem with code snippets is that I encounter them with mobile device. Lines are quite long, like who uses 80 character line limits these days, more like 160. This combined with reality that most websites don't allow mobile device to zoom out.<p>I wish I could read full lines of code instead of trying to scroll back and forth.
Possible bug? The `hover me` seems to be implying that hovering <i>that text</i> should highlight something in the code sample, but nothing is happening. I assume that's the goal anyway - mouse over sections of explaining-text to see the highlighted-code that's relevant. (both "highlight word" and "highlight lines" could be handy here. tbh I'd probably use "highlight lines" more often)<p>Ignoring that: this is pretty nice looking, both the explanation (clear and with good examples) and the component itself. Good work!
The best feature for me is that it works well without JavaScript. The document is still a document.<p>Except for collapsed code blocks. I would suggest collapsing them using JavaScript, so they are fully readable without. They are currently unavailable to someone who does not run JavaScript.
I'm curious why you avoided using mdx-prism in favor of re-implementing much of it yourself. If only because I just used it in my own project and spent time patching a minor Firefox-specific bug, and now I have FOMO because I like your implementation here :) Were your features impossible without huge changes?<p>I do like that you use the `line=1-3` syntax for highlighting instead of mdx-prism's `lang{1-3}`. Do you have any appetite for upstreaming that change?
Viewer attention is increasingly limited these days, so avoiding small mistakes which limit your audience is recommended.<p>Dark mode content such as TFA is practically unreadable outside in bright light. Your reader will need to remember to return to your page some other time when they can see it, but chances are they will not return.
Does anyone know if there's a trick to avoid the trailing newline when double-clicking a line to copy/paste it elsewhere?<p>This always annoys me for single-line commands. I'd love a CSS solution but can only think of some ugly JS approaches.
And this is the power of MDX (and some great focus from the author of course). I’m having a hard time trying to understand why some people seem to dislike MDX, it is the holy grail of web authoring imho.
Nice! Here is another collection of ideas on improving code blocks <a href="https://co-pilot.dev/docs-code-block" rel="nofollow">https://co-pilot.dev/docs-code-block</a>
Would be nice to see Intellisense-style hover tooltips on code-blocks someday (via referencing a `.d.ts` or `.ts` file).<p>There might be some minimalist way to get Monaco into read-only mode for it...