Pedro Duarte made a wishlist for styled code blocks in weblog posts and documentation, then hand-rolls an ideal answer for that wishlist. For instance, a function to have the ability to spotlight sure traces or phrases throughout the code block. The road highlighter is exclusive in that it solely syntax highlights the highlighted traces, leaving the remainder grey, which is a neat means to attract focus. And the phrase highlighter works by way of a RegEx. Pedro notes this isn’t a tutorial, it’s only a showcase of all of the options that had been stitched collectively utilizing an current mixture of customized code and current libraries. It’s fairly particular to React + Subsequent.js + MDX, however apparently the core of it’s primarily based on rehype, which is new to me.
The outcomes are fairly darn good, modern-looking code blocks should you ask me! On the identical time, I feel it’s equally notable what’s not there as opposed to what’s. I’ve seen (and tried) actually featured-packed code blocks prior to now, with options like a replica to clipboard button, a view uncooked code button, and export to no matter companies. Pedro’s code blocks don’t even have an possibility to point out the language in use.
All people’s wishlist is completely different. One factor that isn’t on Pedro’s wishlist is server-side rendering, however you may see on the weblog submit itself that it completely works with that (it’s presumably simply Subsequent.js at work). I’m fairly envious of that. Regardless that we’re finally each utilizing Prism.js because the syntax highlighter, I’m solely utilizing it client-side. It happens to me now that I may maybe pull all this off in a Cloudflare Employee by utilizing the HTMLRewriter — that means it will basically appear like it’s finished server-side and I may rip off the client-side copy of Prism. Possibly much more ideally, although, is that I’d do it as a WordPress plugin. Mainly a PHP port of Prism, which looks like a tall order.
My wishlist for code block plugin…
Syntax highlighting (each on the rendered web site and whereas authoring)Server-side rendered <span class=”token-foo”> stuff for syntax highlightingWorks properly with the native WordPress block editor code blocks (“`). For instance, pasting in a code block auto-detects and makes use of the right block. Straightforward to transform code to and from this type of block.Non-obligatory line highlighterOptional line numbersOptional phrase highlighterOptional language show (and the flexibility to override that label)Copy and paste very cleanlyNo want to flee code whereas authoringFreedom to fashion nevertheless on the entrance finish (for modes, themes, customized scrollbars, and so on). Styling code blocks has one million issues to think about, so good defaults ought to most likely include the plugin, however simple to override.Stretch purpose: can it in some way assist with inline code as properly?
Direct Hyperlink to Article — Permalink
The submit Code blocks, however higher appeared first on CSS-Tips.
You possibly can assist CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!