When working on the articles for the Backend Engineer Learns to Build Block Editor Blocks series, I wasn’t happy with how the code samples were looking within the articles.
Previously, I’ve written – here and here – about my being a fan of the work done by Zeno Rocha in the Dracula Theme. Ideally, I wanted to be able to have the color scheme of the code in my articles match the theme. Something like a Dracula Theme for WordPress Blocks.
That’s when I found highlight.js
and a Dracula theme for it. So I wrote a small plugin for WordPress that works with the existing Preformatted block and changes the color scheme to match that of Dracula.
I call it WP Dracula Highlight.js or, more simply, Dracula Highlight.
Dracula Theme for WordPress Blocks
The description of the plugin is as simple as you’d expect:
A WordPress plugin for adding the Dracula color scheme and Highlight.js to the Block Editor.
Assuming you don’t have highlight.js
code running on your blog, the plugin is meant to be as turnkey as possible.
- Install it,
- Activate it,
- All existing Preformatted blocks and all future Preformatted blocks should be given the same treatment.
All of the instructions for how to install this on your site (or to clone the repository and do your own work with it) are included in the README
.
I also have a short list of things that I’d eventually like to do should time and demand necessitate it. Ultimately, though, this was built for my use case and I’m sharing it here for others who are interested.
If you’re interested, please feel free to download it and give it a try. If you have any problems, don’t hesitate to open an issue though, as is the case for most of my projects, I’ll get to issues when and if and I have the time. Otherwise, you may also open a PR for which I’m always happy to review.
In the meantime, I hope the plugin serves those of you who are a fan of the theme well.
🧱 For those who are interested, I’m still working on the next article in the Learning to Build Block Editor Blocks series, but they take far longer to draft and publish than something like this. 🙂