Improve snippet

docs/documentation/components/breadcrumb.html

@@ -162,8 +162,6 @@ variables:
     <hr>
     {% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_example}}{% endhighlight %}
-
     {% include anchor.html name="Alignment" %}
 
     <div class="content">
@@ -172,12 +170,8 @@ variables:
 
     {% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_right_example}}{% endhighlight %}
-
     {% include anchor.html name="Icons" %}
 
     <div class="content">
@@ -186,8 +180,6 @@ variables:
 
     {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_icons_example}}{% endhighlight %}
-
     {% include anchor.html name="Alternative separators" %}
 
     <div class="content">
@@ -196,20 +188,12 @@ variables:
 
     {% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
-
     {% include anchor.html name="Sizes" %}
 
     <div class="content">
@@ -218,16 +202,10 @@ variables:
 
     {% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %}
-
     {% include variables.html %}
 
   </div>

docs/documentation/components/modal.html

@@ -165,7 +165,9 @@ variables:
       </p>
     </div>
 
-    {% highlight html %}{{ modal_card }}{% endhighlight %}
+    <div class="highlight-full">
+      {% highlight html %}{{ modal_card }}{% endhighlight %}
+    </div>
 
     {% include variables.html %}
 

docs/documentation/components/navbar.html

@@ -767,7 +767,9 @@ document.addEventListener('DOMContentLoaded', function () {
         </li>
         <li>
           a container for almost <strong>anything</strong> you want, like a <code>field</code>
-          {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
+          <div class="highlight-full">
+            {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
+          </div>
         </li>
       </ul>
       <p>
@@ -800,11 +802,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </p>
     </div>
 
-    <div class="bd-example is-paddingless">
-      {{navbar_transparent_example}}
-    </div>
-
-    {% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
+    {% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
 
     {% include anchor.html name="Dropdown menu" %}
 

docs/documentation/components/pagination.html

@@ -205,7 +205,7 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=pagination_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_example horizontal=true more=true %}
 
     <div class="content">
       <p>
@@ -213,7 +213,7 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=pagination_options_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_options_example horizontal=true more=true %}
 
     <div class="content">
       <p>
@@ -221,9 +221,9 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=pagination_centered_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_centered_example horizontal=true more=true %}
 
-    {% include snippet.html content=pagination_right_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_right_example horizontal=true more=true %}
 
     {% include anchor.html name="Sizes" %}
 
@@ -232,11 +232,11 @@ variables:
       You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
     </p>
 
-    {% include snippet.html content=pagination_small_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_small_example horizontal=true more=true %}
 
-    {% include snippet.html content=pagination_medium_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_medium_example horizontal=true more=true %}
 
-    {% include snippet.html content=pagination_large_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_large_example horizontal=true more=true %}
 
     {% include variables.html %}
 

docs/documentation/components/tabs.html

@@ -384,7 +384,7 @@ variables:
 
     {% include snippet.html content=tabs_example horizontal=true %}
 
-    {% include snippet.html content=tabs_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_example horizontal=true more=true %}
 
     {% include anchor.html name="Alignment" %}
 
@@ -394,9 +394,9 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=tabs_centered_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_centered_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_right_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_right_example horizontal=true more=true %}
 
     {% include anchor.html name="Icons" %}
 
@@ -404,20 +404,20 @@ variables:
       <p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
     </div>
 
-    {% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_icons_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_icons_example horizontal=true more=true %}
 
     {% include anchor.html name="Sizes" %}
     <div class="content">
       <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
     </div>
 
-    {% include snippet.html content=tabs_small_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_small_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_medium_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_medium_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_large_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_large_example horizontal=true more=true %}
 
     {% include anchor.html name="Styles" %}
 
@@ -425,19 +425,19 @@ variables:
       If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
     </div>
 
-    {% include snippet.html content=tabs_boxed_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
 
     <p class="content">
       If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
     </p>
 
-    {% include snippet.html content=tabs_toggle_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
 
     <p class="content">
       If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
     </p>
 
-    {% include snippet.html content=tabs_fullwidth_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
 
     {% include anchor.html name="Combining" %}
 
@@ -445,13 +445,13 @@ variables:
       <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
     </div>
 
-    {% include snippet.html content=tabs_centered_boxed_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
 
     {% include variables.html %}