Switched options page to use Jekyll highlighting

select2 · Feb 14, 2016 · 75163d6 · 75163d6
1 parent a126b53
commit 75163d6
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 69 deletions.
diff --git a/docs/_includes/options/core/amd-support.html b/docs/_includes/options/core/amd-support.html
@@ -19,10 +19,10 @@ <h3>
     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

diff --git a/docs/_includes/options/core/data-attributes.html b/docs/_includes/options/core/data-attributes.html
@@ -22,21 +22,21 @@ <h3>
     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 @@ <h3>
     <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

diff --git a/docs/_includes/options/core/options.html b/docs/_includes/options/core/options.html
@@ -7,19 +7,19 @@ <h2 id="options">
     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 @@ <h3 id="setting-default-options">
     <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 @@ <h3>
     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 @@ <h3>
     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>
diff --git a/docs/_includes/options/data/ajax.html b/docs/_includes/options/data/ajax.html
@@ -29,7 +29,7 @@ <h3>
     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 @@ <h3>
     }
   }
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     A request is being triggered on every key stroke, can I delay this?
@@ -50,14 +50,14 @@ <h3>
     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 @@ <h3>
     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 @@ <h3>
     }
   }
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     Can an AJAX plugin other than <code>jQuery.ajax</code> be used?
@@ -95,7 +95,7 @@ <h3>
     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 @@ <h3>
     }
   }
 });
-</pre>
+{% endhighlight %}
 </section>
diff --git a/docs/_includes/options/data/array.html b/docs/_includes/options/data/array.html
@@ -7,7 +7,7 @@ <h2 id="data">
     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 @@ <h2 id="data">
     // ... more data objects ...
   ]
 });
-</pre>
+{% endhighlight %}
 
   <h3>
     What properties are required on the objects passed in to the array?
@@ -35,7 +35,7 @@ <h3>
     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 @@ <h3>
     // ... more data objects ...
   ]
 }
-</pre>
+{% endhighlight %}
 
   <h3>
     How many levels of nesting are allowed?

diff --git a/docs/_includes/options/data/select.html b/docs/_includes/options/data/select.html
@@ -15,13 +15,13 @@ <h3>
     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 @@ <h3>
     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>
diff --git a/docs/_includes/options/dropdown/filtering.html b/docs/_includes/options/dropdown/filtering.html
@@ -7,49 +7,49 @@ <h3>
     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 %}
 
   <h3>
     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 %}
 
   <h3>
     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 %}
 
   <h3>
     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>
diff --git a/docs/_includes/options/dropdown/placement.html b/docs/_includes/options/dropdown/placement.html
@@ -13,11 +13,11 @@ <h3 id="dropdownParent">
     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 %}
 

diff --git a/docs/_includes/options/dropdown/selections.html b/docs/_includes/options/dropdown/selections.html
@@ -7,23 +7,23 @@ <h3>
     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 %}
 
   <h3>
     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>
diff --git a/docs/_includes/options/selections/clearing-selections.html b/docs/_includes/options/selections/clearing-selections.html
@@ -7,12 +7,12 @@ <h2 id="allowClear">
     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?