Style Your Code & Use The Pre Quicktag In WordPress To Highlight It

In this tutorial, i’ll show you one way to style your code when using the pre quicktag.

No need to add another button to the text editor in WordPress as this method uses the existing pre quicktag and simply styles any code wrapped in the pre tags.

The code in these files come from Google’s Code Prettify.

You can install the files manually and modify the styling or download the plugin from WordPress.org.

You’ll be able to style different code with any colors you like and use the pre button in the editor to wrap your code.

And here’s an example of what the code will look like from the text editor view and front end.

Text Editor View

Front End View

To style your code manually and use the pre quicktag displayed in your WordPress text editor, you need to do 3 things:

1. Add PHP code to your child themes functions.php file.
2. Add CSS code to your child themes style.css file.
3. Upload the Google Javascript file for prettify to your child themes root directory.

PHP & CSS Code

Here’s the PHP & CSS code you need to add at the end of your child themes files.

Prefer a different look? Here’s some more CSS code from Googles Code Prettify gallery which you can use or modify.

Javascript

This file needs to be uploaded to your child themes root directory in a folder named js

Example of CSS Code Highlighted

About The Code

The CSS and Javascript come from Google’s Code Prettify and the PHP has been written by me. The PHP code for the quicktag comes from the WordPress Codex which i have modified to work with Google’s Code Prettify.

Prefer The Plugin Version

Download the Code Highlight plugin from WordPress.org.

Styling Code Other Ways

• How To Style Github Gist Code Embeds in WordPress

Subscribe for new Genesis Tutorials