CODEBLOCKS THEMES INSTALL
CODEBLOCKS THEMES CODE

CODEBLOCKS THEMES CODE

Styling code blocks has a million things to consider, so smart defaults should probably come with the plugin, but easy to override.

Freedom to style however on the front end (for modes, themes, custom scrollbars, etc).

Optional language display (and the ability to override that label).Easy to convert code to and from this kind of block. For example, pasting in a code block auto-detects and uses the correct block. Works nicely with the native WordPress block editor code blocks ( ```).Server-side rendered stuff for syntax highlighting.Syntax highlighting (both on the rendered site and while authoring).Basically a PHP port of Prism, which seems like a tall order. Maybe even more ideally, though, is that I’d do it as a WordPress plugin.

CODEBLOCKS THEMES INSTALL

To download 15 code blocks dark theme and step by step guide to install it you can follow this article: Logged. Setting > Personalization > color > dark theme. It occurs to me now that I could perhaps pull all this off in a Cloudflare Worker by using the HTMLRewriter - meaning it would essentially look like it’s done server-side and I could rip off the client-side copy of Prism. You can set the dark mode for all the app by following these steps. Even though we’re ultimately both using Prism.js as the syntax highlighter, I’m only using it client-side. One thing that isn’t on Pedro’s wishlist is server-side rendering, but you can see on the blog post itself that it totally works with that (it’s presumably just Next.js at work). Pedro’s code blocks don’t even have an option to show the language in use.Įverybody’s wishlist is different. I’ve seen (and tried) really featured-packed code blocks in the past, with features like a copy to clipboard button, a view raw code button, and export to whatever services. The results are pretty darn nice, modern-looking code blocks if you ask me! At the same time, I think it’s equally notable what’s not there as opposed to what is. It’s pretty specific to React + Next.js + MDX, but apparently the core of it is based on rehype, which is new to me. Pedro notes this isn’t a tutorial, it’s just a showcase of all the features that were stitched together using an existing combination of custom code and existing libraries. And the word highlighter works via a RegEx. The line highlighter is unique in that it only syntax highlights the highlighted lines, leaving the rest gray, which is a neat way to draw focus. For example, a feature to be able to highlight certain lines or words within the code block.

Pedro Duarte made a wishlist for styled code blocks in blog posts and documentation, then hand-rolls a perfect solution for that wishlist.

Codeblocks themes