Switched options page to use Jekyll highlighting

docs/_includes/options/core/amd-support.html

@@ -19,10 +19,10 @@
     If you are using Select2 in a build environment where preexisting module names are changed during a build step, Select2 may not be able to find optional dependencies or language files. You can manually set the prefixes to use for these files using the <code>amdBase</code> and <code>amdLanugageBase</code> options.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $.fn.select2.defaults.set('amdBase', 'select2/');
 $.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/');
-</pre>
+{% endhighlight %}
 
   <h3>
     Select2 is being placed before jQuery in my JavaScript file

docs/_includes/options/core/data-attributes.html

@@ -22,21 +22,21 @@
     This means that if you declare your <code>&lt;select&gt;</code> tag as...
   </p>
 
-<pre class="prettyprint">
-&lt;select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"&gt;&lt;/select&gt;
-</pre>
+{% highlight html linenos %}
+<select data-tags="true" data-placeholder="Select an option" data-allow-clear="true"></select>
+{% endhighlight %}
 
   <p>
     Will be interpreted the same as initializing Select2 as...
   </p>
 
-<pre class="prettyprint linenums">
+{% highlight js linenos %}
 $("select").select2({
   tags: "true",
   placeholder: "Select an option",
   allowClear: true
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     Are options with nested configurations supported?
@@ -51,22 +51,22 @@ $("select").select2({
     <a href="https://github.com/select2/select2/issues/2969">do not work in jQuery 1.x</a>.
   </p>
 
-<pre class="prettyprint">
-&lt;select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"&gt;&lt;/select&gt;
-</pre>
+{% highlight html linenos %}
+<select data-ajax--url="http://example.org/api/test" data-ajax--cache="true"></select>
+{% endhighlight %}
 
   <p>
     Which will be interpreted the same as initializing Select2 with...
   </p>
 
-<pre class="prettyprint linenums">
+{% highlight js linenos %}
 $("select").select2({
   ajax: {
     url: "http://example.org/api/test",
     cache: true
   }
 });
-</pre>
+{% endhighlight %}
 
   <p>
     The value of the option is subject to jQuery's

docs/_includes/options/core/options.html

@@ -7,19 +7,19 @@
     Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call <code>.select2()</code> on any jQuery element where you would like to initialize Select2.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2();
-</pre>
+{% endhighlight %}
 
   <p>
     You can optionally pass an object containing all of the options that you would like to initialize Select2 with.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   placeholder: 'Select an option'
 });
-</pre>
+{% endhighlight %}
 
   <h3 id="setting-default-options">
     Can default options be set for all dropdowns?
@@ -45,9 +45,9 @@ $('select').select2({
     <code>$.fn.select2.defaults.set("key", "value")</code>.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $.fn.select2.defaults.set("theme", "classic");
-</pre>
+{% endhighlight %}
 
   <h3>
     How can I set a default value for a nested option?
@@ -62,9 +62,9 @@ $.fn.select2.defaults.set("theme", "classic");
     string.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $.fn.select2.defaults.set("ajax--cache", false);
-</pre>
+{% endhighlight %}
 
   <h3>
     How can I reset all of the global default options?
@@ -74,7 +74,7 @@ $.fn.select2.defaults.set("ajax--cache", false);
     You can reset the default options to their initial values by calling
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $.fn.select2.defaults.reset();
-</pre>
+{% endhighlight %}
 </section>

docs/_includes/options/data/ajax.html

@@ -29,7 +29,7 @@
     You can use the <code>ajax.processResults</code> option to modify the data returned from the server before passing it to Select2.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     url: '/example/api',
@@ -40,7 +40,7 @@ $('select').select2({
     }
   }
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     A request is being triggered on every key stroke, can I delay this?
@@ -50,14 +50,14 @@ $('select').select2({
     By default, Select2 will trigger a new AJAX request whenever the user changes their search term. You can set a time limit for debouncing requests using the <code>ajax.delay</code> option.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     url: '/example/api',
     delay: 250
   }
 });
-</pre>
+{% endhighlight %}
 
   <p>
     This will tell Select2 to wait 250 milliseconds before sending the request out to your API.
@@ -71,7 +71,7 @@ $('select').select2({
     By default, Select2 will send the query term as well as the pagination data as query parameters in requests. You can override the data that is sent to your API, or change any of the query paramters, by overriding the <code>ajax.data</codE> option.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     data: function (params) {
@@ -85,7 +85,7 @@ $('select').select2({
     }
   }
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     Can an AJAX plugin other than <code>jQuery.ajax</code> be used?
@@ -95,7 +95,7 @@ $('select').select2({
     Select2 uses the transport method defined in <code>ajax.transport</code> to send requests to your API. By default, this transport method is <code>jQuery.ajax</code> but this can be changed.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     transport: function (params, success, failure) {
@@ -105,5 +105,5 @@ $('select').select2({
     }
   }
 });
-</pre>
+{% endhighlight %}
 </section>

docs/_includes/options/data/array.html

@@ -7,7 +7,7 @@
     While Select2 is designed to be used with a <code>&lt;select&gt;</code> tag, the data that is used to search through and display the results can be loaded from a JavaScript array using the <code>data</code> option. This option should be passed in during the initialization of Select2.
   </p>
 
-<pre class="prettyprint linenums">
+{% highlight js linenos %}
 $('select').select2({
   data: [
     {
@@ -17,7 +17,7 @@ $('select').select2({
     // ... more data objects ...
   ]
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     What properties are required on the objects passed in to the array?
@@ -35,7 +35,7 @@ $('select').select2({
     Nested results should be specified using the <code>children</code> property on the data objects that are passed in. This <code>children</code> property should be an array of data objects that are grouped under this option, and the label for the group should be specified as the <code>text</code> property on the root data object.
   </p>
 
-<pre class="prettyprint linenums">
+{% highlight js linenos %}
 {
   text: 'Group label',
   children: [
@@ -46,7 +46,7 @@ $('select').select2({
     // ... more data objects ...
   ]
 }
-</pre>
+{% endhighlight %}
 
   <h3>
     How many levels of nesting are allowed?

docs/_includes/options/data/select.html

@@ -15,13 +15,13 @@
     A standard <code>&lt;select&gt;</code> box can display nested options by wrapping them with in an <code>&lt;optgroup&gt;</code> tag.
   </p>
 
-<pre class="prettyprint">
-&lt;select&gt;
-  &lt;optgroup label="Group Name"&gt;
-    &lt;option&gt;Nested option&lt;/option&gt;
-  &lt;/optgroup&gt;
-&lt;/select&gt;
-</pre>
+{% highlight html linenos %}
+<select>
+  <optgroup label="Group Name">
+    <option>Nested option</option>
+  </optgroup>
+</select>
+{% endhighlight %}
 
   <h3>
     How many levels of nesting can there be?
@@ -47,23 +47,23 @@
     Select2 will convert the <code>&lt;option&gt;</code> tag into a data object based on the following rules.
   </p>
 
-<pre class="prettyprint linenums">
+{% highlight js linenos %}
 {
   "id": "value attribute" || "option text",
   "text": "label attribute" || "option text",
   "element": HTMLOptionElement
 }
-</pre>
+{% endhighlight %}
 
   <p>
     And <code>&lt;optgroup&gt;</code> tags will be converted into data objects using the following rules
   </p>
 
-<pre class="prettyprint linenums">
+{% highlight js linenos %}
 {
   "text": "label attribute",
   "children": [ option data object, ... ],
   "elment": HTMLOptGroupElement
 }
-</pre>
+{% endhighlight %}
 </section>

docs/_includes/options/dropdown/filtering.html

@@ -7,13 +7,13 @@
     Can Select2 wait until the user has typed a search term before triggering the request?
   </h3>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   ajax: {
     delay: 250 // wait 250 milliseconds before triggering the request
   }
 });
-</pre>
+{% endhighlight %}
 
   {% include options/not-written.html %}
 
@@ -21,11 +21,11 @@ $('select').select2({
     Select2 is allowing long search terms, can this be prevented?
   </h3>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   maximumInputLength: 20 // only allow terms up to 20 characters long
 });
-</pre>
+{% endhighlight %}
 
   {% include options/not-written.html %}
 
@@ -33,11 +33,11 @@ $('select').select2({
     I only want the search box if there are enough results
   </h3>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   minimumResultsForSearch: 20 // at least 20 results must be displayed
 });
-</pre>
+{% endhighlight %}
 
   {% include options/not-written.html %}
 
@@ -45,11 +45,11 @@ $('select').select2({
     How can I permanently hide the search box?
   </h3>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   minimumResultsForSearch: Infinity
 });
-</pre>
+{% endhighlight %}
 
   {% include options/not-written.html %}
 </section>

docs/_includes/options/dropdown/placement.html

@@ -13,11 +13,11 @@
     Can I pick an element for the dropdown to be appended to?
   </h3>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   dropdownParent: $('#my_amazing_modal')
 });
-</pre>
+{% endhighlight %}
 
   {% include options/not-written.html %}
 

docs/_includes/options/dropdown/selections.html

@@ -7,11 +7,11 @@
     Can I select the highlighted result when the dropdown is closed?
   </h3>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   selectOnClose: true
 });
-</pre>
+{% endhighlight %}
 
   {% include options/not-written.html %}
 
@@ -19,11 +19,11 @@ $('select').select2({
     Can I prevent the dropdown from closing when a result is selected?
   </h3>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   closeOnSelect: false
 });
-</pre>
+{% endhighlight %}
 
   {% include options/not-written.html %}
 </section>

docs/_includes/options/selections/clearing-selections.html

@@ -7,12 +7,12 @@
     You can allow people to clear their current selections with the <code>allowClear</code> option when initializing Select2. Setting this option to <code>true</code> will enable an "x" icon that will reset the selection to the placeholder.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   placeholder: 'This is my placeholder',
   allowClear: true
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     Why is a placeholder required?

docs/_includes/options/selections/placeholder.html

@@ -7,11 +7,11 @@
     Select2 supports displaying a placeholder by default using the <code>placeholder</code> option. This can be either a data object matching the placeholder option, or a string to display as the placeholder if you are using a blank placeholder option.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   placeholder: 'Select an option'
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     My first option is being displayed instead of my placeholder
@@ -41,14 +41,14 @@ $('select').select2({
     The <code>placeholder</code> option allows you to pass in a data object instead of just a string if you need more flexibility. The <code>id</code> of the data object should match the <code>value</code> of the placeholder option.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   placeholder: {
     id: '-1', // the value of the option
     text: 'Select an option'
   }
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     Can I change how the placeholder looks?
@@ -58,7 +58,7 @@ $('select').select2({
     When using Select2 <strong>when only a single selection can be made</strong>, the placeholder option will be passed through the standard templating methods, incluidng the <code>templateSelection</code> option, so you are able to change how it is displayed.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 $('select').select2({
   templateResult: function (data) {
     if (data.id === '') { // adjust for custom placeholder values
@@ -68,7 +68,7 @@ $('select').select2({
     return data.text;
   }
 });
-</pre>
+{% endhighlight %}
 
   <p>
     <strong>When multiple selections are allowed</strong>, the placeholder will be displayed using the <code>placeholder</code> attribute on the search box. You can cusotmize the display of this placholder using CSS, as explained in the following Stack Overflow answer: <a href="http://stackoverflow.com/q/2610497/359284">Change an input's HTML5 placeholder color with CSS</a>

docs/_includes/options/selections/templating.html

@@ -7,7 +7,7 @@
     When a selection is made by the user Select2 will display the text of the option by default, just like how it is displayed in a standard select box.  You can override the display of the selection by setting the <code>templateSelection</code> option to a JavaScript function.
   </p>
 
-<pre class="prettyprint">
+{% highlight js linenos %}
 function template(data, container) {
   return data.text;
 }
@@ -15,7 +15,7 @@ function template(data, container) {
 $('select').select2({
   templateSelection: template
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     Nothing is being displayed when I select an option