Tania Rascia

Skip Navigation
Adding Syntax Highlighting to Code Snippets in a Blog or Website

Adding Syntax Highlighting to Code Snippets in a Blog or Website

 /  22 responses

I’ve received a few requests on how to highlight the syntax of snippets of in a blog like I have. Here is an example snippet of SCSS code, so you can see exactly what I’m referring to.

// Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;

body {
  font: 100% $font-stack;
  color: $primary-color;

.box { 
  @include border-radius(10px); 

Many people initially think you have to manually color the elements, or manually escape the characters, but it’s much more simple than that, so I’ll cover everything necessary to embed snippets in your own blog or website in this article.


  • Basic knowledge of HTML and CSS.


  • Highlight code syntax in a website or blog.
  • Automatically escape HTML and PHP code in WordPress.

There are two main options to displaying code on your site – embedding the code or using JavaScript to highlight the syntax of pre and code tags.


The faster, easier option for syntax highlighting is embedding the code in the form of a GitHub gist or Codepen pen. Both of these can be done with an account or anonymously.


Here is an example of the above code embedded as a GitHub gist:


And here is the above code embedded as a CodePen pen.

See the Pen mEerjX by Tania (@taniarascia) on CodePen.

The advantage to embedding is that it’s quick and easy. CodePen in specific is excellent for demos because you can show the code and the result.

However, loading multiple embed scrips throughout your blog can slow it down significantly, and additionally you don’t have much control as to how the code snippet looks and what colors it uses. CodePen is only for front end web development, and you wouldn’t be able to embed code in PHP, Ruby, Python, and so on. For many, that might not matter, and for others it does. For both of these options, all you do is paste your code and find the “embed” button.

JavaScript Highlighting

The alternative option is using a JavaScript library to automatically highlight your code. There are two main options here – Highlight.js and Prism.js. Google Prettify is a third option.

I’ll focus on Prism.js here, as it’s what I use for this site, but I’ve used all the above at some point and they’re all very similar.

On the Prism website, you can download the CSS and JS for Prism. They give you options on what languages and theme you plan to use, so you’ll just check the relevant ones and get the download.

All the Prism files are also available as a CDN, so if you don’t wish to download anything, you can do it that way.

For the sake of simplicity, I’m going to assume you don’t need anything special, and will use the most basic CDN. Link to the CSS in your <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css">

And link to the JS before the closing <body> tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>

Finally, wrap your desired code in <pre><code class="language-whatever">. You’re defining the language, and the <pre> ensures that all your indentation will be properly preserved.

<pre><code class="language-css">body {
  font: 100% Helvetica, sans-serif;
  color: #333;

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;

Now here’s what that ends up looking like.

See the Pen Prism Syntax Highlighting by Tania (@taniarascia) on CodePen.

Now you override the styles with whatever you want in the CSS file. On this blog, I use New Moon, my own personal coding theme that I made available as an open-source package on Brackets, Atom, and Sublime because I’m that much of a dork. I encourage you to make your own as well.

Escaping HTML and PHP

In order to display HTML or PHP code, some of the symbols must be escaped so the browser doesn’t try to parse the code. You can use an online converter like Free Online HTML Escape Tool to do this if your website is plain HTML.

If you’re writing on a WordPress blog, there is a WordPress plugin to do this, but it doesn’t work properly with Prism.js.

Here is some modified code that you can place in your functions.php to automatically escape HTML in your posts.


Well, this was probably the most meta post I’ve ever made. Now you should know how to display beautiful code on your site in the way that works best for you. Each way has a limitation and advantage. I personally don’t like relying on a third party service for anything, which is why I don’t use gists or Disqus for comments. If you want to see some other helpful WordPress functions, this is the resource for you.


Get updated when I create new content.
Unsubscribe whenever. Never any spam.


I'm Tania. I turn down every ad, affiliate, and sponsor request I get. I write free resources that help thousands of people successfully become devs. If you enjoy my content, please consider supporting what I do.

Support my work

Write a response

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

All code will be displayed literally.


  • Sunil Kumar Nerella says:

    Hi Tania,
    Good Information here. Thanks for updating

  • Lisa says:

    Hi Tania!

    I've coded in VBA for quite a while now and I want to share some code on my website.
    I've put the links in where you said to.
    Now what do I do with the downloaded CSS and JS files please?


    PS: Do use the donation for beer! hehehe!

  • Steave says:

    Really, awesome things and I hope to learn much more from this site in future…..
    I just improved my project using things from this site…. I am also app Developer. I get one website that name https://www.instacode.in. it provide source code of application. so i'm confuse buy code or not. that games are very good and fully featured.

  • joydeep says:

    Thanks that was simple and quick, good article!

  • James says:

    Thanks 🙂

  • Shan Dou says:

    Thank you so much!! I was searching for solutions to have StackEdit's syntax highlight reflected on blogger. Your solution is the only one that works.

  • lee says:

    First please forgive me bad English level.

    English is not my mother tongue

    Can you write a tutorial? How to use codepen code insert into a wordpress post or pages?


    I Can't succeed !!!!!

    Can you teach me????

  • Alex says:

    That was excellent! Thank you for supplying the info, along with the New Moon theme. This was the most helpful article I could find, and I was able to set up what I needed in only a short amount of time.


  • Teddy says:


  • Randy says:

    This is Nice, however, when i implemented this (highlight.js) i have the strange occurence that i have a scrollbar OUTSIDE on the right of my mainframe. If i put a overflow: hidden into my CSS in the body section the div .content completely disappears. I’m stuck and not happy. i tried pretty much everything. Also the text inside input forms are somehow different on the pages (using same CSS and same input type=”text” in formfields).

  • Chris Vincent says:

    i think there is a problem with the php escape script

    nice work by the way.

  • Justin Estrada says:

    This is great! I just implemented the dark theme prism.js theme okadia in my blog mydigitalsauce.com/blog

    Thanks so much!

  • Levi says:

    I tried this, to customize my blog, but it didn’t work

  • Anonymous says:

    Thanks for this wonder full exaplanation

  • Anonymous says:

    great article. thanks for sharing

  • hi says:

    thanks god somebody normal to explain

  • Ari says:

    Useful article. I’m definitely planning on building my own syntax theme.

  • a. chigozie says:

    I’ve had this bookmarked for a very long time and your tutorial was very straightforward. Up and running very quickly. Thank you!

  • Anonymous says:

    Hi Tania, Your solution is perfect for publishing articles etc where we can give a class name to the code and simply publish it but is there a way to apply this to a forum where people will wrap their code with code but not necessarily give the class name such as language-css etc.

    In my site I am using tinymce text editor where users can use various text formatting options including pre or code in that textarea. their text will be wrapped in either pre or code in-between plain text. how do i apply style to those code snippets? here is my site http://kaloraat.com/questions/how-to-redirect-user-after-password-reset-in-laravel


  • Niket Agrawal says:

    You are truly a gem i have struck to. I loved your blog so much that i spent entire night reading each of them and making demo examples. Thank you very much for so thorough knowledge you have shared. This is so much helpful to people like me who are true autodidacts.

    P.S. I am also a chef and a web developer but with half the experience !!! Keep Spreading the knowledge.

  • Ryan says:

    You are absolutely amazing, you heard my request 🙂
    Thanks for a great article.