Skip to content
Advertisements

Tagcss

How to Add Syntax Highlight to WordPress Blog?

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?

  1. Download CSS code of Prism
  2. If you are on a premium plan to WordPress, you can create your CSS code for the blog/website.
    css editor
  3. Paste the Prism CSS code here. That’s all!

How to Change View of Coding Block in WordPress?

Problem

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.

Solution

There is a way to solve this problem with custom CSS.

Description

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/.

pre {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url('lines.png') repeat 0 0;
	padding: 10px;
	color: #333;
}

Another good reference is https://perishablepress.com/perfect-pre-tags/

This made the code look much much better.

Update

%d bloggers like this: