From 74387b98632c75b06d15d83ad5359b9daf0f5dcb Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@kevin-brown.com>
Date: Sat, 30 Jan 2016 18:09:01 -0500
Subject: [PATCH] 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           | 17 ++++-----
 docs/_includes/examples/data.html             | 37 ++++++++-----------
 docs/_includes/examples/disabled-results.html |  7 +---
 docs/_includes/examples/hide-search.html      |  7 +---
 .../examples/localization-rtl-diacritics.html | 20 +++-------
 docs/_includes/examples/matcher.html          |  8 +---
 docs/_includes/examples/multiple-max.html     |  8 +---
 docs/_includes/examples/placeholders.html     |  1 -
 .../examples/programmatic-control.html        |  1 -
 docs/_includes/examples/tags.html             |  8 +---
 .../themes-templating-responsive-design.html  | 23 ++++--------
 docs/_includes/examples/tokenizer.html        |  8 +---
 12 files changed, 50 insertions(+), 95 deletions(-)

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>