diff --git a/docs/index.html b/docs/index.html
index dfd06e2f..35de6a96 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -32,7 +32,6 @@ slug: home
 
   <hr class="half-rule">
 
-
   <div class="s2-docs-featurette">
     <div class="row">
       <div class="col-sm-4">
@@ -124,10 +123,10 @@ slug: home
           section of your HTML.
         </p>
 
-<pre class="code prettyprint">
-&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /&gt;
-&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"&gt;&lt;/script&gt;
-</pre>
+{% highlight html %}
+<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
+{% endhighlight %}
 
         <div class="alert alert-info">
           <i class="fa fa-info-circle"></i>
@@ -141,11 +140,11 @@ slug: home
           want to make awesome.
         </p>
 
-<pre class="code prettyprint">
-&lt;script type="text/javascript"&gt;
+{% highlight html %}
+<script type="text/javascript">
   $('select').select2();
-&lt;/script&gt;
-</pre>
+</script>
+{% endhighlight %}
 
       </li>
       <li>
@@ -178,10 +177,10 @@ slug: home
           section of your HTML.
         </p>
 
-<pre class="code prettyprint">
-&lt;link href="path/to/select2.min.css" rel="stylesheet" /&gt;
-&lt;script src="path/to/select2.min.js"&gt;&lt;/script&gt;
-</pre>
+{% highlight html %}
+<link href="path/to/select2.min.css" rel="stylesheet" />
+<script src="path/to/select2.min.js"></script>
+{% endhighlight %}
 
       </li>
       <li>