WordPress for developers – displaying source code and review of code sharing services
Since my blog is about coding – I have to show the code! There is nothing except simple preformatted text available out of the box, so I had to resort to other solutions. One option is using external source code repositories and another is using a WordPress plugin to beautify code.
Table of contents
External solutions
There are numerous options to host and share source files. I wrote an article on 5 external services, please refer to it for more details: Services to host source code and embed running applications – Gist, Codepen, JSFiddle, Glitch, StackBlitz.
You will find there that unfortunately no solution was suitable to embed code into my blog – but they are great for other use cases!
Internal solutions – plugins
After reviewing the external services I decided they were not satisfying my needs listed in the previous table, namely:
Hey, I've been using WordPress for years. In fact, I have learned about a lot of useful plugins and I have done plenty of customizations to build a great blogging tool. Would you be interested in launching own blogging platform on WordPress?
- rich formatting
- show line numbers
- allow line highlights
- display file name
- arbitrary file type
- simple to create
I decided to check the available plugins for two known code highlighters:
Prismatic
Plugin Prismatic looked promising: it supported both highlighters and had some bit of configuration. Unfortunately, I had several problems with it:
- I preferred Prism highlighter due to its plugins (line number, line highlight), but I couldn’t make it work for a few hours. Suddenly, it started working. No idea how.
- Using it requires adding lang-* class to a code block.
- Adding line numbers requires adding another class to the block.
- Using line highlight requires adding a data attribute to the block… Not doable with the Gutenberg editor.
- No built-in ability to display file name.
Advanced Gutenberg Blocks > Code
I concluded that the Prismatic plugin was not the best choice. Finally, I noticed among my plugins one that supports decent code block: Advanced Gutenberg Blocks. It has a very poor configuration in the plugin’s settings, it just allows selecting a color theme (fortunately many are available, I chose Hopscotch). But it has plenty of options in the editor:
- language selector
- file name field
- line numbering
- even line highlighter!
Only the Auto wrap long lines option does not really work to me… Nevertheless, this is almost a perfect block and I keep using it.
Fixing the Code block
Sometime later I noticed that the Code block checked syntax and marked errors with an unreadable red background color. This happened even in correct file, like partial PHP files. I decided the fastest way to fix it would be adding the following undo code to my theme’s style.css:
I also added two languages I use that were missing: TypeScript and JSON. Here is my contribution in GitHub and you can read more about the process of amending the plugin in GitHub contribution by Pull Request – crash course.