CHG: Cleanup Codes code and docs

1 files changed, 5 insertions, 1 deletions

diff --git a/docs/elements.html b/docs/elements.html
index c102e90..63e038c 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -970,11 +970,15 @@
         <section id="codes" class="container">
           <header class="text-center"><h3>Codes</h3></header>
           <section class="notes">
-            <p><strong>Codes</strong> are inline and multiline code snippets blocks.</p>
+            <p><strong>Codes</strong> are inline and multiline code snippets.</p>
+            <p>For inline code, you can use the element <code>&lt;code&gt;</code>. For multiline code snippet blocks, you can use <code>&lt;pre&gt;</code> with the class <code>code</code> as a container, and add <code>&lt;code&gt;</code> inside it. The attribute <code>data-lang</code> is rendered as the language name in the top right.</p>
           </section>
 
 <!-- codes example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">&quot;code&quot;</span> <span class="atn">data-lang</span>=<span class="atv">&quot;HTML&quot;</span>&gt;&lt;<span class="tag">code</span>&gt;<span class="com">&lt;!-- code snippets --&gt;</span>
+&amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;button&lt;<span class="tag">/span</span>&gt; &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atn&quot;</span>&gt;class&lt;<span class="tag">/span</span>&gt;=&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atv&quot;</span>&gt;&amp;quot;btn&amp;quot;</span>&lt;<span class="tag">/span</span>&gt;&amp;gt;
+  Submit
+&amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;/button&lt;<span class="tag">/span</span>&gt;&amp;gt;
 &lt;<span class="tag">/code</span>&gt;&lt;<span class="tag">/pre</span>&gt;
 </code></pre>