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.
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.
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
Prefer The Plugin Version
Download the Code Highlight plugin from WordPress.org.