diff --git a/docs/_includes/examples/basics.html b/docs/_includes/examples/basics.html
index b2030739..5cd1ca19 100644
--- a/docs/_includes/examples/basics.html
+++ b/docs/_includes/examples/basics.html
@@ -22,19 +22,19 @@
     </p>
   </div>
 
-  <pre class="code" data-fill-from=".js-code-basic"></pre>
-
-<script type="text/x-example-code" class="js-code-basic">
+{% highlight html linenos %}
+<script type="text/javascript">
 $(document).ready(function() {
   $(".js-example-basic-single").select2();
 });
+</script>
 
 <select class="js-example-basic-single">
   <option value="AL">Alabama</option>
     ...
   <option value="WY">Wyoming</option>
 </select>
-</script>
+{% endhighlight %}
 
   <h2 id="multiple">Multiple select boxes</h2>
 
@@ -48,18 +48,17 @@ $(document).ready(function() {
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-multiple"></pre>
-
-<script type="text/x-example-code" class="js-code-multiple">
+{% highlight html linenos %}
+<script type="text/javascript">
 $(".js-example-basic-multiple").select2();
+</script>
 
 <select class="js-example-basic-multiple" multiple="multiple">
   <option value="AL">Alabama</option>
     ...
   <option value="WY">Wyoming</option>
 </select>
-</script>
-
+{% endhighlight %}
 </section>
 
 </section>
diff --git a/docs/_includes/examples/data.html b/docs/_includes/examples/data.html
index 42e3acbd..4b55a760 100644
--- a/docs/_includes/examples/data.html
+++ b/docs/_includes/examples/data.html
@@ -26,9 +26,8 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-data-array"></pre>
-
-<script type="text/x-example-code" class="js-code-data-array">
+{% highlight html linenos %}
+<script type="text/javascript">
 var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
 
 $(".js-example-data-array").select2({
@@ -38,13 +37,14 @@ $(".js-example-data-array").select2({
 $(".js-example-data-array-selected").select2({
   data: data
 })
+</script>
 
 <select class="js-example-data-array"></select>
 
 <select class="js-example-data-array-selected">
   <option value="2" selected="selected">duplicate</option>
 </select>
-</script>
+{% endhighlight %}
 
   <h2 id="data-ajax" >Loading remote data</h2>
 
@@ -67,7 +67,11 @@ $(".js-example-data-array-selected").select2({
     that should be displayed.
   </p>
 
-  <pre data-fill-from=".js-code-data-ajax-html"></pre>
+{% highlight html linenos %}
+<select class="js-data-example-ajax">
+  <option value="3620194" selected="selected">select2/select2</option>
+</select>
+{% endhighlight %}
 
   <p>
     You can configure how Select2 searches for remote data using the
@@ -76,15 +80,7 @@ $(".js-example-data-array-selected").select2({
     <a href="options.html#ajax">options documentation for <code>ajax</code></a>.
   </p>
 
-  <pre data-fill-from=".js-code-data-ajax"></pre>
-
-  <p>
-    Select2 will pass any options in the <code>ajax</code> object to
-    jQuery's <code>$.ajax</code> function, or the <code>transport</code>
-    function you specify.
-  </p>
-
-<script type="text/x-example-code" class="js-code-data-ajax">
+{% highlight js linenos %}
 $(".js-data-example-ajax").select2({
   ajax: {
     url: "https://api.github.com/search/repositories",
@@ -117,12 +113,11 @@ $(".js-data-example-ajax").select2({
   templateResult: formatRepo, // omitted for brevity, see the source of this page
   templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
 });
-</script>
-
-<script type="text/x-example-code" class="js-code-data-ajax-html">
-<select class="js-data-example-ajax">
-  <option value="3620194" selected="selected">select2/select2</option>
-</select>
-</script>
+{% endhighlight %}
 
+  <p>
+    Select2 will pass any options in the <code>ajax</code> object to
+    jQuery's <code>$.ajax</code> function, or the <code>transport</code>
+    function you specify.
+  </p>
 </section>
diff --git a/docs/_includes/examples/disabled-results.html b/docs/_includes/examples/disabled-results.html
index d8926384..b695a3b6 100644
--- a/docs/_includes/examples/disabled-results.html
+++ b/docs/_includes/examples/disabled-results.html
@@ -19,14 +19,11 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-disabled-results"></pre>
-
-<script type="text/x-example-code" class="js-code-disabled-results">
+{% highlight html linenos %}
 <select class="js-example-disabled-results">
   <option value="one">First</option>
   <option value="two" disabled="disabled">Second (disabled)</option>
   <option value="three">Third</option>
 </select>
-</script>
-
+{% endhighlight %}
 </section>
diff --git a/docs/_includes/examples/hide-search.html b/docs/_includes/examples/hide-search.html
index 8984bab3..0203c1a7 100644
--- a/docs/_includes/examples/hide-search.html
+++ b/docs/_includes/examples/hide-search.html
@@ -14,12 +14,9 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-hide-search"></pre>
-
-<script type="text/x-example-code" class="js-code-hide-search">
+{% highlight js linenos %}
 $(".js-example-basic-hide-search").select2({
   minimumResultsForSearch: Infinity
 });
-</script>
-
+{% endhighlight %}
 </section>
diff --git a/docs/_includes/examples/localization-rtl-diacritics.html b/docs/_includes/examples/localization-rtl-diacritics.html
index 8ced4b83..8b881586 100644
--- a/docs/_includes/examples/localization-rtl-diacritics.html
+++ b/docs/_includes/examples/localization-rtl-diacritics.html
@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="localization-rtl-diacritics" class="page-header">
     Localization, RTL and diacritics support
   </h1>
@@ -26,13 +25,11 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-language"></pre>
-
-<script type="text/x-example-code" class="js-code-language">
+{% highlight js linenos %}
 $(".js-example-language").select2({
   language: "es"
 });
-</script>
+{% endhighlight %}
 
   <h2 id="rtl">RTL support</h2>
 
@@ -48,13 +45,11 @@ $(".js-example-language").select2({
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-rtl"></pre>
-
-<script type="text/x-example-code" class="js-code-rtl">
+{% highlight js linenos %}
 $(".js-example-rtl").select2({
   dir: "rtl"
 });
-</script>
+{% endhighlight %}
 
   <h2 id="diacritics">Diacritics support</h2>
 
@@ -81,10 +76,7 @@ $(".js-example-rtl").select2({
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-diacritics"></pre>
-
-<script type="text/x-example-code" class="js-code-diacritics">
+{% highlight js linenos %}
 $(".js-example-diacritics").select2();
-</script>
-
+{% endhighlight %}
 </section>
diff --git a/docs/_includes/examples/matcher.html b/docs/_includes/examples/matcher.html
index 28ce285a..fbdcf1f2 100644
--- a/docs/_includes/examples/matcher.html
+++ b/docs/_includes/examples/matcher.html
@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="matcher">Customizing how results are matched</h1>
 
   <p>
@@ -22,9 +21,7 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-matcher-start"></pre>
-
-<script type="text/x-example-code" class="js-code-matcher-start">
+{% highlight js linenos %}
 function matchStart (term, text) {
   if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
     return true;
@@ -38,6 +35,5 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
     matcher: oldMatcher(matchStart)
   })
 });
-</script>
-
+{% endhighlight %}
 </section>
diff --git a/docs/_includes/examples/multiple-max.html b/docs/_includes/examples/multiple-max.html
index 84fc16f3..6ec0056e 100644
--- a/docs/_includes/examples/multiple-max.html
+++ b/docs/_includes/examples/multiple-max.html
@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="multiple-max">
     Limiting the number of selections
   </h1>
@@ -17,12 +16,9 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-multiple-limit"></pre>
-
-<script type="text/x-example-code" class="js-code-multiple-limit">
+{% highlight js linenos %}
 $(".js-example-basic-multiple-limit").select2({
   maximumSelectionLength: 2
 });
-</script>
-
+{% endhighlight %}
 </section>
diff --git a/docs/_includes/examples/placeholders.html b/docs/_includes/examples/placeholders.html
index 992ddec2..1b6afda9 100644
--- a/docs/_includes/examples/placeholders.html
+++ b/docs/_includes/examples/placeholders.html
@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="placeholders">Placeholders</h1>
 
   <p>
diff --git a/docs/_includes/examples/programmatic-control.html b/docs/_includes/examples/programmatic-control.html
index cf904f40..375eaa42 100644
--- a/docs/_includes/examples/programmatic-control.html
+++ b/docs/_includes/examples/programmatic-control.html
@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="programmatic-control" class="page-header">
     Programmatic control
   </h1>
diff --git a/docs/_includes/examples/tags.html b/docs/_includes/examples/tags.html
index db36060b..69733a38 100644
--- a/docs/_includes/examples/tags.html
+++ b/docs/_includes/examples/tags.html
@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="tags">Tagging support</h1>
 
   <p>
@@ -22,12 +21,9 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-tags"></pre>
-
-<script type="text/x-example-code" class="js-code-tags">
+{% highlight js linenos %}
 $(".js-example-tags").select2({
   tags: true
 })
-</script>
-
+{% endhighlight %}
 </section>
diff --git a/docs/_includes/examples/themes-templating-responsive-design.html b/docs/_includes/examples/themes-templating-responsive-design.html
index 645d4ff1..15537f74 100644
--- a/docs/_includes/examples/themes-templating-responsive-design.html
+++ b/docs/_includes/examples/themes-templating-responsive-design.html
@@ -27,9 +27,7 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-theme"></pre>
-
-<script type="text/x-example-code" class="js-code-theme">
+{% highlight js linenos %}
 $(".js-example-theme-single").select2({
   theme: "classic"
 });
@@ -37,7 +35,7 @@ $(".js-example-theme-single").select2({
 $(".js-example-theme-multiple").select2({
   theme: "classic"
 });
-</script>
+{% endhighlight %}
 
 <h2 id="templating">Templating</h2>
 
@@ -61,9 +59,7 @@ $(".js-example-theme-multiple").select2({
   </p>
 </div>
 
-<pre data-fill-from=".js-code-templating"></pre>
-
-<script type="text/x-example-code" class="js-code-templating">
+{% highlight js linenos %}
 function formatState (state) {
   if (!state.id) { return state.text; }
   var $state = $(
@@ -75,7 +71,7 @@ function formatState (state) {
 $(".js-example-templating").select2({
   templateResult: formatState
 });
-</script>
+{% endhighlight %}
 
 <h2 id="responsive">Responsive design - Percent width</h2>
 
@@ -94,7 +90,10 @@ $(".js-example-templating").select2({
   </p>
 </div>
 
-<pre data-fill-from=".js-code-responsive"></pre>
+{% highlight html linenos %}
+<select class="js-example-responsive" style="width: 50%"></select>
+<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
+{% endhighlight %}
 
 <div class="alert alert-warning">
   Select2 will do its best to resolve the percent width specified via a
@@ -102,10 +101,4 @@ $(".js-example-templating").select2({
   Select2 is using a percent based width is to inline the
   <code>style</code> declaration into the tag.
 </div>
-
-<script type="text/x-example-code" class="js-code-responsive">
-<select class="js-example-responsive" style="width: 50%"></select>
-<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
-</script>
-
 </section>
diff --git a/docs/_includes/examples/tokenizer.html b/docs/_includes/examples/tokenizer.html
index f10b74e3..6fa04ca6 100644
--- a/docs/_includes/examples/tokenizer.html
+++ b/docs/_includes/examples/tokenizer.html
@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="tokenizer">Automatic tokenization</h1>
 
   <p>
@@ -24,13 +23,10 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-tokenizer"></pre>
-
-<script type="text/x-example-code" class="js-code-tokenizer">
+{% highlight js linenos %}
 $(".js-example-tokenizer").select2({
   tags: true,
   tokenSeparators: [',', ' ']
 })
-</script>
-
+{% endhighlight %}
 </section>