diff --git a/docs/concepts/expression.md b/docs/concepts/expression.md
index a4d1c3ce..1e5a1a42 100755
--- a/docs/concepts/expression.md
+++ b/docs/concepts/expression.md
@@ -1,19 +1,20 @@
 ---
 title: 表达式
-description: 
+description:
 type: 0
 group: 💡 概念
 menuName: 表达式
-icon: 
+icon:
 order: 13
 ---
+
 一般来说，属性名类似于`xxxOn`的配置项，都可以使用表达式进行配置，表达式具有如下的语法：
 
 ```json
 {
   "type": "tpl",
   "tpl": "当前作用域中变量 show 是 1 的时候才可以看得到我哦~",
-  "visibleOn": "data.show === 1" 
+  "visibleOn": "data.show === 1"
 }
 ```
 
@@ -25,15 +26,10 @@ order: 13
 
 在 amis 的实现过程中，当正则匹配到某个组件存在`xxxOn`语法的属性名时，会尝试进行下面步骤（以上面配置为例）：
 
-1. 提取`visibleOn`配置项配置的 JavaScript 语句`data.show === 1`，并以当前组件的数据域为这段代码的数据作用域，执行这段js代码；
+1. 提取`visibleOn`配置项配置的 JavaScript 语句`data.show === 1`，并以当前组件的数据域为这段代码的数据作用域，执行这段 js 代码；
 2. 之后将执行结果赋值给`visible`并添加到组件属性中
 3. 执行渲染。当前示例中：`visible`代表着是否显示当前组件；
 
 组件不同的配置项会有不同的效果，请大家在组件文档中多留意。
 
 > 表达式的执行结果预期应该是`boolean`类型值，如果不是，amis 会根据 JavaScript 的规则将结果视作`boolean`类型进行判断
-
-
-
-
-
diff --git a/examples/components/Doc.tsx b/examples/components/Doc.tsx
index 5142a68f..149a4699 100644
--- a/examples/components/Doc.tsx
+++ b/examples/components/Doc.tsx
@@ -652,9 +652,9 @@ export const docs = [
       },
       {
         label: 'ButtonGroup 按钮组',
-        path: '/docs/components/buttongroup',
+        path: '/docs/components/button-group',
         getComponent: (location, cb) =>
-          require(['../../docs/components/buttongroup.md'], doc => {
+          require(['../../docs/components/button-group.md'], doc => {
             cb(null, makeMarkdownRenderer(doc));
           })
       },
diff --git a/examples/components/MdRenderer.tsx b/examples/components/MdRenderer.tsx
index 20c0b8a2..39376c89 100644
--- a/examples/components/MdRenderer.tsx
+++ b/examples/components/MdRenderer.tsx
@@ -251,7 +251,7 @@ export default function (doc) {
               </div>
             </div>
           </div>
-          {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? (
+          {doc.toc && doc.toc.children && doc.toc.children.length > 0 ? (
             <div className="Doc-toc hidden-xs hidden-sm">
               <div>
                 <div className="Doc-headingList">
diff --git a/examples/doc.css b/examples/doc.css
index 3438f2e9..d82974bc 100644
--- a/examples/doc.css
+++ b/examples/doc.css
@@ -1,382 +1,385 @@
 /* csshint-disable */
 @font-face {
-    font-family: octicons-link;
-    src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
+  font-family: octicons-link;
+  src: url(data:font/woff;charset=utf-8;base64,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)
+    format('woff');
 }
 
 .markdown-body {
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
-    color: #333;
-    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 16px;
-    line-height: 1.6;
-    word-wrap: break-word;
-    box-sizing: border-box;
-    min-width: 200px;
-    /* max-width: 980px; */
-    /* margin: 0 auto; */
-    padding: 25px 45px 25px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  color: #333;
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti',
+    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  word-wrap: break-word;
+  box-sizing: border-box;
+  min-width: 200px;
+  /* max-width: 980px; */
+  /* margin: 0 auto; */
+  padding: 25px 45px 25px;
 }
 
 .anchor {
-    padding-top: 70px;
-    margin-top: -70px;
+  padding-top: 70px;
+  margin-top: -70px;
 }
 
 .markdown-body a:not(.btn) {
-    background-color: transparent;
-    -webkit-text-decoration-skip: objects;
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
 }
 
 .markdown-body a:active:not(.btn),
 .markdown-body a:hover:not(.btn) {
-    outline-width: 0;
+  outline-width: 0;
 }
 
 .markdown-body strong {
-    font-weight: inherit;
+  font-weight: inherit;
 }
 
 .markdown-body strong {
-    font-weight: bolder;
+  font-weight: bolder;
 }
 
-.markdown-body>h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
+.markdown-body > h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
 }
 
 .markdown-body img {
-    border-style: none;
+  border-style: none;
 }
 
 .markdown-body svg:not(:root) {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .markdown-body code,
 .markdown-body kbd,
 .markdown-body pre {
-    font-family: monospace, monospace;
-    font-size: 1em;
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 
 .markdown-body hr {
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
 }
 
 .markdown-body input {
-    font: inherit;
-    margin: 0;
+  font: inherit;
+  margin: 0;
 }
 
 .markdown-body input {
-    overflow: visible;
+  overflow: visible;
 }
 
 .markdown-body button:-moz-focusring,
-.markdown-body [type="button"]:-moz-focusring,
-.markdown-body [type="reset"]:-moz-focusring,
-.markdown-body [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
+.markdown-body [type='button']:-moz-focusring,
+.markdown-body [type='reset']:-moz-focusring,
+.markdown-body [type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
 }
 
-.markdown-body [type="checkbox"] {
-    box-sizing: border-box;
-    padding: 0;
+.markdown-body [type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
 }
 
 .markdown-body table:not(.table) {
-    border-spacing: 0;
-    border-collapse: collapse;
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 
 .markdown-body table:not(.table) td,
 .markdown-body table:not(.table) th {
-    padding: 0;
+  padding: 0;
 }
 
 .markdown-body * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .markdown-body input {
-    font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 
 .markdown-body a:not(.btn) {
-    color: #4078c0;
-    text-decoration: none;
+  color: #4078c0;
+  text-decoration: none;
 }
 
 .markdown-body a:hover:not(.btn),
 .markdown-body a:active:not(.btn) {
-    color: #4078c0;
-    text-decoration: underline;
+  color: #4078c0;
+  text-decoration: underline;
 }
 
 .markdown-body hr {
-    height: 0;
-    margin: 15px 0;
-    overflow: hidden;
-    background: transparent;
-    border: 0;
-    border-bottom: 1px solid #ddd;
+  height: 0;
+  margin: 15px 0;
+  overflow: hidden;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid #ddd;
 }
 
 .markdown-body hr::before {
-    display: table;
-    content: "";
+  display: table;
+  content: '';
 }
 
 .markdown-body hr::after {
-    display: table;
-    clear: both;
-    content: "";
+  display: table;
+  clear: both;
+  content: '';
 }
 
-.markdown-body>h1,
-.markdown-body>h2,
-.markdown-body>h3,
-.markdown-body>h4,
-.markdown-body>h5,
-.markdown-body>h6 {
-    margin-top: 0;
-    margin-bottom: 0;
-    line-height: 1.5;
+.markdown-body > h1,
+.markdown-body > h2,
+.markdown-body > h3,
+.markdown-body > h4,
+.markdown-body > h5,
+.markdown-body > h6 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 1.5;
 }
 
-.markdown-body>h1 {
-    font-size: 30px;
+.markdown-body > h1 {
+  font-size: 30px;
 }
 
-.markdown-body>h2 {
-    font-size: 21px;
+.markdown-body > h2 {
+  font-size: 21px;
 }
 
-.markdown-body>h3 {
-    font-size: 16px;
+.markdown-body > h3 {
+  font-size: 16px;
 }
 
-.markdown-body>h4 {
-    font-size: 14px;
+.markdown-body > h4 {
+  font-size: 14px;
 }
 
-.markdown-body>h5 {
-    font-size: 12px;
+.markdown-body > h5 {
+  font-size: 12px;
 }
 
-.markdown-body>h6 {
-    font-size: 11px;
+.markdown-body > h6 {
+  font-size: 11px;
 }
 
 .markdown-body p {
-    margin-top: 0;
-    margin-bottom: 10px;
+  margin-top: 0;
+  margin-bottom: 10px;
 }
 
 .markdown-body blockquote {
-    margin: 0;
+  margin: 0;
 }
 
 .markdown-body ul,
 .markdown-body ol {
-    padding-left: 0;
-    margin-top: 0;
-    margin-bottom: 0;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .markdown-body ol ol,
 .markdown-body ul ol {
-    list-style-type: lower-roman;
+  list-style-type: lower-roman;
 }
 
 .markdown-body ul ul ol,
 .markdown-body ul ol ol,
 .markdown-body ol ul ol,
 .markdown-body ol ol ol {
-    list-style-type: lower-alpha;
+  list-style-type: lower-alpha;
 }
 
 .markdown-body dd {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .markdown-body code {
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    font-size: 12px;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 12px;
 }
 
 .markdown-body pre {
-    margin-top: 0;
-    margin-bottom: 0;
-    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  margin-top: 0;
+  margin-bottom: 0;
+  font: 12px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 }
 
 .markdown-body .pl-0 {
-    padding-left: 0 !important;
+  padding-left: 0 !important;
 }
 
 .markdown-body .pl-1 {
-    padding-left: 3px !important;
+  padding-left: 3px !important;
 }
 
 .markdown-body .pl-2 {
-    padding-left: 6px !important;
+  padding-left: 6px !important;
 }
 
 .markdown-body .pl-3 {
-    padding-left: 12px !important;
+  padding-left: 12px !important;
 }
 
 .markdown-body .pl-4 {
-    padding-left: 24px !important;
+  padding-left: 24px !important;
 }
 
 .markdown-body .pl-5 {
-    padding-left: 36px !important;
+  padding-left: 36px !important;
 }
 
 .markdown-body .pl-6 {
-    padding-left: 48px !important;
+  padding-left: 48px !important;
 }
 
 .markdown-body .form-select::-ms-expand {
-    opacity: 0;
+  opacity: 0;
 }
 
 .markdown-body:before {
-    display: table;
-    content: "";
+  display: table;
+  content: '';
 }
 
 .markdown-body:after {
-    display: table;
-    clear: both;
-    content: "";
+  display: table;
+  clear: both;
+  content: '';
 }
 
-.markdown-body>*:first-child {
-    margin-top: 0 !important;
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
 }
 
-.markdown-body>*:last-child {
-    margin-bottom: 0 !important;
+.markdown-body > *:last-child {
+  margin-bottom: 0 !important;
 }
 
 .markdown-body a:not([href]) {
-    color: inherit;
-    text-decoration: none;
+  color: inherit;
+  text-decoration: none;
 }
 
 .markdown-body .anchor {
-    display: inline-block;
-    padding-right: 2px;
-    margin-left: -18px;
+  display: inline-block;
+  padding-right: 2px;
+  margin-left: -18px;
 }
 
 .markdown-body .anchor:focus {
-    outline: none;
+  outline: none;
 }
 
-.markdown-body>h1,
-.markdown-body>h2,
-.markdown-body>h3,
-.markdown-body>h4,
-.markdown-body>h5,
-.markdown-body>h6 {
-    margin-top: 1em;
-    margin-bottom: 16px;
-    font-weight: bold;
-    line-height: 1.4;
+.markdown-body > h1,
+.markdown-body > h2,
+.markdown-body > h3,
+.markdown-body > h4,
+.markdown-body > h5,
+.markdown-body > h6 {
+  margin-top: 1em;
+  margin-bottom: 16px;
+  font-weight: bold;
+  line-height: 1.4;
 }
 
-.markdown-body>h1 .octicon-link,
-.markdown-body>h2 .octicon-link,
-.markdown-body>h3 .octicon-link,
-.markdown-body>h4 .octicon-link,
-.markdown-body>h5 .octicon-link,
-.markdown-body>h6 .octicon-link {
-    color: #000;
-    vertical-align: middle;
-    visibility: hidden;
+.markdown-body > h1 .octicon-link,
+.markdown-body > h2 .octicon-link,
+.markdown-body > h3 .octicon-link,
+.markdown-body > h4 .octicon-link,
+.markdown-body > h5 .octicon-link,
+.markdown-body > h6 .octicon-link {
+  color: #000;
+  vertical-align: middle;
+  visibility: hidden;
 }
 
-.markdown-body>h1:hover .anchor,
-.markdown-body>h2:hover .anchor,
-.markdown-body>h3:hover .anchor,
-.markdown-body>h4:hover .anchor,
-.markdown-body>h5:hover .anchor,
-.markdown-body>h6:hover .anchor {
-    text-decoration: none;
+.markdown-body > h1:hover .anchor,
+.markdown-body > h2:hover .anchor,
+.markdown-body > h3:hover .anchor,
+.markdown-body > h4:hover .anchor,
+.markdown-body > h5:hover .anchor,
+.markdown-body > h6:hover .anchor {
+  text-decoration: none;
 }
 
-.markdown-body>h1:hover .anchor .octicon-link,
-.markdown-body>h2:hover .anchor .octicon-link,
-.markdown-body>h3:hover .anchor .octicon-link,
-.markdown-body>h4:hover .anchor .octicon-link,
-.markdown-body>h5:hover .anchor .octicon-link,
-.markdown-body>h6:hover .anchor .octicon-link {
-    visibility: visible;
+.markdown-body > h1:hover .anchor .octicon-link,
+.markdown-body > h2:hover .anchor .octicon-link,
+.markdown-body > h3:hover .anchor .octicon-link,
+.markdown-body > h4:hover .anchor .octicon-link,
+.markdown-body > h5:hover .anchor .octicon-link,
+.markdown-body > h6:hover .anchor .octicon-link {
+  visibility: visible;
 }
 
-.markdown-body>h1 {
-    padding-bottom: 0.3em;
-    font-size: 2.25em;
-    line-height: 1.2;
-    border-bottom: 1px solid #dee5e7;
+.markdown-body > h1 {
+  padding-bottom: 0.3em;
+  font-size: 2.25em;
+  line-height: 1.2;
+  border-bottom: 1px solid #dee5e7;
 }
 
-.markdown-body>h1 .anchor {
-    line-height: 1;
+.markdown-body > h1 .anchor {
+  line-height: 1;
 }
 
-.markdown-body>h2 {
-    padding-bottom: 0.3em;
-    font-size: 1.75em;
-    line-height: 1.225;
-    border-bottom: 1px solid #dee5e7;
+.markdown-body > h2 {
+  padding-bottom: 0.3em;
+  font-size: 1.75em;
+  line-height: 1.225;
+  border-bottom: 1px solid #dee5e7;
 }
 
-.markdown-body>h2 .anchor {
-    line-height: 1;
+.markdown-body > h2 .anchor {
+  line-height: 1;
 }
 
-.markdown-body>h3 {
-    font-size: 1.5em;
-    line-height: 1.43;
+.markdown-body > h3 {
+  font-size: 1.5em;
+  line-height: 1.43;
 }
 
-.markdown-body>h3 .anchor {
-    line-height: 1.2;
+.markdown-body > h3 .anchor {
+  line-height: 1.2;
 }
 
-.markdown-body>h4 {
-    font-size: 1.25em;
+.markdown-body > h4 {
+  font-size: 1.25em;
 }
 
-.markdown-body>h4 .anchor {
-    line-height: 1.2;
+.markdown-body > h4 .anchor {
+  line-height: 1.2;
 }
 
-.markdown-body>h5 {
-    font-size: 1em;
+.markdown-body > h5 {
+  font-size: 1em;
 }
 
-.markdown-body>h5 .anchor {
-    line-height: 1.1;
+.markdown-body > h5 .anchor {
+  line-height: 1.1;
 }
 
-.markdown-body>h6 {
-    font-size: 1em;
-    color: #777;
+.markdown-body > h6 {
+  font-size: 1em;
+  color: #777;
 }
 
 .markdown-body h6 .anchor {
-    line-height: 1.1;
+  line-height: 1.1;
 }
 
 .markdown-body p,
@@ -386,218 +389,218 @@
 .markdown-body dl,
 .markdown-body table,
 .markdown-body pre {
-    margin-top: 0;
-    margin-bottom: 16px;
+  margin-top: 0;
+  margin-bottom: 16px;
 }
 
 .markdown-body hr {
-    height: 4px;
-    padding: 0;
-    margin: 16px 0;
-    background-color: #e7e7e7;
-    border: 0 none;
+  height: 4px;
+  padding: 0;
+  margin: 16px 0;
+  background-color: #e7e7e7;
+  border: 0 none;
 }
 
 .markdown-body ul:not(.dropdown-menu):not(.nav),
 .markdown-body ol {
-    padding-left: 2em;
+  padding-left: 2em;
 }
 
 .markdown-body ul ul,
 .markdown-body ul ol,
 .markdown-body ol ol,
 .markdown-body ol ul {
-    margin-top: 0;
-    margin-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.markdown-body li>p {
-    margin-top: 16px;
+.markdown-body li > p {
+  margin-top: 16px;
 }
 
 .markdown-body dl {
-    padding: 0;
+  padding: 0;
 }
 
 .markdown-body dl dt {
-    padding: 0;
-    margin-top: 16px;
-    font-size: 1em;
-    font-style: italic;
-    font-weight: bold;
+  padding: 0;
+  margin-top: 16px;
+  font-size: 1em;
+  font-style: italic;
+  font-weight: bold;
 }
 
 .markdown-body dl dd {
-    padding: 0 16px;
-    margin-bottom: 16px;
+  padding: 0 16px;
+  margin-bottom: 16px;
 }
 
 .markdown-body blockquote {
-    padding: 0 15px;
-    color: #777;
-    border-left: 4px solid #ddd;
+  padding: 0 15px;
+  color: #777;
+  border-left: 4px solid #ddd;
 }
 
-.markdown-body blockquote>:first-child {
-    margin-top: 0;
+.markdown-body blockquote > :first-child {
+  margin-top: 0;
 }
 
-.markdown-body blockquote>:last-child {
-    margin-bottom: 0;
+.markdown-body blockquote > :last-child {
+  margin-bottom: 0;
 }
 
 .markdown-body table:not(.table) {
-    display: block;
-    width: 100%;
-    overflow: auto;
-    word-break: normal;
-    word-break: keep-all;
+  display: block;
+  width: 100%;
+  overflow: auto;
+  word-break: normal;
+  /* word-break: keep-all; */
 }
 
 .markdown-body table:not(.table) th {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .markdown-body table:not(.table) th,
 .markdown-body table:not(.table) td {
-    padding: 6px 13px;
-    border: 1px solid #ddd;
+  padding: 6px 13px;
+  border: 1px solid #ddd;
 }
 
 .markdown-body table:not(.table) tr {
-    background-color: #fff;
-    border-top: 1px solid #ccc;
+  background-color: #fff;
+  border-top: 1px solid #ccc;
 }
 
 .markdown-body table:not(.table) tr:nth-child(2n) {
-    background-color: #f8f8f8;
+  background-color: #f8f8f8;
 }
 
 /* modified by zhangjun08
  * 更改文档中的图片展示样式
  */
 .markdown-body img {
-    max-width: 90%;
-    margin-left: 5%;
-    margin-right: 5%;
-    box-sizing: content-box;
-    background-color: #fff;
-    border-radius: 5px;
-    border: 1px solid #ddd;
-    box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.3);
+  max-width: 90%;
+  margin-left: 5%;
+  margin-right: 5%;
+  box-sizing: content-box;
+  background-color: #fff;
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.3);
 }
 
 @media (min-width: 1200px) {
-    .markdown-body img {
-        max-width: 800px;
-    }
+  .markdown-body img {
+    max-width: 800px;
+  }
 }
 
 .markdown-body code {
-    padding: 0;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-    margin: 0;
-    font-size: 85%;
-    background-color: rgba(0, 0, 0, 0.04);
-    border-radius: 3px;
+  padding: 0;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 3px;
 }
 
 .markdown-body code:before,
 .markdown-body code:after {
-    letter-spacing: -0.2em;
-    content: "\00a0";
+  letter-spacing: -0.2em;
+  content: '\00a0';
 }
 
-.markdown-body pre>code {
-    padding: 0;
-    margin: 0;
-    font-size: 100%;
-    word-break: normal;
-    white-space: pre;
-    background: transparent;
-    border: 0;
+.markdown-body pre > code {
+  padding: 0;
+  margin: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
+  background: transparent;
+  border: 0;
 }
 
 .markdown-body .highlight {
-    margin-bottom: 16px;
+  margin-bottom: 16px;
 }
 
 .markdown-body .highlight pre,
 .markdown-body pre {
-    padding: 16px;
-    overflow: auto;
-    font-size: 85%;
-    line-height: 1.45;
-    background-color: #f7f7f7;
-    border-radius: 3px;
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f7f7f7;
+  border-radius: 3px;
 }
 
 .markdown-body .highlight pre {
-    margin-bottom: 0;
-    word-break: normal;
+  margin-bottom: 0;
+  word-break: normal;
 }
 
 .markdown-body pre {
-    word-wrap: normal;
+  word-wrap: normal;
 }
 
 .markdown-body pre code {
-    display: inline;
-    max-width: initial;
-    padding: 0;
-    margin: 0;
-    overflow: initial;
-    line-height: inherit;
-    word-wrap: normal;
-    background-color: transparent;
-    border: 0;
+  display: inline;
+  max-width: initial;
+  padding: 0;
+  margin: 0;
+  overflow: initial;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
 }
 
 .markdown-body pre code:before,
 .markdown-body pre code:after {
-    content: normal;
+  content: normal;
 }
 
 .markdown-body kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font-size: 11px;
-    line-height: 10px;
-    color: #555;
-    vertical-align: middle;
-    background-color: #fcfcfc;
-    border: solid 1px #ccc;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 11px;
+  line-height: 10px;
+  color: #555;
+  vertical-align: middle;
+  background-color: #fcfcfc;
+  border: solid 1px #ccc;
+  border-bottom-color: #bbb;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #bbb;
 }
 
 .markdown-body .pl-c {
-    color: #969896;
+  color: #969896;
 }
 
 .markdown-body .pl-c1,
 .markdown-body .pl-s .pl-v {
-    color: #0086b3;
+  color: #0086b3;
 }
 
 .markdown-body .pl-e,
 .markdown-body .pl-en {
-    color: #795da3;
+  color: #795da3;
 }
 
 .markdown-body .pl-s .pl-s1,
 .markdown-body .pl-smi {
-    color: #333;
+  color: #333;
 }
 
 .markdown-body .pl-ent {
-    color: #63a35c;
+  color: #63a35c;
 }
 
 .markdown-body .pl-k {
-    color: #a71d5d;
+  color: #a71d5d;
 }
 
 .markdown-body .pl-pds,
@@ -607,154 +610,154 @@
 .markdown-body .pl-sr .pl-cce,
 .markdown-body .pl-sr .pl-sra,
 .markdown-body .pl-sr .pl-sre {
-    color: #183691;
+  color: #183691;
 }
 
 .markdown-body .pl-v {
-    color: #ed6a43;
+  color: #ed6a43;
 }
 
 .markdown-body .pl-id {
-    color: #b52a1d;
+  color: #b52a1d;
 }
 
 .markdown-body .pl-ii {
-    background-color: #b52a1d;
-    color: #f8f8f8;
+  background-color: #b52a1d;
+  color: #f8f8f8;
 }
 
 .markdown-body .pl-sr .pl-cce {
-    color: #63a35c;
-    font-weight: bold;
+  color: #63a35c;
+  font-weight: bold;
 }
 
 .markdown-body .pl-ml {
-    color: #693a17;
+  color: #693a17;
 }
 
 .markdown-body .pl-mh,
 .markdown-body .pl-mh .pl-en,
 .markdown-body .pl-ms {
-    color: #1d3e81;
-    font-weight: bold;
+  color: #1d3e81;
+  font-weight: bold;
 }
 
 .markdown-body .pl-mq {
-    color: #008080;
+  color: #008080;
 }
 
 .markdown-body .pl-mi {
-    color: #333;
-    font-style: italic;
+  color: #333;
+  font-style: italic;
 }
 
 .markdown-body .pl-mb {
-    color: #333;
-    font-weight: bold;
+  color: #333;
+  font-weight: bold;
 }
 
 .markdown-body .pl-md {
-    background-color: #ffecec;
-    color: #bd2c00;
+  background-color: #ffecec;
+  color: #bd2c00;
 }
 
 .markdown-body .pl-mi1 {
-    background-color: #eaffea;
-    color: #55a532;
+  background-color: #eaffea;
+  color: #55a532;
 }
 
 .markdown-body .pl-mdr {
-    color: #795da3;
-    font-weight: bold;
+  color: #795da3;
+  font-weight: bold;
 }
 
 .markdown-body .pl-mo {
-    color: #1d3e81;
+  color: #1d3e81;
 }
 
 .markdown-body kbd {
-    display: inline-block;
-    padding: 3px 5px;
-    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    line-height: 10px;
-    color: #555;
-    vertical-align: middle;
-    background-color: #fcfcfc;
-    border: solid 1px #ccc;
-    border-bottom-color: #bbb;
-    border-radius: 3px;
-    box-shadow: inset 0 -1px 0 #bbb;
+  display: inline-block;
+  padding: 3px 5px;
+  font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  line-height: 10px;
+  color: #555;
+  vertical-align: middle;
+  background-color: #fcfcfc;
+  border: solid 1px #ccc;
+  border-bottom-color: #bbb;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #bbb;
 }
 
 .markdown-body .full-commit .btn-outline:not(:disabled):hover {
-    color: #4078c0;
-    border: 1px solid #4078c0;
+  color: #4078c0;
+  border: 1px solid #4078c0;
 }
 
-.markdown-body :checked+.radio-label {
-    position: relative;
-    z-index: 1;
-    border-color: #4078c0;
+.markdown-body :checked + .radio-label {
+  position: relative;
+  z-index: 1;
+  border-color: #4078c0;
 }
 
 .markdown-body .octicon {
-    display: inline-block;
-    vertical-align: text-top;
-    fill: currentColor;
+  display: inline-block;
+  vertical-align: text-top;
+  fill: currentColor;
 }
 
 .markdown-body .task-list-item {
-    list-style-type: none;
+  list-style-type: none;
 }
 
-.markdown-body .task-list-item+.task-list-item {
-    margin-top: 3px;
+.markdown-body .task-list-item + .task-list-item {
+  margin-top: 3px;
 }
 
 .markdown-body .task-list-item input {
-    margin: 0 0.2em 0.25em -1.6em;
-    vertical-align: middle;
+  margin: 0 0.2em 0.25em -1.6em;
+  vertical-align: middle;
 }
 
 .markdown-body hr {
-    border-bottom-color: #eee;
+  border-bottom-color: #eee;
 }
 
 .doc-play-ground {
-    border: 1px solid #ddd;
-    min-height: 200px;
-    position: relative;
-    width: 100%;
-    overflow: hidden;
+  border: 1px solid #ddd;
+  min-height: 200px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
 }
 
 .doc-play-ground .nav-tabs {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .markdown-body .CodeMirror pre {
-    padding: 0 4px;
-    margin: 0;
-    background-color: transparent;
+  padding: 0 4px;
+  margin: 0;
+  background-color: transparent;
 }
 
 .markdown-body .CodeMirror,
 .markdown-body .CodeMirror * {
-    box-sizing: content-box;
+  box-sizing: content-box;
 }
 
 .markdown-body .CodeMirror-lines {
-    padding: 0;
+  padding: 0;
 }
 
 .markdown-body .tree-view ul {
-    padding-left: 0 !important;
+  padding-left: 0 !important;
 }
 
-.markdown-body>.amis-preview {
-    margin-bottom: 15px;
+.markdown-body > .amis-preview {
+  margin-bottom: 15px;
 }
 
 .amis-doc pre {
-    margin-top: 15px;
-}
\ No newline at end of file
+  margin-top: 15px;
+}
diff --git a/examples/style.scss b/examples/style.scss
index 29738fff..723f8c65 100644
--- a/examples/style.scss
+++ b/examples/style.scss
@@ -448,10 +448,6 @@ a {
       > pre {
         margin-bottom: 30px;
       }
-
-      table:not(.table) {
-        word-break: break-word;
-      }
     }
   }