Improve snippet

docs/documentation/modifiers/syntax.html

@@ -7,6 +7,18 @@ doc-subtab: syntax
 
 {% include subnav-modifiers.html %}
 
+{% capture button_example %}
+<a class="button">
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_primary_example %}
+<a class="button is-primary">
+  Button
+</a>
+{% endcapture %}
+
 <section class="section">
   <div class="container">
     <h1 class="title">Modifiers syntax</h1>
@@ -18,40 +30,26 @@ doc-subtab: syntax
       <div class="column">
         <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
       </div>
-{% capture button_example %}
-<a class="button">
-  Button
-</a>
-{% endcapture %}
       <div class="column">
         <p>
           {{button_example}}
         </p>
       </div>
       <div class="column is-half">
-{% highlight html %}
-{{button_example}}
-{% endhighlight %}
+        {% highlight html %}{{button_example}}{% endhighlight %}
       </div>
     </div>
     <div class="columns">
       <div class="column">
         <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
       </div>
-{% capture button_primary_example %}
-<a class="button is-primary">
-  Button
-</a>
-{% endcapture %}
       <div class="column">
         <p>
-{{button_primary_example}}
+          {{button_primary_example}}
         </p>
       </div>
       <div class="column is-half">
-{% highlight html %}
-{{button_primary_example}}
-{% endhighlight %}
+        {% highlight html %}{{button_primary_example}}{% endhighlight %}
       </div>
     </div>
     <div class="columns">
@@ -85,6 +83,7 @@ doc-subtab: syntax
         </p>
       </div>
       <div class="column is-half">
+        <div class="highlight-full">
 {% highlight html %}
 <a class="button is-primary">
   Button
@@ -102,6 +101,7 @@ doc-subtab: syntax
   Button
 </a>
 {% endhighlight %}
+        </div>
       </div>
     </div>
     <div class="columns">