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:
- Add PHP code to your child themes functions.php file.
- Add CSS code to your child themes style.css file.
- 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.