WordPress for developers – displaying source code and review of code sharing services

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.

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:

  • 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:

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.

Leave a Reply

avatar
  Subscribe  
Notify of