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>
-
-<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>

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>

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>

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>

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>

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>

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>

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

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>