diff --git a/admin/public/css/app.css b/admin/public/css/app.css
index f3583c95b742ce5c3c6592ae4abea153ca0cdb53..b08705bfe35dbbbfcdb19b46dadf6e9fc3c277ea 100644
--- a/admin/public/css/app.css
+++ b/admin/public/css/app.css
@@ -791,8 +791,17 @@ a:hover{
     padding:10px 15px 13px;
 }
 
+.code-source-show{
+    margin-top: 15px;
+    border: 1px solid rgb(235, 235, 235);
+    border-radius: 3px;
+    background-color: rgb(250, 250, 250);
+    overflow: hidden;
+}
 
-
+.code-source-show .code-show{
+    margin-top: 0;
+}
 
 
 
diff --git a/admin/public/js/index.js b/admin/public/js/index.js
index 64dd349c2a26f7533c3b2115aa9b1adeb85c91a9..6cd0bc1cd99eb517931e814ce709950134237b88 100644
--- a/admin/public/js/index.js
+++ b/admin/public/js/index.js
@@ -43,17 +43,35 @@ var PageIndex = {
                 '    <div class="code-control">' +
                 '        <i class="fa fa-code"></i>' +
                 '    </div>' +
-                '</div>'
-
+                '</div>',
+            _showOnlyCode = '' +
+              '<div class="code-show">' +
+              '    <div class="code-highlight">' +
+              '        <textarea class="code-text"></textarea>' +
+              '    </div>' +
+              '    <pre class="hljs-pre"><code class="hljs"></code></pre>' +
+              '    <div class="code-control">' +
+              '        <i class="fa fa-code"></i>' +
+              '    </div>' +
+              '</div>'
 
         $('.demo-code').each(function (index, item) {
             var scope = $(this),
                 source = scope.find('.code-source')
-
             if (source.length) {
                 // $(_show).appendTo(scope).find('.hljs').html(hljs.highlightAuto(source.html()).value)
                 $(_show).insertAfter(source).find('.hljs').html(hljs.highlightAuto(source.html()).value)
             }
+            // 只展示代码
+            var sourceToShow = scope.find('.code-source-show')
+            if (sourceToShow.length) {
+                // $(_show).appendTo(scope).find('.hljs').html(hljs.highlightAuto(source.html()).value)
+              let content = sourceToShow.html()
+              let result = $(_showOnlyCode)
+              sourceToShow.html(result).find('.hljs').html(hljs.highlightAuto(content).value)
+              sourceToShow.find('.code-control').hide()
+              sourceToShow.find('pre.hljs-pre').show()
+            }
         })
 
         /*
diff --git a/admin/views/components/card.njk b/admin/views/components/card.njk
index 3bd7248678476148c6eeea06a24a0d30dff13b0c..6e345314f20c37b56ac39819fb0adce0c807ab77 100644
--- a/admin/views/components/card.njk
+++ b/admin/views/components/card.njk
@@ -1175,25 +1175,20 @@
                                         <p>卡列也可以扩展并使用一些其他代码进行自定义。下面显示的是.card-columns使用与我们使用的相同CSS（即CSS列）的类的扩展，以生成一组用于更改列数的响应层。</p>
                                     </div>
                                 </div>
-<div class="language-scss" data-lang="scss">
-    <div class="row">
-        <div class="col">
-            <code class="language-scss" data-lang="scss">
-                .card-columns {
-                @include media-breakpoint-only(lg) {
-                column-count: 4;
-                }
-                @include media-breakpoint-only(xl) {
-                column-count: 5;
-                }
-                }
-            </code>
-        </div>
-    </div>
+<div class="code-source-show">
+    <code class="language-scss" data-lang="scss">
+        .card-columns {
+        @include media-breakpoint-only(lg) {
+        column-count: 4;
+        }
+        @include media-breakpoint-only(xl) {
+        column-count: 5;
+        }
+        }
+    </code>
 </div>
 
 
-
                             </div>
                         </div>