Improve snippet

docs/documentation/layout/level.html

@@ -188,10 +188,7 @@ doc-subtab: level
       </nav>
     </div>
 
-    <div class="bd-example">
-      {{nav_example}}
-    </div>
-    {% highlight html %}{{nav_example}}{% endhighlight %}
+    {% include snippet.html content=nav_example horizontal=true more=true %}
 
     {% include anchor.html name="Centered level" %}
 
@@ -199,17 +196,9 @@ doc-subtab: level
       If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
     </div>
 
-    <div class="bd-example">
-      {{nav_centered_example}}
-    </div>
+    {% include snippet.html content=nav_centered_example horizontal=true more=true %}
 
-    {% highlight html %}{{nav_centered_example}}{% endhighlight %}
-
-    <div class="bd-example">
-      {{nav_centered_bis_example}}
-    </div>
-
-    {% highlight html %}{{nav_centered_bis_example}}{% endhighlight %}
+    {% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
 
     {% include anchor.html name="Mobile level" %}
 
@@ -217,11 +206,7 @@ doc-subtab: level
       By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
     </div>
 
-    <div class="bd-example">
-      {{nav_mobile_example}}
-    </div>
-
-    {% highlight html %}{{nav_mobile_example}}{% endhighlight %}
+    {% include snippet.html content=nav_mobile_example horizontal=true more=true %}
 
   </div>
 </section>