From 0257a6659069bad73a2c4f346ff70565a994a0e2 Mon Sep 17 00:00:00 2001
From: alexweissman <alex@alexanderweissman.com>
Date: Sun, 3 Sep 2017 00:40:02 -0400
Subject: [PATCH] fix theme examples

---
 pages/03.appearance/02.theming/docs.md | 46 ++++++++++++++------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/pages/03.appearance/02.theming/docs.md b/pages/03.appearance/02.theming/docs.md
index a7d51ef5..8d09a547 100644
--- a/pages/03.appearance/02.theming/docs.md
+++ b/pages/03.appearance/02.theming/docs.md
@@ -9,28 +9,24 @@ never_cache_twig: true
 
 ## Theme support
 
+Select2 supports custom themes using the `theme` option so you can style Select2 to match the rest of your application.
+
+These examples use the `classic` theme, which matches the old look of Select2.
+
+<div class="s2-example">
   <p>
-    Select2 supports custom themes using the
-    <a href="options.html#theme">theme option</a>
-    so you can style Select2 to match the rest of your application.
+    <select class="js-example-theme-single js-states form-control">
+    </select>
   </p>
-
   <p>
-    These are using the <code>classic</code> theme, which matches the old
-    look of Select2.
+    <select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
   </p>
+</div>
 
-  <div class="s2-example">
-    <p>
-      <select class="js-example-theme-single js-states form-control">
-      </select>
-    </p>
-    <p>
-      <select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
-    </p>
-  </div>
+<pre data-fill-from=".js-code-example-theme"></pre>
+
+<script type="text/javascript" class="js-code-example-theme">
 
-```
 $(".js-example-theme-single").select2({
   theme: "classic"
 });
@@ -38,12 +34,10 @@ $(".js-example-theme-single").select2({
 $(".js-example-theme-multiple").select2({
   theme: "classic"
 });
-```
 
-Various display options of the Select2 component can be changed:
-You can access the <code>&lt;option&gt;</code> element
-(or <code>&lt;optgroup&gt;</code>) and any attributes on those elements
-using <code>.element</code>.
+</script>
+
+Various display options of the Select2 component can be changed.  You can access the `<option>` element (or `<optgroup>`) and any attributes on those elements using `.element`.
 
 ## Responsive design - Percent width
 
@@ -65,4 +59,14 @@ width respectively.
 <select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
 ```
 
+<pre data-fill-from=".js-code-example-responsive"></pre>
+
+<script type="text/javascript" class="js-code-example-responsive">
+
+$(".js-example-responsive").select2({
+    width: 'resolve' // need to override the changed default
+});
+
+</script>
+
 >>>> Select2 will do its best to resolve the percent width specified via a CSS class, but it is not always possible. The best way to ensure that Select2 is using a percent based width is to inline the `style` declaration into the tag.