PrismJS Syntax Highlighting

How To Implement Prism.js Syntax Highlighting Into Your WordPress Site

PrismJS Syntax Highlighting This article will be focusing on a neat feature that you can incorporate into your WordPress site without needing to go and install another full plugin on your page which will only bog down your load times and everything in the long run (although installing a plugin to do this is certainly possible). This feature is called Prism and it is a syntax highlighter which will prettify all of the code snippets you put in your blog posts.
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
Not sure what I mean by a syntax highlighter or what it does? Here’s an example.


Your code snippets will go from looking something like this:
var myObject = {
property1: "something",
property2: 5,
property3: true
};
To this!
var myObject = {
property1: "something",
property2: 5,
property3: true
};
Pretty neat, huh? And it's really easy to implement onto your site by following the steps below:

  1. First, go to the Prism download page. You'll see a page like the one below:

    Prism.js Download Page

    Here, you will see a whole bunch of options that you can choose to customize how your code will look with Prism. For the first section that says "Compression level:", choose "Minified version". This will shorten the amount of text used in the background code, therefore allowing it to run quicker on your site.

    Next, you will choose the Theme that you want to use. This site uses the "Default" theme, but feel free to choose whatever theme you think will look best with your site. As you click on the various themes, you'll notice that the code blocks above the "Download JS" and "Download CSS" buttons will change to give you an idea of how the theme will look.

    Download Prism JS and CSS

    Next, choose the languages that you will be using within the code blocks on your site. For me, I just left the defaults checked which are Markup, CSS, C-like, and JavaScript.That covers a large chunk of languages that I plan to show within my blog posts. However, if you know for sure that you'll be using Python, PHP, or SQL for example just check any of those boxes. Keep in mind, though, that the more languages you have checked, the bigger your JavaScript and CSS files will be. So, just make sure that you choose only the languages you need. You can always go back and add the background code for another language if you find out that you needed one that you didn't get at first.

    As far as plugins go, you can read about those yourself by clicking on the links in the "Plugins" section. The plugins give a little extra functionality if desired such as having line numbers show up in your code blocks. I don't use any extra plugins.
  2. For the second part, you will be downloading your Prism JS (JavaScript) and CSS (Cascading Style Sheets) files. Once you have your compression level, languages, and plugins chosen that you want, you are ready to download the files you'll be putting on your site. Click on the big "Download JS" and "Download CSS" buttons shown in the second picture of step 1 and save each of these files somewhere on your machine. For example, you could just make a "Prism" folder on your C: drive so they can be saved in the C:\Prism folder.
  3. After those two files are saved, you are ready to upload these files to the back end of your site. You will not be using WordPress for this part. You will be logging onto the back end which will be your main host site (whether that be HostGator, BlueHost, or whatever hosting company you're using).

    After you are logged in to your main host site, click on "File Manager". HostGator's File Manager is shown here: HostGator File Manager
    Once you click on "File Manager", it may ask you which directory you want to go to. Choose "Web Root (public_html/www)" and click "Go".

    Now, path out to your theme's folder. If you use a child theme (which you should be), path out to that theme's directory. Or, if you're just using a parent theme, go there. These folders should be found out in wp-content/themes/<your theme name>. For example, I use the "Responsive" theme, so my parent theme's folder is located at wp-content/themes/responsive and my child theme's folder is located at wp-content/themes/responsive-childtheme-master. Once in the appropriate folder, you might see some files already out there such as "style.css", "functions.php", etc. This is where you will be uploading your prism.css and prism.js files.

    In this directory, you can either create your own folders to house the CSS and JS files, or you could just upload the files as is. What I mean by this is that, after you upload them, the locations to these files could either be wp-content/themes/<your theme name>/prism.js and wp-content/themes/<your theme name>/prism.css or you could make a folder called "js" and a folder called "css" to house any JavaScript and CSS files that you plan to upload to your site. So, the locations would be wp-content/themes/<your theme name>/js/prism.js and wp-content/themes/<your theme name>/css/prism.css.

    Whatever you decide to do, just be consistent. Either upload the files right within your theme's folder, or create the "js" and "css" folders mentioned. Now, it is time to upload your files. HostGator Upload Button Hit the "Upload" button as shown in the screenshot above. An upload page should open up. Browse out to your prism.css file that you have stored on your computer (either in the C:\Prism folder if you made it or wherever else you put it), and choose that file. If the upload page has a section for "Permissions" just check all three boxes under user (that's you) and then just the first "Read" box for both "Group" and "World". Find out more about cPanel permissions here.HostGator File Permissions Now, do the same for your prism.js file. Once that is complete, if you go back to where you directory was showing, you should see both the "prism.css" and "prism.js" files sitting in your theme's folder now. Or, you would see them in your "css" and "js" folders if you created those.
  4. Your Prism files are now uploaded to the back end of your site. Great! All we have left to do is to make sure they get loaded up in our site whenever a page of our site comes up in a browser. This will require some more work on the back end where we were just working.

    Remember the folder we were just in? wp-content/themes/<your theme name>? We will be working in there again. However, this is why I said YOU SHOULD BE USING A CHILD THEME because we will be working with the child theme's functions.php file. You should NEVER modify the parent theme's functions.php file because it can mess up how your site works, and, after your theme updates, you will probably lose any work you did in your parent theme's functions.php file.

    Okay, now that I've made that clear, find the "functions.php" file in this directory: wp-content/themes/<your CHILD theme folder>. Right click this file and choose "Edit". After you do that, a box may appear saying that you should back up your file in case anything goes wrong. Feel free to back up the contents of the file somewhere if you feel like you'll be messing things up. However, chances are you haven't even added anything to your child theme's functions.php file yet which means there would be nothing to back up. Anyway, click "Edit" on that popup box.

    A rather ugly text editor page should show up in your browser. If you have been in this file already, there may be text you've already written (or maybe the theme's creator added some comments in there). Otherwise, it will be blank. Here, you will be writing the code to have your prism files load up whenever someone opens a page on your site.

    I won't get into huge detail here, but the proper way to include custom scripts and styles on your site (if you're using WordPress) is to first register the file, and then enqueue it. You can read some great documentation on including CSS and JavaScript into your WordPress site here.

    In order to do this, we will write a simple PHP function right in our "functions.php" file. I have the whole function written out below. You can just copy and paste that in your functions.php file and hit "Save Changes", but I will explain what it's doing below.
    <?php
    
    // Function to add prism.css and prism.js to the site function add_prism() { // Register prism.css file wp_register_style( 'prismCSS', // handle name for the style so we can register, de-register, etc. get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file ); // Register prism.js file wp_register_script( 'prismJS', // handle name for the script so we can register, de-register, etc. get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file ); // Enqueue the registered style and script files wp_enqueue_style('prismCSS'); wp_enqueue_script('prismJS'); } add_action('wp_enqueue_scripts', 'add_prism'); ?>
    WordPress has its own set of custom PHP functions that anyone can use to help do certain things. For example, the function written above uses a few different functions such as "wp_register_style", "wp_register_script", "wp_enqueue_style", and "wp_enqueue_script". As you can imagine, they register or enqueue a style or script which is what I said we had to do earlier in order to get them to load up on our site.

    Within the "wp_register_style" and the "wp_register_script" functions, the first thing we're defining is a handle name which is basically just like an ID that we are assigning that file so that when we go to enqueue it later we can just use that handle name to make things much easier. The second line is where the file is located. There is something worth mentioning here... assuming that you uploaded your prism.css and prism.js files in your child theme's directory like I said you should do, then using get_stylesheet_directory_uri() will work because this returns back the location of your child theme's folder. However, if you uploaded your files in your parent theme's directory, then you should use get_template_directory_uri() instead. This points to your parent theme's directory. Make sense?

    One other thing to note... notice that when I was defining the location of my files I just said get_stylesheet_directory_uri() . '/prism.css' and get_stylesheet_directory_uri() . '/prism.js'. If you created your own "js" and "css" folders earlier, then make sure you point to those folders instead otherwise your path will be wrong. So, instead, you would put in get_stylesheet_directory_uri() . '/css/prism.css' in your "wp_register_style" function and get_stylesheet_directory_uri() . '/js/prism.js' in your "wp_register_script" function.

    **Note: The difference between the functions ending in _style and _script is that you use _style for CSS files and _script for JS files.
  5. After you save your changes, you should be ready to rock n' roll! The last part is actually using the syntax highlighter within one of your posts or pages. This part is simple. Say you are writing a new post on your WordPress page, simply just use the "Text" tab (if you aren't already). There is a "Visual" tab and a "Text" tab that you can choose from while writing a post. The "Text" tab allows the writer to include their own HTML and other stuff. Don't know HTML at all? Read about How To Make Your First Basic Webpage Using HTML.

    When you want to write a code block using the new Prism syntax highlighting that you just implemented, you just start your code block with the normal <pre><code> tags just like you normally would. Except now, all you need to do is assign a class to your <code> tag. If the code block is going to be written in HTML, you would start it with <pre><code class="language-markup">. If it will be in JavaScript, it would be <pre><code class="language-javascript"> and so on.

    Got it? One last example. In order to get the code block that I wrote in the very beginning of this post, this is the full code you would have to write in your blog post in order to have it be highlighted with Prism.
    <pre><code class="language-javascript">
    var myObject = {
    property1: "something",
    property2: 5,
    property3: true
    }; 
    </code></pre>
    
  6. That's it! You now have the power of using Prism syntax highlighting on your code blocks if ever you plan to write code blocks within your blog posts or pages.

    P.S. Do you have Google Analytics installed on your WordPress site? If not, you're missing out on some extremely valuable free data/statistics. Check out my post on How to Add Google Analytics Tracking Code to Your WordPress Site Without a Plugin which uses a very similar method to plugin to your site as Prism JS does.

    What do you think of Prism? If you got it to work OR if you are having troubles, let me know in the comments!

Comments 28

  1. Pingback: How to Add Google Analytics Tracking Code to Your WordPress Site Without a Plugin | Crambler

  2. Thanks for the great HOW TO! Very informative and detailed. I noticed your ul>li list. Very cool effect! Would love to now how to do that?

  3. Pingback: A Perfect Syntax Highlighter for WordPress

  4. Pingback: Prism.js | LAIRDTHOMPSON.COM

  5. Thanks for this, exactly what i was looking to add to my own site. So many WordPress syntax highlighters are over bloated with options and end up slowing down a site.

    1. Post
      Author
  6. Pingback: Ein perfekter Syntax-Highlighter für WordPress | dFlect

  7. Pingback: Newer Post

    1. Post
      Author
  8. Pingback: Wordpress prismjs – It's Me, Tommy!

  9. Pingback: Android Alert Dialog Example - Android Snippets

  10. Thanks for the great post. I especially liked your explanation of the custom PHP functions, it tied together a lot of loose information that has been ping-ponging around in my head 🙂

    1. Post
      Author

      Hey Brian, no problem! I was in the same boat as you before I wrote this post. I could not quite wrap my head around certain pieces with the functions, but after reading way too many articles, it finally clicked so I thought I’d explain how it worked from my side of things 🙂

  11. Pingback: Implementing prism Syntax Highlighting on BlueHost – Programming From The Hip

  12. Thanks, my first attempt on BlueHost using a plugin just would not highlight anything. I went through the steps in your post, and it worked on the First try.

    Thank you for sharing this information.

    1. Post
      Author

      Hi Ferlin! You are welcome, I’m glad to hear you were able to follow my steps with no problems. I just find it easier to not hassle with plugins for something small like this 🙂

  13. Pingback: Prism.js : coloration syntaxique sans plugin pour WordPress | Pascal's weblog

  14. Hi,
    Thanks for that great post, very useful and detailled.

    In case that could be useful for someone, I had first some issues because I forgot to disable a plugin (CodeAutoEscape) that was systematically removing the code class. My fault !

    I also noticed that sometimes I need to use the HTML entity (&lt) rather than the sign “<" in the post to avoid issues : the character is not escaped as it should, typically the one to declare php code…
    Don't know if this is a wordpress or Prim.js issue…

    Thanks again, I like the prism.js output, very clean and beautiful.

  15. thank you for this post it work fine but
    whatever method i do to highlight the code, WordPress won’t accept long code, about 300 line. when i hit publish, after the page have been load I only see about 30 line :(. Can you please help me about this issue??
    thank you in advance

    1. Post
      Author
  16. Pingback: Project 9: Javascript Random Number Generator - DevelopingMike

  17. @TheCrambler, nice job with the article and explanation. I followed it to a ‘T’, however it doesn’t work.

    It’s probably my theme (I’m using a child-theme) that it’s somehow overwriting the styles.

    When I install any syntax highlighter plugin, it works. But when doing it manually, by upping the prism.css and prism.js to my child theme folder, and registering them via functions.php, doesn’t work.

    I’m making use of the class correctly according to the Basic Usage here: http://prismjs.com/#basic-usage

    I’d prefer not installing yet another plugin, when this manual way is relatively straightforward. But unfortunately it’s not working.

    How could I get this to work, or somehow not get my theme css in the way (if that is the culprit)?

  18. Hi, it’s Daniel again. I got it to work, so you can delete my previous comment if you’d like. =)

    Or maybe do this: just keep my comment where I say good article and explanation and you can delete the rest of the comment. Thanks again.

    1. Post
      Author

      Hey Daniel! Glad to hear you got it to work. I was going to get in contact with you and see if I could help you, but looks like you figured it out! Enjoy. No problem at all!

  19. Hi,

    Thank you for such a wonderful post. I was finally able to integrate my favorite code highlighter to my WordPress site. It looks amazing.

    Thanks!
    Atta

    1. Post
      Author

Leave a Reply

Your email address will not be published. Required fields are marked *