CHG: Split Codes and improve docs codes

1 files changed, 30 insertions, 24 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index c520c87..751b790 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -73,9 +73,9 @@
           <section class="notes">
             <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
           </section>
+
 <!-- position utilities example -->
-<pre>
-<code class="code lang-html" data-lang="HTML"><span class="com">&lt;!-- clear float --&gt;</span>
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- clear float --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;clearfix&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- float: left and right --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;float-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
@@ -91,8 +91,9 @@
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;mt-5&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-10&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-5&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;</code>
-</pre>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;pt-5&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
         </section>
 
         <section id="display" class="container">
@@ -100,9 +101,9 @@
           <section class="notes">
             <p><strong>Display utilities</strong> are used for display and hidden things.</p>
           </section>
+
 <!-- display utilities example -->
-<pre>
-<code class="code lang-html" data-lang="HTML"><span class="com">&lt;!-- display: block; --&gt;</span>
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- display: block; --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;block&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- display: inline; --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;inline&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
@@ -119,8 +120,9 @@
 <span class="com">&lt;!-- visibility: hidden; --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;invisible&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- hide text contents --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;</code>
-</pre>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-hide&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
         </section>
 
         <section id="text" class="container">
@@ -128,9 +130,9 @@
           <section class="notes">
             <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p>
           </section>
+
 <!-- text utilities example -->
-<pre>
-<code class="code lang-html" data-lang="HTML"><span class="com">&lt;!-- left-aligned text --&gt;</span>
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- left-aligned text --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- center-aligned text --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-center&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
@@ -160,21 +162,23 @@
 <span class="com">&lt;!-- Overflow behavior: truncate the text --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-clip&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- Text may be broken at arbitrary points --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-break&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;</code>
-</pre>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-break&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
         </section>
 
         <section id="shapes" class="container">
           <section class="notes">
             <p><strong>Shape utilities</strong> are used for change element shapes.</p>
           </section>
+
 <!-- shape utilities example -->
-<pre>
-<code class="code lang-html" data-lang="HTML"><span class="com">&lt;!-- rounded element --&gt;</span>
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- rounded element --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;rounded&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- circle element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;circle&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;</code>
-</pre>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;circle&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
         </section>
 
         <section id="divider" class="container">
@@ -187,11 +191,12 @@
               <div class="divider mt-10"></div>
             </div>
           </div>
+
 <!-- shape utilities example -->
-<pre>
-<code class="code lang-html" data-lang="HTML"><span class="com">&lt;!-- divider element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;</code>
-</pre>
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- divider element --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
         </section>
 
         <section id="loading" class="container">
@@ -204,11 +209,12 @@
               <div class="loading"></div>
             </div>
           </div>
+
 <!-- loading example -->
-<pre>
-<code class="code lang-html" data-lang="HTML"><span class="com">&lt;!-- loading element --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;loading&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;</code>
-</pre>
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- loading element --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;loading&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
         </section>
 
         <section class="container">