chore: 💄 Prettier all files (Merge pull request #16448 from ant-design/prettier-all)

chore: 💄 Prettier all files
2024-12-04 21:18:01 +08:00 · 2019-05-07 16:00:05 +08:00 · 2019-05-07 16:00:05 +08:00 · 1d93339c3b
commit 1d93339c3b
parent c4dcc0a827 15e5e4cb59
623 changed files with 7489 additions and 6572 deletions
--- a/.antd-tools.config.js
+++ b/.antd-tools.config.js
@ -34,7 +34,7 @@ function finalizeCompile() {
    let componentsLessContent = '';
    // Build components in one file: lib/style/components.less
    fs.readdir(componentsPath, (err, files) => {
-      files.forEach((file) => {
+      files.forEach(file => {
        if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
          componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
        }
--- a/.depslintrc.js
+++ b/.depslintrc.js
@ -11,8 +11,8 @@ module.exports = {
  ],
  modulePattern: [
    {
-      pattern: /ConfigConsumer.*renderEmpty/sm,
+      pattern: /ConfigConsumer.*renderEmpty/ms,
      module: '../empty',
    },
  ],
-};
+};
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,9 +1,5 @@
 const eslintrc = {
-  extends: [
-    'airbnb',
-    'prettier',
-    'plugin:jest/recommended',
-  ],
+  extends: ['airbnb', 'prettier', 'plugin:jest/recommended'],
  env: {
    browser: true,
    node: true,
@ -12,12 +8,7 @@ const eslintrc = {
    es6: true,
  },
  parser: 'babel-eslint',
-  plugins: [
-    'markdown',
-    'react',
-    'babel',
-    'jest',
-  ],
+  plugins: ['markdown', 'react', 'babel', 'jest'],
  rules: {
    'react/jsx-one-expression-per-line': 0,
    'react/prop-types': 0,
--- a/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design---.md
+++ b/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design---.md
@ -1,9 +1,7 @@
 ---
-name: "⚠️  Please use new-issue.ant.design ⚠️"
-about: The issue which is not created via http://new-issue.ant.design will be closed
-  immediately.
-labels: 
-
+name: '⚠️  Please use new-issue.ant.design ⚠️'
+about: The issue which is not created via http://new-issue.ant.design will be closed immediately.
+labels:
 ---

 The issue which is not created via http://new-issue.ant.design will be closed immediately.
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -7,6 +7,7 @@ Please makes sure that these form are filled before submitting your pull request

 [[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)]
 -->
+
 ### 🤔 This is a ...

 - [ ] New feature
--- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
@ -7,6 +7,7 @@

 [[English Template / 英文模板](?expand=1)]
 -->
+
 ### 🤔 这个变动的性质是？

 - [ ] 新特性提交
--- a/.prettierignore
+++ b/.prettierignore
@ -1,4 +1,27 @@
 **/*.svg
 package.json
 .umi
-.umi-production
+.umi-production
+AUTHORS.txt
+lib/
+es/
+dist/
+_site/
+coverage/
+CNAME
+LICENSE
+yarn.lock
+netlify.toml
+yarn-error.log
+*.sh
+*.snap
+components/*/*.js
+components/*/*.jsx
+.gitignore
+.npmignore
+.prettierignore
+.DS_Store
+.editorconfig
+.eslintignore
+**/*.yml
+components/style/color/*.less
--- a/.prettierrc
+++ b/.prettierrc
@ -11,4 +11,4 @@
      }
    }
  ]
-}
+}
--- a/.remarkrc.js
+++ b/.remarkrc.js
@ -1,8 +1,5 @@
 const config = {
-  plugins: [
-    'remark-preset-lint-recommended',
-    ['remark-lint-list-item-indent', 'space'],
-  ],
+  plugins: ['remark-preset-lint-recommended', ['remark-lint-list-item-indent', 'space']],
 };

 module.exports = config;
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -9,7 +9,8 @@
    "comment-empty-line-before": null,
    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
    "no-invalid-double-slash-comments": null,
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "declaration-empty-line-before": null
  },
  "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
 }
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo

 Examples of behavior that contributes to creating a positive environment include:

-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members

 Examples of unacceptable behavior by participants include:

-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting

 ## Our Responsibilities

--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -10,21 +10,11 @@

 一套企业级的 UI 设计语言和 React 实现。

-[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master)
-[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design)
-[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
-[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
-[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
+[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master) [![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)

-[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
-[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev)
-[![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/)
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield)
-[![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)

-[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI)
-[![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 </div>

@ -41,13 +31,13 @@

 ## 🖥 支持环境

-* 现代浏览器和 IE9 及以上。
-* 支持服务端渲染。
-* [Electron](http://electron.atom.io/)
+- 现代浏览器和 IE9 及以上。
+- 支持服务端渲染。
+- [Electron](http://electron.atom.io/)

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --------- | --------- | --------- | --------- | --------- | --------- |
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| --- | --- | --- | --- | --- | --- |
+| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

 ## 📦 安装

@ -69,7 +59,7 @@ ReactDOM.render(<DatePicker />, mountNode);
 引入样式：

 ```jsx
-import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
+import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 ```

 你也可以 [按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
--- a/README.md
+++ b/README.md
@ -10,21 +10,11 @@

 An enterprise-class UI design language and React implementation.

-[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master)
-[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design)
-[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
-[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
-[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
+[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master) [![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)

-[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
-[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev)
-[![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/)
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield)
-[![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)

-[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI)
-[![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 </div>

@ -41,13 +31,13 @@ English | [简体中文](./README-zh_CN.md)

 ## 🖥 Environment Support

-* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
-* Server-side Rendering
-* [Electron](http://electron.atom.io/)
+- Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
+- Server-side Rendering
+- [Electron](http://electron.atom.io/)

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --------- | --------- | --------- | --------- | --------- | --------- |
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| --- | --- | --- | --- | --- | --- |
+| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

 ## 📦 Install

@ -69,7 +59,7 @@ ReactDOM.render(<DatePicker />, mountNode);
 And import style manually:

 ```jsx
-import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
+import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 ```

 Or [import components on demand](https://ant.design/docs/react/getting-started#Import-on-Demand).
--- a/components/_util/raf.ts
+++ b/components/_util/raf.ts
@ -35,4 +35,4 @@ wrapperRaf.cancel = function(pid?: number) {
  delete ids[pid];
 };

-wrapperRaf.ids = ids; // export this for test usage
+wrapperRaf.ids = ids; // export this for test usage
--- a/components/_util/reactNode.ts
+++ b/components/_util/reactNode.ts
@ -4,4 +4,4 @@ export function cloneElement(element: React.ReactNode, ...restArgs: any[]) {
  if (!React.isValidElement(element)) return element;

  return React.cloneElement(element, ...restArgs);
-}
+}
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@ -13,14 +13,14 @@ title:

 The simplest usage.

-````jsx
+```jsx
 import { Affix, Button } from 'antd';

 class Demo extends React.Component {
  state = {
    top: 10,
    bottom: 10,
-  }
+  };

  render() {
    return (
@ -56,4 +56,4 @@ class Demo extends React.Component {
 }

 ReactDOM.render(<Demo />, mountNode);
-````
+```
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@ -13,13 +13,13 @@ title:

 Callback with affixed state.

-````jsx
+```jsx
 import { Affix, Button } from 'antd';

 ReactDOM.render(
  <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
    <Button>120px to affix top</Button>
  </Affix>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@ -13,18 +13,21 @@ title:

 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).

-````jsx
+```jsx
 import { Affix, Button } from 'antd';

 class Demo extends React.Component {
  render() {
    return (
-      <div className="scrollable-container" ref={(node) => { this.container = node; }}>
+      <div
+        className="scrollable-container"
+        ref={node => {
+          this.container = node;
+        }}
+      >
        <div className="background">
          <Affix target={() => this.container}>
-            <Button type="primary">
-              Fixed at the top of container
-            </Button>
+            <Button type="primary">Fixed at the top of container</Button>
          </Affix>
        </div>
      </div>
@ -33,7 +36,7 @@ class Demo extends React.Component {
 }

 ReactDOM.render(<Demo />, mountNode);
-````
+```

 <style>
 #components-affix-demo-target .scrollable-container {
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@ -15,7 +15,7 @@ Please note that Affix should not cover other content on the page, especially wh
 ## API

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
 | target | specifies the scrollable area dom node | () => HTMLElement | () => window |
@ -24,9 +24,7 @@ Please note that Affix should not cover other content on the page, especially wh
 **Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:

 ```jsx
-<Affix style={{ position: 'absolute', top: y, left: x }}>
-  ...
-</Affix>
+<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
 ```

 ## FAQ
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@ -25,9 +25,7 @@ title: Affix
 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：

 ```jsx
-<Affix style={{ position: 'absolute', top: y, left: x }}>
-  ...
-</Affix>
+<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
 ```

 ## FAQ
--- a/components/affix/utils.ts
+++ b/components/affix/utils.ts
@ -10,18 +10,23 @@ export function getTargetRect(target: BindElement): ClientRect {
    : ({ top: 0, bottom: window.innerHeight } as ClientRect);
 }

-export function getFixedTop(placeholderReact: Rect, targetRect: Rect, offsetTop: number | undefined) {
+export function getFixedTop(
+  placeholderReact: Rect,
+  targetRect: Rect,
+  offsetTop: number | undefined,
+) {
  if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
    return offsetTop + targetRect.top;
  }
  return undefined;
 }

-export function getFixedBottom(placeholderReact: Rect, targetRect: Rect, offsetBottom: number | undefined) {
-  if (
-    offsetBottom !== undefined &&
-    targetRect.bottom < placeholderReact.bottom + offsetBottom
-  ) {
+export function getFixedBottom(
+  placeholderReact: Rect,
+  targetRect: Rect,
+  offsetBottom: number | undefined,
+) {
+  if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
    const targetBottomOffset = window.innerHeight - targetRect.bottom;
    return offsetBottom + targetBottomOffset;
  }
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@ -14,19 +14,23 @@ title:

 Display Alert as a banner at top of page.

-````jsx
+```jsx
 import { Alert } from 'antd';

 ReactDOM.render(
  <div>
    <Alert message="Warning text" banner />
    <br />
-    <Alert message="Very long warning text warning text text text text text text text" banner closable />
+    <Alert
+      message="Very long warning text warning text text text text text text text"
+      banner
+      closable
+    />
    <br />
    <Alert showIcon={false} message="Warning text without icon" banner />
    <br />
    <Alert type="error" message="Error text" banner />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@ -13,14 +13,11 @@ title:

 The simplest usage for short messages.

-````jsx
+```jsx
 import { Alert } from 'antd';

-ReactDOM.render(
-  <Alert message="Success Text" type="success" />,
-  mountNode
-);
-````
+ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
+```

 <style>
 .ant-alert {
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@ -13,10 +13,10 @@ title:

 To show close button.

-````jsx
+```jsx
 import { Alert } from 'antd';

-const onClose = (e) => {
+const onClose = e => {
  console.log(e, 'I was closed.');
 };

@ -36,6 +36,6 @@ ReactDOM.render(
      onClose={onClose}
    />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@ -13,11 +13,8 @@ title:

 Replace the default icon with customized text.

-````jsx
+```jsx
 import { Alert } from 'antd';

-ReactDOM.render(
-  <Alert message="Info Text" type="info" closeText="Close Now" />,
-  mountNode
-);
-````
+ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);
+```
--- a/components/alert/demo/custom-icon.md
+++ b/components/alert/demo/custom-icon.md
@ -14,7 +14,7 @@ title:

 A relevant icon makes information clearer and more friendly.

-````jsx
+```jsx
 import { Alert, Icon } from 'antd';

 const icon = <Icon type="smile" />;
@ -55,6 +55,6 @@ ReactDOM.render(
      showIcon
    />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@ -13,7 +13,7 @@ title:

 Additional description for alert message.

-````jsx
+```jsx
 import { Alert } from 'antd';

 ReactDOM.render(
@ -39,6 +39,6 @@ ReactDOM.render(
      type="error"
    />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@ -13,7 +13,7 @@ title:

 A relevant icon will make information clearer and more friendly.

-````jsx
+```jsx
 import { Alert } from 'antd';

 ReactDOM.render(
@ -47,6 +47,6 @@ ReactDOM.render(
      showIcon
    />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/smooth-closed.md
+++ b/components/alert/demo/smooth-closed.md
@ -13,39 +13,34 @@ title:

 Smoothly unmount Alert upon close.

-````jsx
+```jsx
 import { Alert } from 'antd';

 class App extends React.Component {
  state = {
    visible: true,
-  }
+  };

  handleClose = () => {
    this.setState({ visible: false });
-  }
+  };

  render() {
    return (
      <div>
-        {
-          this.state.visible ? (
-            <Alert
-              message="Alert Message Text"
-              type="success"
-              closable
-              afterClose={this.handleClose}
-            />
-          ) : null
-        }
+        {this.state.visible ? (
+          <Alert
+            message="Alert Message Text"
+            type="success"
+            closable
+            afterClose={this.handleClose}
+          />
+        ) : null}
        <p>placeholder text here</p>
      </div>
    );
  }
 }

-ReactDOM.render(
-  <App />,
-  mountNode
-);
-````
+ReactDOM.render(<App />, mountNode);
+```
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@ -13,7 +13,7 @@ title:

 There are 4 types of Alert: `success`, `info`, `warning`, `error`.

-````jsx
+```jsx
 import { Alert } from 'antd';

 ReactDOM.render(
@ -23,6 +23,6 @@ ReactDOM.render(
    <Alert message="Warning Text" type="warning" />
    <Alert message="Error Text" type="error" />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@ -14,7 +14,7 @@ Alert component for feedback.
 ## API

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | afterClose | Called when close animation is finished | () => void | - |
 | banner | Whether to show as banner | boolean | false |
 | closable | Whether Alert can be closed | boolean | - |
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@ -27,7 +27,7 @@ ReactDOM.render(
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>,
-  mountNode
+  mountNode,
 );
 ```

--- a/components/anchor/demo/onClick.md
+++ b/components/anchor/demo/onClick.md
@ -32,6 +32,6 @@ ReactDOM.render(
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>,
-  mountNode
+  mountNode,
 );
 ```
--- a/components/anchor/demo/static.md
+++ b/components/anchor/demo/static.md
@ -27,6 +27,6 @@ ReactDOM.render(
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>,
-  mountNode
+  mountNode,
 );
 ```
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -16,7 +16,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 ### Anchor Props

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | affix | Fixed mode of Anchor | boolean | true |
 | bounds | Bounding distance of anchor area | number | 5(px) |
 | getContainer | Scrolling container | () => HTMLElement | () => window |
@ -27,7 +27,7 @@ For displaying anchor hyperlinks on page and jumping between them.

 ### Link Props

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| href | target of hyperlink | string |  |
-| title | content of  hyperlink | string\|ReactNode |  |
+| Property | Description          | Type              | Default |
+| -------- | -------------------- | ----------------- | ------- |
+| href     | target of hyperlink  | string            |         |
+| title    | content of hyperlink | string\|ReactNode |         |
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@ -28,7 +28,7 @@ title: Anchor

 ### Link Props

-| 成员 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| href | 锚点链接 | string |  |
-| title | 文字内容 | string\|ReactNode |  |
+| 成员  | 说明     | 类型              | 默认值 |
+| ----- | -------- | ----------------- | ------ |
+| href  | 锚点链接 | string            |        |
+| title | 文字内容 | string\|ReactNode |        |
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@ -13,7 +13,7 @@ title:

 Basic Usage, set datasource of autocomplete with `dataSource` property.

-````jsx
+```jsx
 import { AutoComplete } from 'antd';

 function onSelect(value) {
@ -23,17 +23,13 @@ function onSelect(value) {
 class Complete extends React.Component {
  state = {
    dataSource: [],
-  }
+  };

-  handleSearch = (value) => {
+  handleSearch = value => {
    this.setState({
-      dataSource: !value ? [] : [
-        value,
-        value + value,
-        value + value + value,
-      ],
+      dataSource: !value ? [] : [value, value + value, value + value + value],
    });
-  }
+  };

  render() {
    const { dataSource } = this.state;
@ -50,4 +46,4 @@ class Complete extends React.Component {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@ -11,40 +11,51 @@ title:

 ## en-US

-Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
-Basic Usage, set datasource of autocomplete with `dataSource` property.
+Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.

-````jsx
+```jsx
 import { Icon, Input, AutoComplete } from 'antd';

 const Option = AutoComplete.Option;
 const OptGroup = AutoComplete.OptGroup;

-const dataSource = [{
-  title: '话题',
-  children: [{
-    title: 'AntDesign',
-    count: 10000,
-  }, {
-    title: 'AntDesign UI',
-    count: 10600,
-  }],
-}, {
-  title: '问题',
-  children: [{
-    title: 'AntDesign UI 有多好',
-    count: 60100,
-  }, {
-    title: 'AntDesign 是啥',
-    count: 30010,
-  }],
-}, {
-  title: '文章',
-  children: [{
-    title: 'AntDesign 是一个设计语言',
-    count: 100000,
-  }],
-}];
+const dataSource = [
+  {
+    title: '话题',
+    children: [
+      {
+        title: 'AntDesign',
+        count: 10000,
+      },
+      {
+        title: 'AntDesign UI',
+        count: 10600,
+      },
+    ],
+  },
+  {
+    title: '问题',
+    children: [
+      {
+        title: 'AntDesign UI 有多好',
+        count: 60100,
+      },
+      {
+        title: 'AntDesign 是啥',
+        count: 30010,
+      },
+    ],
+  },
+  {
+    title: '文章',
+    children: [
+      {
+        title: 'AntDesign 是一个设计语言',
+        count: 100000,
+      },
+    ],
+  },
+];

 function renderTitle(title) {
  return (
@ -55,35 +66,31 @@ function renderTitle(title) {
        href="https://www.google.com/search?q=antd"
        target="_blank"
        rel="noopener noreferrer"
-      >更多
+      >
+        更多
      </a>
    </span>
  );
 }

-const options = dataSource.map(group => (
-  <OptGroup
-    key={group.title}
-    label={renderTitle(group.title)}
-  >
-    {group.children.map(opt => (
-      <Option key={opt.title} value={opt.title}>
-        {opt.title}
-        <span className="certain-search-item-count">{opt.count} 人 关注</span>
-      </Option>
-    ))}
-  </OptGroup>
-)).concat([
-  <Option disabled key="all" className="show-all">
-    <a
-      href="https://www.google.com/search?q=antd"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      查看所有结果
-    </a>
-  </Option>,
-]);
+const options = dataSource
+  .map(group => (
+    <OptGroup key={group.title} label={renderTitle(group.title)}>
+      {group.children.map(opt => (
+        <Option key={opt.title} value={opt.title}>
+          {opt.title}
+          <span className="certain-search-item-count">{opt.count} 人 关注</span>
+        </Option>
+      ))}
+    </OptGroup>
+  ))
+  .concat([
+    <Option disabled key="all" className="show-all">
+      <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
+        查看所有结果
+      </a>
+    </Option>,
+  ]);

 function Complete() {
  return (
@ -106,9 +113,9 @@ function Complete() {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```

-````css
+```css
 .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
  right: 12px;
 }
@ -119,7 +126,7 @@ ReactDOM.render(<Complete />, mountNode);
 }

 .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
-  border-bottom: 1px solid #F6F6F6;
+  border-bottom: 1px solid #f6f6f6;
 }

 .certain-category-search-dropdown .ant-select-dropdown-menu-item {
@ -136,9 +143,9 @@ ReactDOM.render(<Complete />, mountNode);
 }

 .certain-search-item-count {
- position: absolute;
- color: #999;
- right: 16px;
+  position: absolute;
+  color: #999;
+  right: 16px;
 }

 .certain-category-search.ant-select-focused .certain-category-icon {
@ -146,8 +153,8 @@ ReactDOM.render(<Complete />, mountNode);
 }

 .certain-category-icon {
-  color: #6E6E6E;
+  color: #6e6e6e;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 16px;
 }
-````
+```
--- a/components/auto-complete/demo/custom.md
+++ b/components/auto-complete/demo/custom.md
@ -13,7 +13,7 @@ title:

 Customize Input Component

-````jsx
+```jsx
 import { AutoComplete, Input } from 'antd';

 const { TextArea } = Input;
@ -25,21 +25,17 @@ function onSelect(value) {
 class Complete extends React.Component {
  state = {
    dataSource: [],
-  }
+  };

-  handleSearch = (value) => {
+  handleSearch = value => {
    this.setState({
-      dataSource: !value ? [] : [
-        value,
-        value + value,
-        value + value + value,
-      ],
+      dataSource: !value ? [] : [value, value + value, value + value + value],
    });
-  }
+  };

-  handleKeyPress = (ev) => {
+  handleKeyPress = ev => {
    console.log('handleKeyPress', ev);
-  }
+  };

  render() {
    const { dataSource } = this.state;
@ -62,4 +58,4 @@ class Complete extends React.Component {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@ -13,7 +13,7 @@ title:

 A non-case-sensitive AutoComplete

-````jsx
+```jsx
 import { AutoComplete } from 'antd';

 const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
@ -24,10 +24,12 @@ function Complete() {
      style={{ width: 200 }}
      dataSource={dataSource}
      placeholder="try to type `b`"
-      filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
+      filterOption={(inputValue, option) =>
+        option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+      }
    />
  );
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@ -13,7 +13,7 @@ title:

 You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。

-````jsx
+```jsx
 import { AutoComplete } from 'antd';

 const Option = AutoComplete.Option;
@ -21,9 +21,9 @@ const Option = AutoComplete.Option;
 class Complete extends React.Component {
  state = {
    result: [],
-  }
+  };

-  handleSearch = (value) => {
+  handleSearch = value => {
    let result;
    if (!value || value.indexOf('@') >= 0) {
      result = [];
@ -31,17 +31,13 @@ class Complete extends React.Component {
      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    }
    this.setState({ result });
-  }
+  };

  render() {
    const { result } = this.state;
    const children = result.map(email => <Option key={email}>{email}</Option>);
    return (
-      <AutoComplete
-        style={{ width: 200 }}
-        onSearch={this.handleSearch}
-        placeholder="input here"
-      >
+      <AutoComplete style={{ width: 200 }} onSearch={this.handleSearch} placeholder="input here">
        {children}
      </AutoComplete>
    );
@ -49,4 +45,4 @@ class Complete extends React.Component {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@ -11,13 +11,10 @@ title:

 ## en-US

-Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
-Basic Usage, set datasource of autocomplete with `dataSource` property.
+Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.

-````jsx
-import {
-  Icon, Button, Input, AutoComplete,
-} from 'antd';
+```jsx
+import { Icon, Button, Input, AutoComplete } from 'antd';

 const Option = AutoComplete.Option;

@ -30,7 +27,9 @@ function getRandomInt(max, min = 0) {
 }

 function searchResult(query) {
-  return (new Array(getRandomInt(5))).join('.').split('.')
+  return new Array(getRandomInt(5))
+    .join('.')
+    .split('.')
    .map((item, idx) => ({
      query,
      category: `${query}${idx}`,
@ -62,13 +61,13 @@ function renderOption(item) {
 class Complete extends React.Component {
  state = {
    dataSource: [],
-  }
+  };

-  handleSearch = (value) => {
+  handleSearch = value => {
    this.setState({
      dataSource: value ? searchResult(value) : [],
    });
-  }
+  };

  render() {
    const { dataSource } = this.state;
@ -85,11 +84,11 @@ class Complete extends React.Component {
          optionLabelProp="text"
        >
          <Input
-            suffix={(
+            suffix={
              <Button className="search-btn" size="large" type="primary">
                <Icon type="search" />
              </Button>
-            )}
+            }
          />
        </AutoComplete>
      </div>
@ -98,9 +97,9 @@ class Complete extends React.Component {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```

-````css
+```css
 .global-search-wrapper {
  padding-right: 50px;
 }
@ -139,4 +138,4 @@ ReactDOM.render(<Complete />, mountNode);
 .global-search-item-count {
  flex: none;
 }
-````
+```
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -15,16 +15,16 @@ When there is a need for autocomplete functionality.

 ```jsx
 const dataSource = ['12345', '23456', '34567'];
-<AutoComplete dataSource={dataSource} />
+<AutoComplete dataSource={dataSource} />;
 ```

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | allowClear | Show clear button, effective in multiple mode only. | boolean | false |
 | autoFocus | get focus when component mounted | boolean | false |
 | backfill | backfill selected item the input when using keyboard | boolean | false |
 | children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
-| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> /  Array&lt;React.ReactElement<OptionProps>> | - |
+| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - |
 | dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |
 | defaultValue | Initial selected option. | string\|string\[]\| - |
@ -44,7 +44,7 @@ const dataSource = ['12345', '23456', '34567'];

 ## Methods

-| Name | Description |
-| ---- | ----------- |
-| blur() | remove focus |
-| focus() | get focus |
+| Name    | Description  |
+| ------- | ------------ |
+| blur()  | remove focus |
+| focus() | get focus    |
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -16,7 +16,7 @@ title: AutoComplete

 ```jsx
 const dataSource = ['12345', '23456', '34567'];
-<AutoComplete dataSource={dataSource} />
+<AutoComplete dataSource={dataSource} />;
 ```

 | 参数 | 说明 | 类型 | 默认值 |
@ -45,7 +45,7 @@ const dataSource = ['12345', '23456', '34567'];

 ## 方法

-| 名称 | 描述 |
-| --- | --- |
-| blur() | 移除焦点 |
+| 名称    | 描述     |
+| ------- | -------- |
+| blur()  | 移除焦点 |
 | focus() | 获取焦点 |
--- a/components/avatar/demo/badge.md
+++ b/components/avatar/demo/badge.md
@ -13,18 +13,22 @@ title:

 Usually used for reminders and notifications.

-````jsx
+```jsx
 import { Avatar, Badge } from 'antd';

 ReactDOM.render(
  <div>
    <span style={{ marginRight: 24 }}>
-      <Badge count={1}><Avatar shape="square" icon="user" /></Badge>
+      <Badge count={1}>
+        <Avatar shape="square" icon="user" />
+      </Badge>
    </span>
    <span>
-      <Badge dot><Avatar shape="square" icon="user" /></Badge>
+      <Badge dot>
+        <Avatar shape="square" icon="user" />
+      </Badge>
    </span>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/avatar/demo/basic.md
+++ b/components/avatar/demo/basic.md
@ -13,7 +13,7 @@ title:

 Three sizes and two shapes are available.

-````jsx
+```jsx
 import { Avatar } from 'antd';

 ReactDOM.render(
@ -31,9 +31,9 @@ ReactDOM.render(
      <Avatar shape="square" size="small" icon="user" />
    </div>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 #components-avatar-demo-basic .ant-avatar {
--- a/components/avatar/demo/dynamic.md
+++ b/components/avatar/demo/dynamic.md
@ -13,7 +13,7 @@ title:

 For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.

-````jsx
+```jsx
 import { Avatar, Button } from 'antd';

 const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
@ -34,7 +34,7 @@ class Autoset extends React.Component {
      user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
      color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
    });
-  }
+  };

  render() {
    return (
@ -42,7 +42,11 @@ class Autoset extends React.Component {
        <Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="large">
          {this.state.user}
        </Avatar>
-        <Button size="small" style={{ marginLeft: 16, verticalAlign: 'middle' }} onClick={this.changeUser}>
+        <Button
+          size="small"
+          style={{ marginLeft: 16, verticalAlign: 'middle' }}
+          onClick={this.changeUser}
+        >
          Change
        </Button>
      </div>
@ -51,4 +55,4 @@ class Autoset extends React.Component {
 }

 ReactDOM.render(<Autoset />, mountNode);
-````
+```
--- a/components/avatar/demo/toggle-debug.md
+++ b/components/avatar/demo/toggle-debug.md
@ -14,7 +14,7 @@ debug: true

 Text inside Avatar should be set a proper font size when toggle it's visibility.

-````jsx
+```jsx
 import { Avatar, Button } from 'antd';

 class App extends React.Component {
@ -28,7 +28,7 @@ class App extends React.Component {
    this.setState({
      hide: !this.state.hide,
    });
-  }
+  };

  toggleSize = () => {
    const sizes = ['small', 'default', 'large'];
@ -39,13 +39,13 @@ class App extends React.Component {
    this.setState({
      size: sizes[current],
    });
-  }
+  };

  changeScale = () => {
    this.setState({
      scale: this.state.scale === 1 ? 2 : 1,
    });
-  }
+  };

  render() {
    const { hide, size, scale } = this.state;
@ -60,7 +60,11 @@ class App extends React.Component {
          <Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}>
            Avatar
          </Avatar>
-          <Avatar size={size} src="invalid" style={{ background: '#00a2ae', display: hide ? 'none' : '' }}>
+          <Avatar
+            size={size}
+            src="invalid"
+            style={{ background: '#00a2ae', display: hide ? 'none' : '' }}
+          >
            Invalid
          </Avatar>
          <div style={{ display: hide ? 'none' : '' }}>
@ -78,3 +82,4 @@ class App extends React.Component {
 }

 ReactDOM.render(<App />, mountNode);
+```
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@ -13,7 +13,7 @@ title:

 Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.

-````jsx
+```jsx
 import { Avatar } from 'antd';

 ReactDOM.render(
@ -25,9 +25,9 @@ ReactDOM.render(
    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
    <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 #components-avatar-demo-type .ant-avatar {
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@ -9,7 +9,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 ## API

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
 | shape | the shape of avatar | `circle` \| `square` | `circle` |
 | size | the size of the avatar | number \| string: `large` `small` `default` | `default` |
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@ -13,7 +13,7 @@ title:

 The most basic usage.

-````jsx
+```jsx
 import { BackTop } from 'antd';

 ReactDOM.render(
@ -23,6 +23,6 @@ ReactDOM.render(
    <strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
    button.
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@ -13,8 +13,7 @@ title:

 You can customize the style of the button, just note the size limit: no more than `40px * 40px`.

-
-````jsx
+```jsx
 import { BackTop } from 'antd';

 ReactDOM.render(
@ -26,11 +25,11 @@ ReactDOM.render(
    <strong style={{ color: '#1088e9' }}> blue </strong>
    button.
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 #components-back-top-demo-custom .ant-back-top {
  bottom: 100px;
 }
@ -44,4 +43,4 @@ ReactDOM.render(
  text-align: center;
  font-size: 20px;
 }
-````
+```
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@ -18,7 +18,7 @@ title: BackTop
 > If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | target | specifies the scrollable area dom node | () => HTMLElement | () => window |
 | visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400 |
 | onClick | a callback function, which can be executed when you click the button | Function | - |
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@ -13,7 +13,7 @@ title:

 Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.

-````jsx
+```jsx
 import { Badge, Icon } from 'antd';

 ReactDOM.render(
@ -28,9 +28,9 @@ ReactDOM.render(
      <a href="#" className="head-example" />
    </Badge>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 .ant-badge:not(.ant-badge-not-a-wrapper) {
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@ -13,10 +13,8 @@ title:

 The count will be animated as it changes.

-````jsx
-import {
-  Badge, Button, Icon, Switch,
-} from 'antd';
+```jsx
+import { Badge, Button, Icon, Switch } from 'antd';

 const ButtonGroup = Button.Group;

@ -24,12 +22,12 @@ class Demo extends React.Component {
  state = {
    count: 5,
    show: true,
-  }
+  };

  increase = () => {
    const count = this.state.count + 1;
    this.setState({ count });
-  }
+  };

  decline = () => {
    let count = this.state.count - 1;
@ -37,11 +35,11 @@ class Demo extends React.Component {
      count = 0;
    }
    this.setState({ count });
-  }
+  };

-  onChange = (show) => {
+  onChange = show => {
    this.setState({ show });
-  }
+  };

  render() {
    return (
@ -71,4 +69,4 @@ class Demo extends React.Component {
 }

 ReactDOM.render(<Demo />, mountNode);
-````
+```
--- a/components/badge/demo/colorful.md
+++ b/components/badge/demo/colorful.md
@ -11,19 +11,32 @@ title:

 ## en-US

-New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations.
-You can also set it to a hex color string for custom color.
+New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.

-````jsx
+```jsx
 import { Badge } from 'antd';

-const colors = ['pink', 'red', 'yellow', 'orange',	'cyan',	'green',	'blue',	'purple',	'geekblue',	'magenta', 'volcano', 'gold', 'lime'];
+const colors = [
+  'pink',
+  'red',
+  'yellow',
+  'orange',
+  'cyan',
+  'green',
+  'blue',
+  'purple',
+  'geekblue',
+  'magenta',
+  'volcano',
+  'gold',
+  'lime',
+];

 ReactDOM.render(
  <div>
    <h4 style={{ marginBottom: 16 }}>Presets:</h4>
    <div>
-      {colors.map((color) => (
+      {colors.map(color => (
        <div key={color}>
          <Badge color={color} text={color} />
        </div>
@ -40,12 +53,12 @@ ReactDOM.render(
      <Badge color="#108ee9" text="#108ee9" />
    </div>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 .ant-tag {
  margin-bottom: 8px;
 }
-````
+```
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@ -11,10 +11,9 @@ title:

 ## en-US

-This will simply display a red badge, without a specific count.
-If count equals 0, it won't display the dot.
+This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.

-````jsx
+```jsx
 import { Badge, Icon } from 'antd';

 ReactDOM.render(
@ -29,9 +28,9 @@ ReactDOM.render(
      <a href="#">Link something</a>
    </Badge>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 .anticon-notification {
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@ -13,7 +13,7 @@ title:

 The badge can be wrapped with `a` tag to make it linkable.

-````jsx
+```jsx
 import { Badge } from 'antd';

 ReactDOM.render(
@ -22,6 +22,6 @@ ReactDOM.render(
      <span className="head-example" />
    </Badge>
  </a>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@ -15,18 +15,21 @@ title:

 Used in standalone when children is empty.

-````jsx
+```jsx
 import { Badge } from 'antd';

 ReactDOM.render(
  <div>
    <Badge count={25} />
-    <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
+    <Badge
+      count={4}
+      style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
+    />
    <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 .ant-badge-not-a-wrapper:not(.ant-badge-status) {
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@ -13,7 +13,7 @@ title:

 `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.

-````jsx
+```jsx
 import { Badge } from 'antd';

 ReactDOM.render(
@ -31,6 +31,6 @@ ReactDOM.render(
      <a href="#" className="head-example" />
    </Badge>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@ -13,7 +13,7 @@ title:

 Standalone badge with status.

-````jsx
+```jsx
 import { Badge } from 'antd';

 ReactDOM.render(
@ -34,6 +34,6 @@ ReactDOM.render(
    <br />
    <Badge status="warning" text="Warning" />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/badge/demo/title.md
+++ b/components/badge/demo/title.md
@ -14,7 +14,7 @@ debug: true

 The badge will display `title` when hovered over, instead of `count`.

-````jsx
+```jsx
 import { Badge } from 'antd';

 ReactDOM.render(
@ -23,9 +23,9 @@ ReactDOM.render(
      <a href="#" className="head-example" />
    </Badge>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 .ant-badge:not(.ant-badge-not-a-wrapper) {
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@ -23,13 +23,13 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 ```

 | Property | Description | Type | Default | Version |
-| -------- | ----------- | ---- | ------- | ------- |
+| --- | --- | --- | --- | --- |
 | color | Customize Badge dot color | string | - | 3.16.0 |
-| count | Number to show in badge | ReactNode |  | |
-| dot | Whether to display a red dot instead of `count` | boolean | `false` | |
-| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - | |
-| overflowCount | Max count to show | number | 99 | |
-| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
-| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
-| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | |
-| title | Text to show when hovering over the badge | string | `count` | |
+| count | Number to show in badge | ReactNode |  |  |
+| dot | Whether to display a red dot instead of `count` | boolean | `false` |  |
+| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - |  |
+| overflowCount | Max count to show | number | 99 |  |
+| showZero | Whether to show badge when `count` is zero | boolean | `false` |  |
+| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |  |
+| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |  |
+| title | Text to show when hovering over the badge | string | `count` |  |
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -26,11 +26,11 @@ title: Badge
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | color | 自定义小圆点的颜色 | string | - | 3.16.0 |
-| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode |  | |
-| dot | 不展示数字，只有一个小红点 | boolean | false | |
-| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - | |
-| overflowCount | 展示封顶的数字值 | number | 99 | |
-| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
-| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | |
-| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' | |
-| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
+| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode |  |  |
+| dot | 不展示数字，只有一个小红点 | boolean | false |  |
+| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - |  |
+| overflowCount | 展示封顶的数字值 | number | 99 |  |
+| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
+| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |  |
+| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |  |
+| title | 设置鼠标放在状态点上时显示的文字 | string | `count` |  |
--- a/components/breadcrumb/demo/router-4.md
+++ b/components/breadcrumb/demo/router-4.md
@ -15,10 +15,8 @@ title:

 Used together with `react-router@4` or other router.

-````jsx
-import {
-  HashRouter as Router, Route, Switch, Link, withRouter,
-} from 'react-router-dom';
+```jsx
+import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
 import { Breadcrumb, Alert } from 'antd';

 const Apps = () => (
@ -39,24 +37,22 @@ const breadcrumbNameMap = {
  '/apps/1/detail': 'Detail',
  '/apps/2/detail': 'Detail',
 };
-const Home = withRouter((props) => {
+const Home = withRouter(props => {
  const { location } = props;
  const pathSnippets = location.pathname.split('/').filter(i => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
-        <Link to={url}>
-          {breadcrumbNameMap[url]}
-        </Link>
+        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
-  const breadcrumbItems = [(
+  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">Home</Link>
-    </Breadcrumb.Item>
-  )].concat(extraBreadcrumbItems);
+    </Breadcrumb.Item>,
+  ].concat(extraBreadcrumbItems);
  return (
    <div className="demo">
      <div className="demo-nav">
@ -68,9 +64,7 @@ const Home = withRouter((props) => {
        <Route render={() => <span>Home Page</span>} />
      </Switch>
      <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
-      <Breadcrumb>
-        {breadcrumbItems}
-      </Breadcrumb>
+      <Breadcrumb>{breadcrumbItems}</Breadcrumb>
    </div>
  );
 });
@ -79,11 +73,11 @@ ReactDOM.render(
  <Router>
    <Home />
  </Router>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 .demo {
  margin: 16px;
 }
@ -100,4 +94,4 @@ ReactDOM.render(
 .app-list {
  margin-top: 16px;
 }
-````
+```
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@ -1,6 +1,6 @@
 ---
 order: 4
-title: 
+title:
  zh-CN: 分隔符
  en-US: Configuring the Separator
 ---
@ -13,7 +13,7 @@ title:

 The separator can be customized by setting the separator property: separator=">"

-````jsx
+```jsx
 import { Breadcrumb } from 'antd';

 ReactDOM.render(
@ -23,6 +23,6 @@ ReactDOM.render(
    <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
    <Breadcrumb.Item>An Application</Breadcrumb.Item>
  </Breadcrumb>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@ -13,7 +13,7 @@ title:

 The icon should be placed in front of the text.

-````jsx
+```jsx
 import { Breadcrumb, Icon } from 'antd';

 ReactDOM.render(
@ -25,10 +25,8 @@ ReactDOM.render(
      <Icon type="user" />
      <span>Application List</span>
    </Breadcrumb.Item>
-    <Breadcrumb.Item>
-      Application
-    </Breadcrumb.Item>
+    <Breadcrumb.Item>Application</Breadcrumb.Item>
  </Breadcrumb>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@ -13,7 +13,7 @@ title:

 There are `primary` button, `default` button, `dashed` button and `danger` button in antd.

-````jsx
+```jsx
 import { Button } from 'antd';

 ReactDOM.render(
@ -24,6 +24,6 @@ ReactDOM.render(
    <Button type="danger">Danger</Button>
    <Button type="link">Link</Button>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/button/demo/block.md
+++ b/components/button/demo/block.md
@ -13,17 +13,25 @@ title:

 `block` property will make the button fit to its parent width.

-````jsx
+```jsx
 import { Button } from 'antd';

 ReactDOM.render(
  <div>
-    <Button type="primary" block>Primary</Button>
+    <Button type="primary" block>
+      Primary
+    </Button>
    <Button block>Default</Button>
-    <Button type="dashed" block>Dashed</Button>
-    <Button type="danger" block>Danger</Button>
-    <Button type="link" block>Link</Button>
+    <Button type="dashed" block>
+      Dashed
+    </Button>
+    <Button type="danger" block>
+      Danger
+    </Button>
+    <Button type="link" block>
+      Link
+    </Button>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/button/demo/button-group.md
+++ b/components/button/demo/button-group.md
@ -17,7 +17,7 @@ Buttons can be grouped by placing multiple `Button` components into a `Button.Gr

 The `size` can be set to `large`, `small` or left unset resulting in a default size.

-````jsx
+```jsx
 import { Button, Icon } from 'antd';

 const ButtonGroup = Button.Group;
@ -43,10 +43,12 @@ ReactDOM.render(
    <h4>With Icon</h4>
    <ButtonGroup>
      <Button type="primary">
-        <Icon type="left" />Go back
+        <Icon type="left" />
+        Go back
      </Button>
      <Button type="primary">
-        Go forward<Icon type="right" />
+        Go forward
+        <Icon type="right" />
      </Button>
    </ButtonGroup>
    <ButtonGroup>
@ -54,9 +56,9 @@ ReactDOM.render(
      <Button type="primary" icon="cloud-download" />
    </ButtonGroup>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 #components-button-demo-button-group h4 {
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@ -13,27 +13,35 @@ title:

 To mark a button as disabled, add the `disabled` property to the `Button`.

-````jsx
+```jsx
 import { Button } from 'antd';

 ReactDOM.render(
  <div>
    <Button type="primary">Primary</Button>
-    <Button type="primary" disabled>Primary(disabled)</Button>
+    <Button type="primary" disabled>
+      Primary(disabled)
+    </Button>
    <br />
    <Button>Default</Button>
    <Button disabled>Default(disabled)</Button>
    <br />
    <Button type="dashed">Dashed</Button>
-    <Button type="dashed" disabled>Dashed(disabled)</Button>
+    <Button type="dashed" disabled>
+      Dashed(disabled)
+    </Button>
    <br />
    <Button type="link">Link</Button>
-    <Button type="link" disabled>Link(disabled)</Button>
+    <Button type="link" disabled>
+      Link(disabled)
+    </Button>
    <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
      <Button ghost>Ghost</Button>
-      <Button ghost disabled>Ghost(disabled)</Button>
+      <Button ghost disabled>
+        Ghost(disabled)
+      </Button>
    </div>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@ -13,17 +13,25 @@ title:

 `ghost` property will make button's background transparent, it is common used in colored background.

-````jsx
+```jsx
 import { Button } from 'antd';

 ReactDOM.render(
  <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
-    <Button type="primary" ghost>Primary</Button>
+    <Button type="primary" ghost>
+      Primary
+    </Button>
    <Button ghost>Default</Button>
-    <Button type="dashed" ghost>Dashed</Button>
-    <Button type="danger" ghost>danger</Button>
-    <Button type="link" ghost>link</Button>
+    <Button type="dashed" ghost>
+      Dashed
+    </Button>
+    <Button type="danger" ghost>
+      danger
+    </Button>
+    <Button type="link" ghost>
+      link
+    </Button>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@ -17,21 +17,25 @@ title:

 If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.

-````jsx
+```jsx
 import { Button } from 'antd';

 ReactDOM.render(
  <div>
    <Button type="primary" shape="circle" icon="search" />
-    <Button type="primary" icon="search">Search</Button>
+    <Button type="primary" icon="search">
+      Search
+    </Button>
    <Button shape="circle" icon="search" />
    <Button icon="search">Search</Button>
    <br />
    <Button shape="circle" icon="search" />
    <Button icon="search">Search</Button>
    <Button type="dashed" shape="circle" icon="search" />
-    <Button type="dashed" icon="search">Search</Button>
+    <Button type="dashed" icon="search">
+      Search
+    </Button>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@ -13,22 +13,22 @@ title:

 A loading indicator can be added to a button by setting the `loading` property on the `Button`.

-````jsx
+```jsx
 import { Button } from 'antd';

 class App extends React.Component {
  state = {
    loading: false,
    iconLoading: false,
-  }
+  };

  enterLoading = () => {
    this.setState({ loading: true });
-  }
+  };

  enterIconLoading = () => {
    this.setState({ iconLoading: true });
-  }
+  };

  render() {
    return (
@ -43,7 +43,12 @@ class App extends React.Component {
        <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
          Click me!
        </Button>
-        <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
+        <Button
+          type="primary"
+          icon="poweroff"
+          loading={this.state.iconLoading}
+          onClick={this.enterIconLoading}
+        >
          Click me!
        </Button>
        <br />
@ -55,4 +60,4 @@ class App extends React.Component {
 }

 ReactDOM.render(<App />, mountNode);
-````
+```
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@ -7,17 +7,14 @@ title:

 ## zh-CN

-按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
+按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。

 ## en-US

 If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.

-
-````jsx
-import {
-  Button, Menu, Dropdown, Icon,
-} from 'antd';
+```jsx
+import { Button, Menu, Dropdown, Icon } from 'antd';

 function handleMenuClick(e) {
  console.log('click', e);
@ -41,6 +38,6 @@ ReactDOM.render(
      </Button>
    </Dropdown>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@ -17,7 +17,7 @@ Ant Design supports a default button size as well as a large and small size.

 If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.

-````jsx
+```jsx
 import { Button, Radio, Icon } from 'antd';

 class ButtonSize extends React.Component {
@ -25,9 +25,9 @@ class ButtonSize extends React.Component {
    size: 'large',
  };

-  handleSizeChange = (e) => {
+  handleSizeChange = e => {
    this.setState({ size: e.target.value });
-  }
+  };

  render() {
    const size = this.state.size;
@ -38,23 +38,38 @@ class ButtonSize extends React.Component {
          <Radio.Button value="default">Default</Radio.Button>
          <Radio.Button value="small">Small</Radio.Button>
        </Radio.Group>
-        <br /><br />
-        <Button type="primary" size={size}>Primary</Button>
+        <br />
+        <br />
+        <Button type="primary" size={size}>
+          Primary
+        </Button>
        <Button size={size}>Normal</Button>
-        <Button type="dashed" size={size}>Dashed</Button>
-        <Button type="danger" size={size}>Danger</Button>
-        <Button type="link" size={size}>Link</Button>
+        <Button type="dashed" size={size}>
+          Dashed
+        </Button>
+        <Button type="danger" size={size}>
+          Danger
+        </Button>
+        <Button type="link" size={size}>
+          Link
+        </Button>
        <br />
        <Button type="primary" shape="circle" icon="download" size={size} />
-        <Button type="primary" shape="round" icon="download" size={size}>Download</Button>
-        <Button type="primary" icon="download" size={size}>Download</Button>
+        <Button type="primary" shape="round" icon="download" size={size}>
+          Download
+        </Button>
+        <Button type="primary" icon="download" size={size}>
+          Download
+        </Button>
        <br />
        <Button.Group size={size}>
          <Button type="primary">
-            <Icon type="left" />Backward
+            <Icon type="left" />
+            Backward
          </Button>
          <Button type="primary">
-            Forward<Icon type="right" />
+            Forward
+            <Icon type="right" />
          </Button>
        </Button.Group>
      </div>
@ -63,4 +78,4 @@ class ButtonSize extends React.Component {
 }

 ReactDOM.render(<ButtonSize />, mountNode);
-````
+```
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -15,7 +15,7 @@ A button means an operation (or a series of operations). Clicking a button will
 To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | disabled | disabled state of button | boolean | `false` |
 | ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | `false` |
 | href | redirect url of link button | string | - |
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -18,7 +18,7 @@ subtitle: 按钮
 按钮的属性说明如下：

 | 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | disabled | 按钮失效状态 | boolean | `false` |
 | ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
 | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |
@ -44,7 +44,6 @@ subtitle: 按钮

 设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。

-
 <style>
 [id^="components-button-demo-"] .ant-btn {
  margin-right: 8px;
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@ -88,7 +88,6 @@
 }
 .button-variant-ghost(@color; @border: @color) {
  .button-color(@color; transparent; @border);
-
  text-shadow: none;
  &:hover,
  &:focus {
@ -149,13 +148,11 @@
  &-lg > .@{btnClassName},
  &-lg > span > .@{btnClassName} {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
-
    line-height: @btn-height-lg - 2px;
  }
  &-sm > .@{btnClassName},
  &-sm > span > .@{btnClassName} {
    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
-
    line-height: @btn-height-sm - 2px;
    > .@{iconfont-css-prefix} {
      font-size: @font-size-base;
@ -229,7 +226,6 @@
 // dashed button style
 .btn-dashed() {
  .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
-
  border-style: dashed;
 }
 // danger button style
@ -239,7 +235,6 @@
 // link button style
 .btn-link() {
  .button-variant-other(@link-color, transparent, transparent);
-
  box-shadow: none;
  &:hover,
  &:focus,
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@ -13,15 +13,12 @@ title:

 A basic calendar component with Year/Month switch.

-````jsx
+```jsx
 import { Calendar } from 'antd';

 function onPanelChange(value, mode) {
  console.log(value, mode);
 }

-ReactDOM.render(
-  <Calendar onPanelChange={onPanelChange} />,
-  mountNode
-);
-````
+ReactDOM.render(<Calendar onPanelChange={onPanelChange} />, mountNode);
+```
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@ -13,7 +13,7 @@ title:

 Nested inside a container element for rendering in limited space.

-````jsx
+```jsx
 import { Calendar } from 'antd';

 function onPanelChange(value, mode) {
@ -24,6 +24,6 @@ ReactDOM.render(
  <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
    <Calendar fullscreen={false} onPanelChange={onPanelChange} />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@ -13,7 +13,7 @@ title:

 This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.

-````jsx
+```jsx
 import { Calendar, Badge } from 'antd';

 function getListData(value) {
@ -23,13 +23,15 @@ function getListData(value) {
      listData = [
        { type: 'warning', content: 'This is warning event.' },
        { type: 'success', content: 'This is usual event.' },
-      ]; break;
+      ];
+      break;
    case 10:
      listData = [
        { type: 'warning', content: 'This is warning event.' },
        { type: 'success', content: 'This is usual event.' },
        { type: 'error', content: 'This is error event.' },
-      ]; break;
+      ];
+      break;
    case 15:
      listData = [
        { type: 'warning', content: 'This is warning event' },
@ -38,7 +40,8 @@ function getListData(value) {
        { type: 'error', content: 'This is error event 2.' },
        { type: 'error', content: 'This is error event 3.' },
        { type: 'error', content: 'This is error event 4.' },
-      ]; break;
+      ];
+      break;
    default:
  }
  return listData || [];
@ -48,13 +51,11 @@ function dateCellRender(value) {
  const listData = getListData(value);
  return (
    <ul className="events">
-      {
-        listData.map(item => (
-          <li key={item.content}>
-            <Badge status={item.type} text={item.content} />
-          </li>
-        ))
-      }
+      {listData.map(item => (
+        <li key={item.content}>
+          <Badge status={item.type} text={item.content} />
+        </li>
+      ))}
    </ul>
  );
 }
@ -77,11 +78,11 @@ function monthCellRender(value) {

 ReactDOM.render(
  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 .events {
  list-style: none;
  margin: 0;
@ -101,4 +102,4 @@ ReactDOM.render(
 .notes-month section {
  font-size: 28px;
 }
-````
+```
--- a/components/calendar/demo/select.md
+++ b/components/calendar/demo/select.md
@ -13,7 +13,7 @@ title:

 A basic calendar component with Year/Month switch.

-````jsx
+```jsx
 import { Calendar, Alert } from 'antd';
 import moment from 'moment';

@ -21,24 +21,26 @@ class App extends React.Component {
  state = {
    value: moment('2017-01-25'),
    selectedValue: moment('2017-01-25'),
-  }
+  };

-  onSelect = (value) => {
+  onSelect = value => {
    this.setState({
      value,
      selectedValue: value,
    });
-  }
+  };

-  onPanelChange = (value) => {
+  onPanelChange = value => {
    this.setState({ value });
-  }
+  };

  render() {
    const { value, selectedValue } = this.state;
    return (
      <div>
-        <Alert message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`} />
+        <Alert
+          message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`}
+        />
        <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
      </div>
    );
@ -46,4 +48,4 @@ class App extends React.Component {
 }

 ReactDOM.render(<App />, mountNode);
-````
+```
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@ -30,7 +30,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 ```

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
 | dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |
 | defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@ -11,35 +11,25 @@ title:

 ## en-US

-A basic card containing a title, content and an extra corner content.
-Supports two sizes: `default` and `small`.
+A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.

 ```jsx
 import { Card } from 'antd';

 ReactDOM.render(
  <div>
-    <Card
-      title="Default size card"
-      extra={<a href="#">More</a>}
-      style={{ width: 300 }}
-    >
+    <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
-    <Card
-      size="small"
-      title="Small size card"
-      extra={<a href="#">More</a>}
-      style={{ width: 300 }}
-    >
+    <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>,
-  mountNode
+  mountNode,
 );
 ```

--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@ -13,7 +13,7 @@ title:

 A borderless card on a gray background.

-````jsx
+```jsx
 import { Card } from 'antd';

 ReactDOM.render(
@ -24,6 +24,6 @@ ReactDOM.render(
      <p>Card content</p>
    </Card>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/card/demo/flexible-content.md
+++ b/components/card/demo/flexible-content.md
@ -13,8 +13,7 @@ title:

 You can use `Card.Meta` to support more flexible content.

-
-````jsx
+```jsx
 import { Card } from 'antd';

 const { Meta } = Card;
@ -25,11 +24,8 @@ ReactDOM.render(
    style={{ width: 240 }}
    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  >
-    <Meta
-      title="Europe Street beat"
-      description="www.instagram.com"
-    />
+    <Meta title="Europe Street beat" description="www.instagram.com" />
  </Card>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/card/demo/grid-card.md
+++ b/components/card/demo/grid-card.md
@ -13,7 +13,7 @@ title:

 Grid style card content.

-````jsx
+```jsx
 import { Card } from 'antd';

 const gridStyle = {
@ -31,6 +31,6 @@ ReactDOM.render(
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
  </Card>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/card/demo/in-column.md
+++ b/components/card/demo/in-column.md
@ -13,23 +13,29 @@ title:

 Cards usually cooperate with grid column layout in overview page.

-````jsx
+```jsx
 import { Card, Col, Row } from 'antd';

 ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Row gutter={16}>
      <Col span={8}>
-        <Card title="Card title" bordered={false}>Card content</Card>
+        <Card title="Card title" bordered={false}>
+          Card content
+        </Card>
      </Col>
      <Col span={8}>
-        <Card title="Card title" bordered={false}>Card content</Card>
+        <Card title="Card title" bordered={false}>
+          Card content
+        </Card>
      </Col>
      <Col span={8}>
-        <Card title="Card title" bordered={false}>Card content</Card>
+        <Card title="Card title" bordered={false}>
+          Card content
+        </Card>
      </Col>
    </Row>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/card/demo/inner.md
+++ b/components/card/demo/inner.md
@ -13,7 +13,7 @@ title:

 It can be placed inside the ordinary card to display the information of the multilevel structure.

-````jsx
+```jsx
 import { Card } from 'antd';

 ReactDOM.render(
@ -28,11 +28,7 @@ ReactDOM.render(
    >
      Group title
    </p>
-    <Card
-      type="inner"
-      title="Inner Card title"
-      extra={<a href="#">More</a>}
-    >
+    <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
      Inner Card content
    </Card>
    <Card
@ -44,6 +40,6 @@ ReactDOM.render(
      Inner Card content
    </Card>
  </Card>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@ -13,21 +13,19 @@ title:

 Shows a loading indicator while the contents of the card is being fetched.

-````jsx
-import {
-  Skeleton, Switch, Card, Icon, Avatar,
-} from 'antd';
+```jsx
+import { Skeleton, Switch, Card, Icon, Avatar } from 'antd';

 const { Meta } = Card;

 class App extends React.Component {
  state = {
    loading: true,
-  }
+  };

-  onChange = (checked) => {
+  onChange = checked => {
    this.setState({ loading: !checked });
-  }
+  };

  render() {
    const { loading } = this.state;
@ -38,7 +36,9 @@ class App extends React.Component {

        <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
          <Meta
-            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+            avatar={
+              <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+            }
            title="Card title"
            description="This is the description"
          />
@ -50,7 +50,9 @@ class App extends React.Component {
        >
          <Skeleton loading={loading} avatar active>
            <Meta
-              avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+              avatar={
+                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+              }
              title="Card title"
              description="This is the description"
            />
@ -62,4 +64,4 @@ class App extends React.Component {
 }

 ReactDOM.render(<App />, mountNode);
-````
+```
--- a/components/card/demo/meta.md
+++ b/components/card/demo/meta.md
@ -13,7 +13,7 @@ title:

 A Card that supports `cover`, `avatar`, `title` and `description`.

-````jsx
+```jsx
 import { Card, Icon, Avatar } from 'antd';

 const { Meta } = Card;
@ -21,7 +21,12 @@ const { Meta } = Card;
 ReactDOM.render(
  <Card
    style={{ width: 300 }}
-    cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
+    cover={
+      <img
+        alt="example"
+        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+      />
+    }
    actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
  >
    <Meta
@ -30,6 +35,6 @@ ReactDOM.render(
      description="This is the description"
    />
  </Card>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/card/demo/simple.md
+++ b/components/card/demo/simple.md
@ -13,7 +13,7 @@ title:

 A simple card only containing a content area.

-````jsx
+```jsx
 import { Card } from 'antd';

 ReactDOM.render(
@ -22,6 +22,6 @@ ReactDOM.render(
    <p>Card content</p>
    <p>Card content</p>
  </Card>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/card/demo/tabs.md
+++ b/components/card/demo/tabs.md
@ -13,32 +13,39 @@ title:

 More content can be hosted.

-````jsx
+```jsx
 import { Card } from 'antd';

-const tabList = [{
-  key: 'tab1',
-  tab: 'tab1',
-}, {
-  key: 'tab2',
-  tab: 'tab2',
-}];
+const tabList = [
+  {
+    key: 'tab1',
+    tab: 'tab1',
+  },
+  {
+    key: 'tab2',
+    tab: 'tab2',
+  },
+];

 const contentList = {
  tab1: <p>content1</p>,
  tab2: <p>content2</p>,
 };

-const tabListNoTitle = [{
-  key: 'article',
-  tab: 'article',
-}, {
-  key: 'app',
-  tab: 'app',
-}, {
-  key: 'project',
-  tab: 'project',
-}];
+const tabListNoTitle = [
+  {
+    key: 'article',
+    tab: 'article',
+  },
+  {
+    key: 'app',
+    tab: 'app',
+  },
+  {
+    key: 'project',
+    tab: 'project',
+  },
+];

 const contentListNoTitle = {
  article: <p>article content</p>,
@ -50,12 +57,12 @@ class TabsCard extends React.Component {
  state = {
    key: 'tab1',
    noTitleKey: 'app',
-  }
+  };

  onTabChange = (key, type) => {
    console.log(key, type);
    this.setState({ [type]: key });
-  }
+  };

  render() {
    return (
@ -66,16 +73,21 @@ class TabsCard extends React.Component {
          extra={<a href="#">More</a>}
          tabList={tabList}
          activeTabKey={this.state.key}
-          onTabChange={(key) => { this.onTabChange(key, 'key'); }}
+          onTabChange={key => {
+            this.onTabChange(key, 'key');
+          }}
        >
          {contentList[this.state.key]}
        </Card>
-        <br /><br />
+        <br />
+        <br />
        <Card
          style={{ width: '100%' }}
          tabList={tabListNoTitle}
          activeTabKey={this.state.noTitleKey}
-          onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }}
+          onTabChange={key => {
+            this.onTabChange(key, 'noTitleKey');
+          }}
        >
          {contentListNoTitle[this.state.noTitleKey]}
        </Card>
@ -85,4 +97,4 @@ class TabsCard extends React.Component {
 }

 ReactDOM.render(<TabsCard />, mountNode);
-````
+```
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -20,7 +20,7 @@ A card can be used to display content related to a single subject. The content c
 ### Card

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | actions | The action list, shows at the bottom of the Card. | Array&lt;ReactNode> | - |
 | activeTabKey | Current TabPane's key | string | - |
 | headStyle | Inline style to apply to the card head | object | - |
@ -39,17 +39,17 @@ A card can be used to display content related to a single subject. The content c

 ### Card.Grid

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| className | className of container | string | - |
-| style | style object of container | object | - |
+| Property  | Description               | Type   | Default |
+| --------- | ------------------------- | ------ | ------- |
+| className | className of container    | string | -       |
+| style     | style object of container | object | -       |

 ### Card.Meta

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| avatar | avatar or icon | ReactNode | - |
-| className | className of container | string | - |
-| description | description content | ReactNode | - |
-| style | style object of container | object | - |
-| title | title content | ReactNode | - |
+| Property    | Description               | Type      | Default |
+| ----------- | ------------------------- | --------- | ------- |
+| avatar      | avatar or icon            | ReactNode | -       |
+| className   | className of container    | string    | -       |
+| description | description content       | ReactNode | -       |
+| style       | style object of container | object    | -       |
+| title       | title content             | ReactNode | -       |
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -40,17 +40,17 @@ cols: 1

 ### Card.Grid

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| className | 网格容器类名 | string | - |
-| style | 定义网格容器类名的样式 | object | - |
+| Property  | Description            | Type   | Default |
+| --------- | ---------------------- | ------ | ------- |
+| className | 网格容器类名           | string | -       |
+| style     | 定义网格容器类名的样式 | object | -       |

 ### Card.Meta

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| avatar | 头像/图标 | ReactNode | - |
-| className | 容器类名 | string | - |
-| description | 描述内容 | ReactNode | - |
-| style | 定义容器类名的样式 | object | - |
-| title | 标题内容 | ReactNode | - |
+| Property    | Description        | Type      | Default |
+| ----------- | ------------------ | --------- | ------- |
+| avatar      | 头像/图标          | ReactNode | -       |
+| className   | 容器类名           | string    | -       |
+| description | 描述内容           | ReactNode | -       |
+| style       | 定义容器类名的样式 | object    | -       |
+| title       | 标题内容           | ReactNode | -       |
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@ -13,21 +13,29 @@ title:

 Timing of scrolling to the next card/picture.

-````jsx
+```jsx
 import { Carousel } from 'antd';

 ReactDOM.render(
  <Carousel autoplay>
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
+    <div>
+      <h3>1</h3>
+    </div>
+    <div>
+      <h3>2</h3>
+    </div>
+    <div>
+      <h3>3</h3>
+    </div>
+    <div>
+      <h3>4</h3>
+    </div>
  </Carousel>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 /* For demo */
 .ant-carousel .slick-slide {
  text-align: center;
@ -40,4 +48,4 @@ ReactDOM.render(
 .ant-carousel .slick-slide h3 {
  color: #fff;
 }
-````
+```
--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@ -13,7 +13,7 @@ title:

 Basic usage.

-````jsx
+```jsx
 import { Carousel } from 'antd';

 function onChange(a, b, c) {
@ -22,16 +22,24 @@ function onChange(a, b, c) {

 ReactDOM.render(
  <Carousel afterChange={onChange}>
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
+    <div>
+      <h3>1</h3>
+    </div>
+    <div>
+      <h3>2</h3>
+    </div>
+    <div>
+      <h3>3</h3>
+    </div>
+    <div>
+      <h3>4</h3>
+    </div>
  </Carousel>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 /* For demo */
 .ant-carousel .slick-slide {
  text-align: center;
@ -44,4 +52,4 @@ ReactDOM.render(
 .ant-carousel .slick-slide h3 {
  color: #fff;
 }
-````
+```
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@ -13,21 +13,29 @@ title:

 Slides use fade for transition.

-````jsx
+```jsx
 import { Carousel } from 'antd';

 ReactDOM.render(
  <Carousel effect="fade">
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
+    <div>
+      <h3>1</h3>
+    </div>
+    <div>
+      <h3>2</h3>
+    </div>
+    <div>
+      <h3>3</h3>
+    </div>
+    <div>
+      <h3>4</h3>
+    </div>
  </Carousel>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 /* For demo */
 .ant-carousel .slick-slide {
  text-align: center;
@ -40,4 +48,4 @@ ReactDOM.render(
 .ant-carousel .slick-slide h3 {
  color: #fff;
 }
-````
+```
--- a/components/carousel/demo/position.md
+++ b/components/carousel/demo/position.md
@ -13,7 +13,7 @@ title:

 There are 4 position options available.

-````jsx
+```jsx
 import { Carousel, Radio } from 'antd';

 class PositionCarouselDemo extends React.Component {
@ -27,17 +27,29 @@ class PositionCarouselDemo extends React.Component {
    const { dotPosition } = this.state;
    return (
      <div>
-        <Radio.Group onChange={this.handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>
+        <Radio.Group
+          onChange={this.handlePositionChange}
+          value={dotPosition}
+          style={{ marginBottom: 8 }}
+        >
          <Radio.Button value="top">Top</Radio.Button>
          <Radio.Button value="bottom">Bottom</Radio.Button>
          <Radio.Button value="left">Left</Radio.Button>
          <Radio.Button value="right">Right</Radio.Button>
        </Radio.Group>
        <Carousel dotPosition={dotPosition}>
-          <div><h3>1</h3></div>
-          <div><h3>2</h3></div>
-          <div><h3>3</h3></div>
-          <div><h3>4</h3></div>
+          <div>
+            <h3>1</h3>
+          </div>
+          <div>
+            <h3>2</h3>
+          </div>
+          <div>
+            <h3>3</h3>
+          </div>
+          <div>
+            <h3>4</h3>
+          </div>
        </Carousel>
      </div>
    );
@ -45,9 +57,9 @@ class PositionCarouselDemo extends React.Component {
 }

 ReactDOM.render(<PositionCarouselDemo />, mountNode);
-````
+```

-````css
+```css
 /* For demo */
 .ant-carousel .slick-slide {
  text-align: center;
@ -60,4 +72,4 @@ ReactDOM.render(<PositionCarouselDemo />, mountNode);
 .ant-carousel .slick-slide h3 {
  color: #fff;
 }
-````
+```
--- a/Show More
+++ b/Show More