How to Highlight Syntax in WordPress without a Plugin?

Choosing a WordPress plugin for highlighting syntax is good enough but if you analyze your site, you’ll see many files like JavaScript and CSS which will make your blog somewhat load lazy.

However, if we use (preformatted tag) of html, you will be able to highlight syntax which is also a built-in option in WordPress blog post editor. It’s the one of the best ways to highlight syntax without having to load large files.

highlight syntax codes with Preformatted

Styling the Preformatted Tag:

Add the following CSS codes in the style.css file by going to Appearance > Editor:

pre {
    margin-bottom: 22px;
	font-family: Consolas, Monaco, "Courier New", Courier, monospace;
	font-size: 12px;
	overflow: auto;
	background: #eee;
	padding: 10px;
	border: 1px solid #ddd;
	font-style: normal;
    font-weight: normal;
}
Related  Daily WordPress Plugins Roundup – 10 July.2013

Leave a Reply

Your email address will not be published. Required fields are marked *