Switched examples to use Jekyll's highlighting

This fixes some bugs that were present in the old Prettify highlighter
when there was a mix of JavaScript and HTML in the same code block. Now
with Rouge, the highlighter used by Jekyll, these cases are properly
handled and HTML no longer looks strange.

This does not convert all of the code blocks over, because there are
still some code blocks which double as the actual JavaScript code
powering the example that need to be migrated.

docs/_includes/examples/basics.html

@@ -22,19 +22,19 @@
     </p>
   </div>
 
-  <pre class="code" data-fill-from=".js-code-basic"></pre>
+{% highlight html linenos %}
-
+<script type="text/javascript">
-<script type="text/x-example-code" class="js-code-basic">
 $(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>
+{% highlight html linenos %}
-
+<script type="text/javascript">
-<script type="text/x-example-code" class="js-code-multiple">
 $(".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>

docs/_includes/examples/data.html

@@ -26,9 +26,8 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-data-array"></pre>
+{% highlight html linenos %}
-
+<script type="text/javascript">
-<script type="text/x-example-code" class="js-code-data-array">
 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>
+{% highlight js linenos %}
-
-  <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">
 $(".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>
+{% endhighlight %}
-
-<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>
 
+  <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>

docs/_includes/examples/disabled-results.html

@@ -19,14 +19,11 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-disabled-results"></pre>
+{% highlight html linenos %}
-
-<script type="text/x-example-code" class="js-code-disabled-results">
 <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>

docs/_includes/examples/hide-search.html

@@ -14,12 +14,9 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-hide-search"></pre>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-hide-search">
 $(".js-example-basic-hide-search").select2({
   minimumResultsForSearch: Infinity
 });
-</script>
+{% endhighlight %}
-
 </section>

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>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-language">
 $(".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>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-rtl">
 $(".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>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-diacritics">
 $(".js-example-diacritics").select2();
-</script>
+{% endhighlight %}
-
 </section>

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>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-matcher-start">
 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>

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>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-multiple-limit">
 $(".js-example-basic-multiple-limit").select2({
   maximumSelectionLength: 2
 });
-</script>
+{% endhighlight %}
-
 </section>

docs/_includes/examples/placeholders.html

@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="placeholders">Placeholders</h1>
 
   <p>

docs/_includes/examples/programmatic-control.html

@@ -1,5 +1,4 @@
 <section>
-
   <h1 id="programmatic-control" class="page-header">
     Programmatic control
   </h1>

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>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-tags">
 $(".js-example-tags").select2({
   tags: true
 })
-</script>
+{% endhighlight %}
-
 </section>

docs/_includes/examples/themes-templating-responsive-design.html

@@ -27,9 +27,7 @@
     </p>
   </div>
 
-  <pre data-fill-from=".js-code-theme"></pre>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-theme">
 $(".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>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-templating">
 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>

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>
+{% highlight js linenos %}
-
-<script type="text/x-example-code" class="js-code-tokenizer">
 $(".js-example-tokenizer").select2({
   tags: true,
   tokenSeparators: [',', ' ']
 })
-</script>
+{% endhighlight %}
-
 </section>