• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2892

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

pre quicktag

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

Text Editor View

text editor code

Front End View

style code

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

example

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

Reader Interactions

Comments

  1. Bartholomew says

    May 7, 2014 at 5:27 pm

    Hey I try your codes and its as it normal. I just know to know if this pre quicktag can be used to style codes imported from a database and display via ajax? .

    Log in to Reply
    • Brad Dalton says

      May 7, 2014 at 5:33 pm

      Depends on what type of code you need highlighted?

      If in doubt, please use Github Gists as they are the best externally hosted code provider who i highly recommend.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis & WooCommerce.

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Contact
  • Terms
  • Genesis WP Tags
  • WooCommerce
 

Loading Comments...
 

You must be logged in to post a comment.