diff --git a/docs/part/component-code.html b/docs/part/component-code.html
index a41434acd36d64a6a5c3913e3ee3e25c5e662157..c05959ef08b540aa7a440249937913d995b2ed11 100755
--- a/docs/part/component-code.html
+++ b/docs/part/component-code.html
@@ -4,6 +4,12 @@
     <div class="example" contenteditable="true">
       <p>通过<code>&lt;code&gt;</code>标签内嵌一小段代码。</p>
     </div>
+    <pre>&lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;</pre>
+    <p>通过 <code>.code</code> 来为任何内容应用与代码相同的等宽字体。</p>
+    <div class="example code" contenteditable="true">
+      <h1 class="code">HelloCode();</h1>
+    </div>
+    <pre>&lt;h1 class=&quot;<em>code</em>&quot;&gt;HelloCode();&lt;/h1&gt;</pre>
   </article>
 </section>
 
@@ -14,6 +20,7 @@
     <div class="example" contenteditable="true">
       <p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 来复制示例代码，按 <kbd>Ctrl + V</kbd> 来粘贴代码。</p>
     </div>
+    <pre>&#x6309; &lt;kbd&gt;Ctrl&lt;/kbd&gt; + &lt;kbd&gt;C&lt;/kbd&gt; &#x6765;&#x590d;&#x5236;&#x793a;&#x4f8b;&#x4ee3;&#x7801;&#xff0c;&#x6309; &lt;kbd&gt;Ctrl + V&lt;/kbd&gt; &#x6765;&#x7c98;&#x8d34;&#x4ee3;&#x7801;&#x3002;</pre>
   </article>
 </section>
 
@@ -24,8 +31,38 @@
     <div class="example" contenteditable="true">
       <pre><code>&lt;p&gt;Hello world!&lt;/p&gt;</code></pre>
     </div>
+    <pre>&lt;pre&gt;&lt;code&gt;&amp;lt;p&amp;gt;Hello world!&amp;lt;/p&amp;gt;&lt;/code&gt;&lt;/pre&gt;</pre>
     <p>还可以使用<code>.pre-scrollable</code>
-    class，其作用是设置max-height为350px，并在垂直方向展示滚动条。</p>
+    class，其作用是设置 <code>max-height</code> 为 <code>350px</code>，并在垂直方向展示滚动条。</p>
+    <div class="example" contenteditable="true">
+      <pre class="pre-scrollable"><code>// 这是一段较长的代码
+// 用来演示 .pre-scrollable
+// 当代码行数超出时会出现垂直滚动条
+// ============================================================================================================
+
+function test() {
+  var x = 1;
+  var y = 2;
+
+  var z1 = x*x + 2*x + 1;
+  var z2 = y*y + 2*y + 1;
+  var z  = z1*z1 + z2*z2;
+
+  var o  = z*z + 2*z + 1;
+  var p  = (o/2 - z*z + 1)/o;
+  var q  = (o + p)/z;
+
+  console.log(x);
+  console.log(y);
+  console.log(z);
+  console.log(q);
+}
+
+test();</code></pre>
+    </div>
+    <pre>&lt;pre class=&quot;pre-scrollable&quot;&gt;
+...
+&lt;/pre&gt;</pre>
   </article>
 </section>
 
@@ -34,9 +71,9 @@
   <article>
     <p>
     代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易，在产品中如需要向用户展现代码应该使用代码高亮。</p>
-    <p>这里推荐的方案是<a href="https://code.google.com/p/google-code-prettify/" target=
-    "_blank">Google Code Prettify</a>实现代码高亮。Google Code Prettify能够自动识别代码语言类型并正确应用语法高亮。</p>
-    <p>下面是一个php文件的示例：</p>
+    <p>这里推荐的方案是 <a href="https://github.com/google/code-prettify" target=
+    "_blank">Google Code Prettify</a> 实现代码高亮。Google Code Prettify能够自动识别代码语言类型并正确应用语法高亮。</p>
+    <p>下面是一个 php 文件的示例：</p>
     <div class="example" contenteditable="true">
   <pre class="prettyprint linenums"><code>&lt;!doctype html&gt;
 &lt;html lang=&quot;en&quot;&gt;
@@ -50,6 +87,13 @@
   &lt;/body&gt;
 &lt;/html&gt;</code></pre>
     </div>
+    <pre>&lt;!-- &#x4e3a; pre &#x589e;&#x52a0; prettyprint CLASS --&gt;
+&lt;pre class=&quot;prettyprint linenums&quot;&gt;
+...
+&lt;/pre&gt;</pre>
+    <pre>
+// 页面导入 prettify.js 后调用 window.prettyPrint 方法来初始化代码高亮效果
+window.prettyPrint();</pre>
   </article>
 </section>