How to add code highlighting to WordPress with code-prettify?

As a programming technology blog, it’s need to add code highlighting for WordPress to get more pretty effect to read. You can add code high lighting to WordPress with code-prettify.

Code-prettify is an embeddable script that makes source-code snippets in HTML prettier. It’s name used to be google-code-prettify. Using c ode-prettify is very easy to make code high lighting for WordPress blog without any plugin. Follow the steps to add code highlighting effect for your blog.

How to make code highlighting for WordPress with code-prettify?

The first method to make code highlighting to your WordPress. I used the first to make code highlighting for You can choose the one you like.

The first method to realize code highlighting for WordPress

1.Free download the newest code-prettify zip file from github, the download site as the follow.

2. Unzip the code-prettify file, to find the prettify.css and prettify.js two files. Then, to upload the two file to the root directory of WordPress theme.

3. To add the path of prettify.css file into the <head> tag in header.php file.

 <link href="<?php bloginfo('template_directory'); ?>/prettify.css" type="text/css" rel="stylesheet" />

4. Add the path of prettify.js and the following jQuery code before the </body> tag in the footer.php file.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/prettify.js"></script>

<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("pre").addClass("prettyprint linenums");

Now, you finished the whole steps, just to check the effect.

Okay, there is another more easier method to make code high lighting for your WordPress website.

The second method to make code highlighting on WordPress

Just put the following code into the footer.php file before the </body> tag.

<script src="[email protected]/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer=""></script>

The above code will load the entire system and schedule the prettifier to run on page load. 

I think the first method is better to the speed of wordpress website. But this method provides some pretty themes to use directly, you can design some parameter

The themes of code-prettify: Gallery of themes for code-prettify

Leave a Comment