feat(index.html): add <pre> tag.

nostalgic-css · Feb 7, 2019 · 12116af · 12116af
1 parent 6447372
commit 12116af
Showing 1 changed file with 30 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -56,15 +56,15 @@ <h2 class="title">Buttons</h2>
       <span class="nes-balloon from-right copied" id="copied-buttons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-buttons">
-      <code>
+      <pre><code>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn&quot;&gt;Normal&lt;/button&gt;</p>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-primary&quot;&gt;Primary&lt;/button&gt;</p>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-success&quot;&gt;Success&lt;/button&gt;</p>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-warning&quot;&gt;Warning&lt;/button&gt;</p>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-error&quot;&gt;Error&lt;/button&gt;</p>
         <p>&lt;button type=&quot;button&quot; class=&quot;nes-btn is-disabled&quot;&gt;Disabled&lt;/button&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('buttons')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -89,7 +89,7 @@ <h2 class="title">Containers</h2>
       <span class="nes-balloon from-right copied" id="copied-containers">Copied!</span>
     </section>
     <section class="nes-container code" id="code-containers">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;nes-container with-title is-centered&quot;&gt;
           &lt;p class=&quot;title&quot;&gt;Container.is-centered&lt;/p&gt;
           &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
@@ -105,7 +105,7 @@ <h2 class="title">Containers</h2>
           &lt;p&gt;Good morning. Thou hast had a good night's sleep, I hope.&lt;/p&gt;
         &lt;/div&gt;
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('containers')">Copy</button>
-      </code>
+      </code></pre>
     </section>
     <section class="nes-container with-title">
       <h2 class="title">Radios</h2>
@@ -123,7 +123,7 @@ <h2 class="title">Radios</h2>
       <span class="nes-balloon from-right copied" id="copied-radios">Copied!</span>
     </section>
     <section class="nes-container code" id="code-radios">
-      <code>
+      <pre><code>
         <p>&lt;label&gt;
           &lt;input type=&quot;radio&quot; class=&quot;nes-radio&quot; name=&quot;answer&quot; checked /&gt;
           &lt;span&gt;Yes&lt;/span&gt;
@@ -133,7 +133,7 @@ <h2 class="title">Radios</h2>
           &lt;span&gt;No&lt;/span&gt;
         &lt;/label&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('radios')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -152,7 +152,7 @@ <h2 class="title">Checkboxes</h2>
       <span class="nes-balloon from-right copied" id="copied-checkboxes">Copied!</span>
     </section>
     <section class="nes-container code" id="code-checkboxes">
-      <code>
+      <pre><code>
         <p>&lt;label&gt;
           &lt;input type=&quot;checkbox&quot; class=&quot;nes-checkbox&quot; checked /&gt;
           &lt;span>Enable&lt;/span&gt;
@@ -162,7 +162,7 @@ <h2 class="title">Checkboxes</h2>
           &lt;span&gt;Dark&lt;/span&gt;
         &lt;/label&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('checkboxes')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -181,7 +181,7 @@ <h2 class="title">Avatars</h2>
       <span class="nes-balloon from-right copied" id="copied-avatars">Copied!</span>
     </section>
     <section class="nes-container code" id="code-avatars">
-      <code>
+      <pre><code>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small&quot;&gt;</p>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar&quot;&gt;</p>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium&quot;&gt;</p>
@@ -191,7 +191,7 @@ <h2 class="title">Avatars</h2>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium is-rounded&quot;&gt;</p>
         <p>&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large is-rounded&quot;&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="form nes-container with-title">
@@ -255,7 +255,7 @@ <h2 class="title">Form</h2>
       <span class="nes-balloon from-right copied" id="copied-form">Copied!</span>
     </section>
     <section class="nes-container code" id="code-form">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;nes-field&quot;&gt;
           &lt;label for=&quot;name_field&quot;&gt;Your name&lt;/label&gt;
           &lt;input type=&quot;text&quot; id=&quot;name_field&quot; class=&quot;nes-input&quot;&gt;
@@ -307,7 +307,7 @@ <h2 class="title">Form</h2>
             &lt;/select&gt;
           &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('form')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="balloon nes-container with-title">
@@ -330,7 +330,7 @@ <h2 class="title">Balloons</h2>
       <span class="nes-balloon from-right copied" id="copied-balloons">Copied!</span>
     </section>
     <section class="nes-container code" id="code-balloons">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;message -left&quot;&gt;
           &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
           &lt;div class=&quot;nes-balloon from-left&quot;&gt;
@@ -344,7 +344,7 @@ <h2 class="title">Balloons</h2>
           &lt;i class=&quot;nes-bcrikko&quot;&gt;&lt;/i&gt;
         &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('balloons')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -372,7 +372,7 @@ <h2 class="title">Lists</h2>
       <span class="nes-balloon from-right copied" id="copied-lists">Copied!</span>
     </section>
     <section class="nes-container code" id="code-lists">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;lists&quot;&gt;
           &lt;ul class=&quot;nes-list is-disc&quot;&gt;
             &lt;li&gt;Good morning.&lt;/li&gt;
@@ -391,7 +391,7 @@ <h2 class="title">Lists</h2>
           &lt;/ul&gt;
         &lt;/div&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('lists')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -452,7 +452,7 @@ <h2 class="title">Table</h2>
       <span class="nes-balloon from-right copied" id="copied-table">Copied!</span>
     </section>
     <section class="nes-container code" id="code-table">
-      <code>
+      <pre><code>
         <p>&lt;div class=&quot;nes-table-responsive&quot;&gt;
         &lt;table class=&quot;nes-table is-bordered is-centered&quot;&gt;
           &lt;thead&gt;
@@ -505,7 +505,7 @@ <h2 class="title">Table</h2>
           &lt;/tbody&gt;
         &lt;/table&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('table')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -522,15 +522,15 @@ <h2 class="title">Progress</h2>
       <span class="nes-balloon from-right copied" id="copied-progress">Copied!</span>
     </section>
     <section class="nes-container code" id="code-progress">
-      <code>
+      <pre><code>
         <p>&lt;progress class=&quot;nes-progress&quot; value=&quot;90&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <p>&lt;progress class=&quot;nes-progress is-primary&quot; value=&quot;80&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <p>&lt;progress class=&quot;nes-progress is-success&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <p>&lt;progress class=&quot;nes-progress is-warning&quot; value=&quot;30&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <p>&lt;progress class=&quot;nes-progress is-error&quot; value=&quot;10&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <p>&lt;progress class=&quot;nes-progress is-pattern&quot; value=&quot;50&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('progress')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title" class="badges">
@@ -574,7 +574,7 @@ <h2 class="title">Badges</h2>
       <span class="nes-balloon from-right copied" id="copied-badges">Copied!</span>
     </section>
     <section class="nes-container code" id="code-badges">
-      <code>
+      <pre><code>
         <p>&lt;a href=&quot;#&quot; class=&quot;nes-badge&quot;&gt;
             &lt;span class=&quot;is-dark&quot;&gt;NES.css&lt;/span&gt;
         &lt;/a&gt;</p>
@@ -609,7 +609,7 @@ <h2 class="title">Badges</h2>
             &lt;span class=&quot;is-warning&quot;&gt;Text&lt;/span&gt;
         &lt;/a&gt;</p>
         <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('badges')">Copy</button>
-      </code>
+      </code></pre>
     </section>
 
     <section class="nes-container with-title">
@@ -650,7 +650,7 @@ <h3 class="title">Reaction</h3>
         <span class="nes-balloon from-right copied" id="copied-reaction">Copied!</span>
       </section>
       <section class="nes-container code" id="code-reaction">
-        <code>
+        <pre><code>
           <p>&lt;i class=&quot;nes-icon heart is-small&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon heart&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon heart is-medium&quot;&gt;&lt;/i&gt;</p>
@@ -680,7 +680,7 @@ <h3 class="title">Reaction</h3>
           <p>&lt;i class=&quot;nes-icon like is-large&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon like is-empty&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('reaction')">Copy</button>
-        </code>
+        </code></pre>
       </section>
 
       <section class="nes-container with-title">
@@ -745,7 +745,7 @@ <h3 class="title">SNS</h3>
         <span class="nes-balloon from-right copied" id="copied-sns">Copied!</span>
       </section>
       <section class="nes-container code" id="code-sns">
-        <code>
+        <pre><code>
           <p>&lt;i class=&quot;nes-icon twitter is-small&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon twitter&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon twitter is-medium&quot;&gt;&lt;/i&gt;</p>
@@ -801,7 +801,7 @@ <h3 class="title">SNS</h3>
           <p>&lt;i class=&quot;nes-icon linkedin is-medium&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon linkedin is-large&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('sns')">Copy</button>
-        </code>
+        </code></pre>
       </section>
 
       <section class="nes-container with-title">
@@ -835,7 +835,7 @@ <h3 class="title">Others</h3>
         <span class="nes-balloon from-right copied" id="copied-others">Copied!</span>
       </section>
       <section class="nes-container code" id="code-others">
-        <code>
+        <pre><code>
           <p>&lt;i class=&quot;nes-icon close is-small&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon close&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-icon close is-medium&quot;&gt;&lt;/i&gt;</p>
@@ -860,7 +860,7 @@ <h3 class="title">Others</h3>
           <p>&lt;i class=&quot;nes-phone&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-kirby&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('others')">Copy</button>
-        </code>
+        </code></pre>
       </section>
 
       <section class="nes-container with-title">
@@ -875,13 +875,13 @@ <h3 class="title">Controllers</h3>
         <span class="nes-balloon from-right copied" id="copied-controllers">Copied!</span>
       </section>
       <section class="nes-container code" id="code-controllers">
-        <code>
+        <pre><code>
           <p>&lt;i class=&quot;nes-logo&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;nes-jp-logo&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;snes-logo&quot;&gt;&lt;/i&gt;</p>
           <p>&lt;i class=&quot;snes-jp-logo&quot;&gt;&lt;/i&gt;</p>
           <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('controllers')">Copy</button>
-        </code>
+        </code></pre>
       </section>
     </section>