The default blog template and themes on WordPress do not have syntax highlighting enabled by default. I post many code blocks in my post and needed syntax highlight.
I am new to CSS so tried many solutions and found
Prism to be the easiest and working out of the box.
How to Add Syntax Highlights?
- Download CSS code of Prism
- If you are on a premium plan to WordPress, you can create your CSS code for the blog/website.
- Paste the Prism CSS code here. That’s all!
Many times a good WordPress theme does not render code properly. There are problems like too big font making it harder to read the text. I use StackEdit to prepare posts and publish to my blog.
There is a way to solve this problem with custom CSS.
The posting source is in Markdown. StackEdit translates MarkDown to HTML and posts to the destination. There is not much I could do with the Markdown. However, the theme on the WordPress blog allows me to set a CSS for particular content.
The code blocks are translated to
pre blocks in the HTML. So adding a custom rendering for
pre block should fix the problem.
I found a CSS snippet from https://wp-mix.com/css-style-pre-tags/.
border: 1px solid #777;
background: url('lines.png') repeat 0 0;
Another good reference is https://perishablepress.com/perfect-pre-tags/
This made the code look much much better.