From 1f75a99f8c972dc72f05391b472641245f6d8a17 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 15 Nov 2022 20:12:28 +0800
Subject: [PATCH] docs: use style tag

---
 .../auto-complete/demo/certain-category.md    |  5 ++--
 components/avatar/demo/badge.md               |  5 ++--
 components/back-top/demo/basic.md             |  5 ++--
 .../badge/demo/colorful-with-count-debug.md   |  5 ++--
 components/badge/demo/ribbbon.md              |  5 ++--
 components/breadcrumb/demo/react-router.md    |  5 ++--
 components/button/demo/disabled.md            |  5 ++--
 components/button/demo/ghost.md               |  4 +--
 components/calendar/demo/card.md              |  4 +--
 components/calendar/demo/customize-header.md  |  4 +--
 components/calendar/demo/notice-calendar.md   |  4 +--
 components/card/demo/border-less.md           |  4 +--
 components/collapse/demo/custom.md            |  4 +--
 components/config-provider/demo/direction.md  |  4 +--
 components/config-provider/demo/locale.md     |  4 +--
 components/drawer/demo/form-in-drawer.md      |  4 +--
 components/drawer/demo/render-in-current.md   |  4 +--
 components/drawer/demo/user-profile.md        |  4 +--
 components/dropdown/demo/arrow-center.md      |  4 +--
 components/dropdown/demo/arrow.md             |  4 +--
 components/dropdown/demo/context-menu.md      |  4 +--
 components/dropdown/demo/custom-dropdown.md   |  4 +--
 components/form/demo/advanced-search.md       |  4 +--
 components/form/demo/control-hooks.md         |  4 +--
 components/form/demo/control-ref.md           |  4 +--
 components/form/demo/dynamic-form-item.md     |  4 +--
 components/form/demo/form-context.md          |  4 +--
 components/form/demo/form-in-modal.md         |  4 +--
 components/form/demo/normal-login.md          |  4 +--
 components/grid/demo/flex-align.md            |  4 +--
 components/grid/demo/flex-order.md            |  4 +--
 components/grid/demo/flex.md                  |  4 +--
 components/grid/demo/gutter.md                |  4 +--
 components/grid/demo/playground.md            |  4 +--
 components/image/demo/preview-mask.md         |  4 +--
 components/input/demo/addon.md                |  4 +--
 components/input/demo/group.md                |  4 +--
 components/input/demo/tooltip.md              |  4 +--
 .../layout/demo/custom-trigger-debug.md       |  4 +--
 components/layout/demo/custom-trigger.md      |  4 +--
 components/layout/demo/fixed-sider.md         |  4 +--
 components/layout/demo/fixed.md               |  4 +--
 components/layout/demo/responsive.md          |  4 +--
 components/layout/demo/side.md                |  4 +--
 components/layout/demo/top-side-2.md          |  4 +--
 components/layout/demo/top-side.md            |  4 +--
 components/layout/demo/top.md                 |  4 +--
 components/list/demo/loadmore.md              |  4 +--
 components/result/demo/error.md               |  4 +--
 components/segmented/demo/basic.md            |  4 +--
 components/select/demo/option-label-prop.md   |  4 +--
 components/select/demo/size.md                |  4 +--
 components/select/demo/status.md              |  4 +--
 components/slider/demo/icon-slider.md         |  4 +--
 components/space/demo/align.md                |  4 +--
 components/space/demo/compact-debug.md        |  4 +--
 components/space/demo/compact-nested.md       |  4 +--
 components/space/demo/compact.md              |  4 +--
 components/spin/demo/inside.md                |  4 +--
 components/statistic/demo/card.md             |  4 +--
 components/steps/demo/nav.md                  |  4 +--
 components/steps/demo/step-next.md            |  4 +--
 components/switch/demo/text.tsx               |  8 +++---
 components/table/demo/drag-sorting.md         |  4 +--
 components/table/demo/edit-cell.md            |  4 +--
 components/table/demo/edit-row.md             |  4 +--
 components/table/demo/resizable-column.md     |  4 +--
 components/tabs/demo/card-top.md              |  4 +--
 components/tabs/demo/custom-tab-bar-node.md   |  4 +--
 components/tabs/demo/custom-tab-bar.md        |  4 +--
 components/tabs/demo/extra.md                 |  4 +--
 components/tag/demo/animation.md              |  5 ++--
 components/tag/demo/control.md                | 27 +++++++++----------
 components/time-picker/demo/colored-popup.md  |  4 +--
 components/timeline/demo/custom.md            |  4 +--
 components/tooltip/demo/colorful.md           |  4 +--
 components/transfer/demo/table-transfer.md    |  4 +--
 components/tree/demo/search.md                |  4 +--
 components/upload/demo/drag-sorting.md        |  4 +--
 components/upload/demo/picture-style.md       |  4 +--
 docs/spec/font.en-US.md                       |  4 +--
 docs/spec/font.zh-CN.md                       |  6 ++---
 82 files changed, 184 insertions(+), 181 deletions(-)

diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index 2845bc477d..4c8bfc0dee 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -6,7 +6,8 @@
 
 Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
 
-```css
+<style>
+
 .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
   color: #666;
   font-weight: bold;
@@ -28,4 +29,4 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
 .certain-category-search-dropdown .ant-select-dropdown-menu {
   max-height: 300px;
 }
-```
+</style>
diff --git a/components/avatar/demo/badge.md b/components/avatar/demo/badge.md
index 67270fd52c..84e8f99e26 100644
--- a/components/avatar/demo/badge.md
+++ b/components/avatar/demo/badge.md
@@ -6,7 +6,8 @@
 
 Usually used for reminders and notifications.
 
-```css
+<style>
+
 /* tile uploaded pictures */
 .avatar-item {
   margin-right: 24px;
@@ -16,4 +17,4 @@ Usually used for reminders and notifications.
   margin-right: 0;
   margin-left: 24px;
 }
-```
+</style>
diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md
index 46d42bc1ab..5a192040a9 100644
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -6,11 +6,12 @@
 
 The most basic usage.
 
-```css
+<style>
+
 .site-back-top-basic {
   color: rgba(64, 64, 64, 0.6);
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-back-top-basic {
diff --git a/components/badge/demo/colorful-with-count-debug.md b/components/badge/demo/colorful-with-count-debug.md
index 7636a90424..dfb5bb2dc1 100644
--- a/components/badge/demo/colorful-with-count-debug.md
+++ b/components/badge/demo/colorful-with-count-debug.md
@@ -6,8 +6,9 @@
 
 support `count` when use colorful badge
 
-```css
+<style>
+
 .ant-tag {
   margin-bottom: 8px;
 }
-```
+</style>
diff --git a/components/badge/demo/ribbbon.md b/components/badge/demo/ribbbon.md
index 395a49ce7f..275d45620e 100644
--- a/components/badge/demo/ribbbon.md
+++ b/components/badge/demo/ribbbon.md
@@ -6,8 +6,9 @@
 
 Use ribbon badge.
 
-```css
+<style>
+
 #components-badge-demo-ribbbon .ant-card {
   margin-bottom: 16px;
 }
-```
+</style>
diff --git a/components/breadcrumb/demo/react-router.md b/components/breadcrumb/demo/react-router.md
index 3f653aa607..80dcc369d4 100644
--- a/components/breadcrumb/demo/react-router.md
+++ b/components/breadcrumb/demo/react-router.md
@@ -6,7 +6,8 @@
 
 Used together with `react-router@6+`.
 
-```css
+<style>
+
 .demo {
   margin: 16px;
 }
@@ -23,7 +24,7 @@ Used together with `react-router@6+`.
 .app-list {
   margin-top: 16px;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .demo-nav {
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index b44f9ddd2c..f7b1bf48e5 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -6,9 +6,10 @@
 
 To mark a button as disabled, add the `disabled` property to the `Button`.
 
-```css
+<style>
+
 .site-button-ghost-wrapper {
   padding: 8px 8px 0 8px;
   background: rgb(190, 200, 200);
 }
-```
+</style>
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index 5858082937..14c7ae9a72 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -6,9 +6,9 @@
 
 `ghost` property will make button's background transparent, it is commonly used in colored background.
 
-```css
+<style>
 .site-button-ghost-wrapper {
   padding: 26px 16px 16px;
   background: rgb(190, 200, 200);
 }
-```
+</style>
diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md
index 13187000c8..bc1f9e73d1 100644
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@@ -6,13 +6,13 @@
 
 Nested inside a container element for rendering in limited space.
 
-```css
+<style>
 .site-calendar-demo-card {
   width: 300px;
   border: 1px solid #f0f0f0;
   border-radius: 8px;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-calendar-demo-card {
diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md
index 810387be60..5d226737a1 100644
--- a/components/calendar/demo/customize-header.md
+++ b/components/calendar/demo/customize-header.md
@@ -6,13 +6,13 @@
 
 Customize Calendar header content.
 
-```css
+<style>
 .site-calendar-customize-header-wrapper {
   width: 300px;
   border: 1px solid #f0f0f0;
   border-radius: 2px;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-calendar-customize-header-wrapper {
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
index ce6dac0d5c..971bed727f 100644
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -6,7 +6,7 @@
 
 This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
 
-```css
+<style>
 .events {
   margin: 0;
   padding: 0;
@@ -26,4 +26,4 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w
 .notes-month section {
   font-size: 28px;
 }
-```
+</style>
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
index d6bd49f106..3dcd34e344 100644
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@@ -6,12 +6,12 @@
 
 A borderless card on a gray background.
 
-```css
+<style>
 .site-card-border-less-wrapper {
   padding: 30px;
   background: #ececec;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-card-border-less-wrapper {
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
index 807d8ecc3f..bc5ebcb943 100644
--- a/components/collapse/demo/custom.md
+++ b/components/collapse/demo/custom.md
@@ -6,7 +6,7 @@
 
 Customize the background, border, margin styles and icon for each panel.
 
-```css
+<style>
 [data-theme='compact'] .site-collapse-custom-collapse .site-collapse-custom-panel,
 .site-collapse-custom-collapse .site-collapse-custom-panel {
   margin-bottom: 24px;
@@ -15,7 +15,7 @@ Customize the background, border, margin styles and icon for each panel.
   border: 0px !important;
   border-radius: 2px;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-collapse-custom-collapse .site-collapse-custom-panel {
diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md
index d4b09d897f..f7c62b91f9 100644
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@@ -6,7 +6,7 @@
 
 Components which support rtl direction are listed here, you can toggle the direction in the demo.
 
-```css
+<style>
 .button-demo .ant-btn,
 .button-demo .ant-btn-group {
   margin-right: 8px;
@@ -34,7 +34,7 @@ Components which support rtl direction are listed here, you can toggle the direc
   margin-right: 0;
   margin-left: 20px;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .head-example {
diff --git a/components/config-provider/demo/locale.md b/components/config-provider/demo/locale.md
index ab19a9e378..6629340dd0 100644
--- a/components/config-provider/demo/locale.md
+++ b/components/config-provider/demo/locale.md
@@ -6,7 +6,7 @@
 
 Components which need localization support are listed here, you can toggle the language in the demo.
 
-```css
+<style>
 .site-config-provider-calendar-wrapper {
   width: 319px;
   border: 1px solid #d9d9d9;
@@ -29,7 +29,7 @@ Components which need localization support are listed here, you can toggle the l
 .change-locale {
   margin-bottom: 16px;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .locale-components {
diff --git a/components/drawer/demo/form-in-drawer.md b/components/drawer/demo/form-in-drawer.md
index 4dd3a938ba..51bdfc2045 100644
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@@ -6,7 +6,7 @@
 
 Use a form in Drawer with a submit button.
 
-```css
+<style>
 .site-form-in-drawer-wrapper {
   position: absolute;
   right: 0px;
@@ -17,7 +17,7 @@ Use a form in Drawer with a submit button.
   background: #fff;
   border-top: 1px solid #e9e9e9;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-form-in-drawer-wrapper {
diff --git a/components/drawer/demo/render-in-current.md b/components/drawer/demo/render-in-current.md
index 1405f85652..12531ee9b5 100644
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@@ -6,7 +6,7 @@
 
 Render in current dom. custom container, check `getContainer`.
 
-```css
+<style>
 .site-drawer-render-in-current-wrapper {
   position: relative;
   height: 200px;
@@ -17,7 +17,7 @@ Render in current dom. custom container, check `getContainer`.
   border: 1px solid #ebedf0;
   border-radius: 2px;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-drawer-render-in-current-wrapper {
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
index 6b428aeb40..4bb3d30ed0 100644
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@@ -6,7 +6,7 @@
 
 Use Drawer to quickly preview details of an object, such as those in a list.
 
-```css
+<style>
 .site-description-item-profile-wrapper {
   margin-bottom: 7px;
   color: rgba(0, 0, 0, 0.65);
@@ -37,7 +37,7 @@ Use Drawer to quickly preview details of an object, such as those in a list.
   margin-right: 8px;
   color: rgba(0, 0, 0, 0.85);
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-description-item-profile-p {
diff --git a/components/dropdown/demo/arrow-center.md b/components/dropdown/demo/arrow-center.md
index a7a3a1897d..5cbb9486b7 100644
--- a/components/dropdown/demo/arrow-center.md
+++ b/components/dropdown/demo/arrow-center.md
@@ -6,7 +6,7 @@
 
 By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.
 
-```css
+<style>
 #components-dropdown-demo-arrow-center .ant-btn {
   margin-right: 8px;
   margin-bottom: 8px;
@@ -16,4 +16,4 @@ By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point
   margin-bottom: 8px;
   margin-left: 8px;
 }
-```
+</style>
diff --git a/components/dropdown/demo/arrow.md b/components/dropdown/demo/arrow.md
index cb92ab5426..c259a48102 100644
--- a/components/dropdown/demo/arrow.md
+++ b/components/dropdown/demo/arrow.md
@@ -6,7 +6,7 @@
 
 You could display an arrow.
 
-```css
+<style>
 #components-dropdown-demo-arrow .ant-btn {
   margin-right: 8px;
   margin-bottom: 8px;
@@ -16,4 +16,4 @@ You could display an arrow.
   margin-bottom: 8px;
   margin-left: 8px;
 }
-```
+</style>
diff --git a/components/dropdown/demo/context-menu.md b/components/dropdown/demo/context-menu.md
index d55240131f..952a792228 100644
--- a/components/dropdown/demo/context-menu.md
+++ b/components/dropdown/demo/context-menu.md
@@ -6,12 +6,12 @@
 
 The default trigger mode is `hover`, you can change it to `contextMenu`.
 
-```css
+<style>
 .site-dropdown-context-menu {
   color: #777;
   background: #f7f7f7;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-dropdown-context-menu {
diff --git a/components/dropdown/demo/custom-dropdown.md b/components/dropdown/demo/custom-dropdown.md
index 4adb5a7f8b..ab5ef102ef 100644
--- a/components/dropdown/demo/custom-dropdown.md
+++ b/components/dropdown/demo/custom-dropdown.md
@@ -6,7 +6,7 @@
 
 Customize the dropdown menu via `dropdownRender`. If you don't need the Menu content, use the Popover component directly.
 
-```css
+<style>
 .dropdown-content {
   background: #fff;
   box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
@@ -15,7 +15,7 @@ Customize the dropdown menu via `dropdownRender`. If you don't need the Menu con
 .dropdown-content .ant-dropdown-menu {
   box-shadow: none;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .head-example {
diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md
index 8d040878e1..b5e70ee152 100644
--- a/components/form/demo/advanced-search.md
+++ b/components/form/demo/advanced-search.md
@@ -12,7 +12,7 @@ Three columns layout is often used for advanced searching of data table.
 
 Because the width of label is not fixed, you may need to adjust it by customizing its style.
 
-```css
+<style>
 [data-theme='compact'] .ant-advanced-search-form,
 .ant-advanced-search-form {
   padding: 24px !important;
@@ -30,7 +30,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin
 .ant-advanced-search-form .ant-form-item-control-wrapper {
   flex: 1;
 }
-```
+</style>
 
 <style>
 #components-form-demo-advanced-search .ant-form {
diff --git a/components/form/demo/control-hooks.md b/components/form/demo/control-hooks.md
index bfa18732ab..6e06988e4f 100644
--- a/components/form/demo/control-hooks.md
+++ b/components/form/demo/control-hooks.md
@@ -10,8 +10,8 @@ Call form method with `Form.useForm`.
 
 > Note that `useForm` is a [React Hooks](https://reactjs.org/docs/hooks-intro.html) that only works in functional component.
 
-```css
+<style>
 #components-form-demo-control-hooks .ant-btn {
   margin-right: 8px;
 }
-```
+</style>
diff --git a/components/form/demo/control-ref.md b/components/form/demo/control-ref.md
index 1399c7e60a..378c910159 100644
--- a/components/form/demo/control-ref.md
+++ b/components/form/demo/control-ref.md
@@ -6,8 +6,8 @@
 
 We recommend use `Form.useForm` to create data control. If you are using class component, you can get it by `ref`.
 
-```css
+<style>
 #components-form-demo-control-ref .ant-btn {
   margin-right: 8px;
 }
-```
+</style>
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md
index 1da3afa3bd..bb151dfc19 100644
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -6,7 +6,7 @@
 
 Add or remove form items dynamically. `add` function support config initial value.
 
-```css
+<style>
 .dynamic-delete-button {
   position: relative;
   top: 4px;
@@ -23,7 +23,7 @@ Add or remove form items dynamically. `add` function support config initial valu
   cursor: not-allowed;
   opacity: 0.5;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .dynamic-delete-button {
diff --git a/components/form/demo/form-context.md b/components/form/demo/form-context.md
index 5e2e6d6790..9014035d46 100644
--- a/components/form/demo/form-context.md
+++ b/components/form/demo/form-context.md
@@ -6,7 +6,7 @@
 
 Use `Form.Provider` to process data between forms. In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
 
-```css
+<style>
 #components-form-demo-form-context .user {
   margin-bottom: 8px;
 }
@@ -19,4 +19,4 @@ Use `Form.Provider` to process data between forms. In this case, submit button i
   margin-right: 0;
   margin-left: 8px;
 }
-```
+</style>
diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md
index e44d8f1192..6ee4cce4fc 100644
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.md
@@ -8,8 +8,8 @@
 
 When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
 
-```css
+<style>
 .collection-create-form_last-form-item {
   margin-bottom: 0;
 }
-```
+</style>
diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md
index 774f4f86fa..f916b95b91 100644
--- a/components/form/demo/normal-login.md
+++ b/components/form/demo/normal-login.md
@@ -8,7 +8,7 @@
 
 Normal login form which can contain more elements.
 
-```css
+<style>
 #components-form-demo-normal-login .login-form {
   max-width: 300px;
 }
@@ -21,4 +21,4 @@ Normal login form which can contain more elements.
 #components-form-demo-normal-login .login-form-button {
   width: 100%;
 }
-```
+</style>
diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md
index 250fa734ee..8bbc09a141 100644
--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@@ -6,8 +6,8 @@
 
 Child elements vertically aligned.
 
-```css
+<style>
 #components-grid-demo-flex-align [class~='ant-row'] {
   background: rgba(128, 128, 128, 0.08);
 }
-```
+</style>
diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md
index c467f5df62..483f122988 100644
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@@ -6,8 +6,8 @@
 
 To change the element sort by `order`.
 
-```css
+<style>
 #components-grid-demo-flex-order [class~='ant-row'] {
   background: rgba(128, 128, 128, 0.08);
 }
-```
+</style>
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index d9d7897bec..94b7547fb1 100644
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -8,8 +8,8 @@
 
 Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
 
-```css
+<style>
 #components-grid-demo-flex [class~='ant-row'] {
   background: rgba(128, 128, 128, 0.08);
 }
-```
+</style>
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index fd357cbce0..ea78f831dc 100644
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@@ -18,12 +18,12 @@ You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { x
 
 > vertical gutter was supported after `3.24.0`.
 
-```css
+<style>
 .gutter-box {
   padding: 8px 0;
   background: #00a0e9;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .gutter-box {
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 845edff13c..aa7b53d751 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -6,7 +6,7 @@
 
 A simple playground for column count and gutter.
 
-```css
+<style>
 #components-grid-demo-playground [class~='ant-col'] {
   background: transparent;
   border: 0;
@@ -30,7 +30,7 @@ A simple playground for column count and gutter.
 #components-grid-demo-playground .ant-col {
   padding: 0;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] #components-grid-demo-playground [class~='ant-col'] > div {
diff --git a/components/image/demo/preview-mask.md b/components/image/demo/preview-mask.md
index dc2734dea7..5c8f441aea 100644
--- a/components/image/demo/preview-mask.md
+++ b/components/image/demo/preview-mask.md
@@ -6,7 +6,7 @@
 
 Custom preview mask.
 
-```css
+<style>
 .customize-mask {
   font-size: 20px;
   opacity: 1;
@@ -14,4 +14,4 @@ Custom preview mask.
 .customize-mask .anticon {
   font-size: 32px;
 }
-```
+</style>
diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md
index 6ad627e37b..cdec6438bd 100644
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -6,7 +6,7 @@
 
 Using pre & post tabs example.
 
-```css
+<style>
 .select-before {
   width: 90px;
 }
@@ -22,4 +22,4 @@ Using pre & post tabs example.
 [data-theme='compact'] .select-after {
   width: 65px;
 }
-```
+</style>
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index 463d1105b8..42ada56d10 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -10,7 +10,7 @@ Input.Group example.
 
 Note: You don't need `Col` to control the width in the `compact` mode.
 
-```css
+<style>
 .site-input-group-wrapper .site-input-split {
   background-color: #fff !important;
 }
@@ -32,7 +32,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
 .site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
   border-right-width: 1px;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-input-group-wrapper .site-input-split {
diff --git a/components/input/demo/tooltip.md b/components/input/demo/tooltip.md
index 74950c3b5c..7fb74061f7 100644
--- a/components/input/demo/tooltip.md
+++ b/components/input/demo/tooltip.md
@@ -6,7 +6,7 @@
 
 You can use the Input in conjunction with [Tooltip](/components/tooltip) component to create a Numeric Input, which can provide a good experience for extra-long content display.
 
-```css
+<style>
 /* to prevent the arrow overflow the popup container,
 or the height is not enough when content is empty */
 .numeric-input .ant-tooltip-inner {
@@ -17,4 +17,4 @@ or the height is not enough when content is empty */
 .numeric-input .numeric-input-title {
   font-size: 14px;
 }
-```
+</style>
diff --git a/components/layout/demo/custom-trigger-debug.md b/components/layout/demo/custom-trigger-debug.md
index 127bcf4ccf..40da4eb2df 100644
--- a/components/layout/demo/custom-trigger-debug.md
+++ b/components/layout/demo/custom-trigger-debug.md
@@ -2,7 +2,7 @@
 
 修改内容前，请尝试此 Demo 查看样式是否抖动。
 
-```css
+<style>
 #components-layout-demo-custom-trigger .trigger {
   padding: 0 24px;
   font-size: 18px;
@@ -14,4 +14,4 @@
 #components-layout-demo-custom-trigger .trigger:hover {
   color: #1890ff;
 }
-```
+</style>
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 98827a3967..76271fe80a 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -6,7 +6,7 @@
 
 If you want to use a customized trigger, you can hide the default one by setting `trigger={null}`.
 
-```css
+<style>
 #components-layout-demo-custom-trigger .trigger {
   padding: 0 24px;
   font-size: 18px;
@@ -28,4 +28,4 @@ If you want to use a customized trigger, you can hide the default one by setting
 #components-layout-demo-custom-trigger .site-layout .site-layout-background {
   background: #fff;
 }
-```
+</style>
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index c90b786223..1d497bd569 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -6,7 +6,7 @@
 
 When dealing with long content, a fixed sider can provide a better user experience.
 
-```css
+<style>
 #components-layout-demo-fixed-sider .logo {
   height: 32px;
   margin: 16px;
@@ -15,7 +15,7 @@ When dealing with long content, a fixed sider can provide a better user experien
 #components-layout-demo-fixed-sider .site-layout .site-layout-background {
   background: #fff;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-layout .site-layout-background {
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index 721ded4ea8..72728d85d0 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -6,7 +6,7 @@
 
 Fixed Header is generally used to fix the top navigation to facilitate page switching.
 
-```css
+<style>
 #components-layout-demo-fixed .logo {
   float: left;
   width: 120px;
@@ -17,7 +17,7 @@ Fixed Header is generally used to fix the top navigation to facilitate page swit
 #components-layout-demo-fixed .site-layout .site-layout-background {
   background: #fff;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-layout .site-layout-background {
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index 3a50b89dd7..843257e735 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -10,7 +10,7 @@ Layout.Sider supports responsive layout.
 
 > Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to 0.
 
-```css
+<style>
 #components-layout-demo-responsive .logo {
   height: 32px;
   margin: 16px;
@@ -24,7 +24,7 @@ Layout.Sider supports responsive layout.
 #components-layout-demo-responsive .site-layout-background {
   background: #fff;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-layout-sub-header-background {
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 84ceff397b..aa686414fa 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -14,7 +14,7 @@ Generally, the mainnav is placed on the left side of the page, and the secondary
 
 The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
 
-```css
+<style>
 #components-layout-demo-side .logo {
   height: 32px;
   margin: 16px;
@@ -24,7 +24,7 @@ The level of the aside navigation is scalable. The first, second, and third leve
 #components-layout-demo-side .site-layout .site-layout-background {
   background: #fff;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-layout .site-layout-background {
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index 0ea4993b05..16d263f66d 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -6,7 +6,7 @@
 
 Both the top navigation and the sidebar, commonly used in application site.
 
-```css
+<style>
 #components-layout-demo-top-side-2 .logo {
   float: left;
   width: 120px;
@@ -23,4 +23,4 @@ Both the top navigation and the sidebar, commonly used in application site.
 #components-layout-demo-top-side-2 .site-layout-background {
   background: #fff;
 }
-```
+</style>
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 348bbf4603..344667ed23 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -6,7 +6,7 @@
 
 Both the top navigation and the sidebar, commonly used in documentation site.
 
-```css
+<style>
 #components-layout-demo-top-side .logo {
   float: left;
   width: 120px;
@@ -23,4 +23,4 @@ Both the top navigation and the sidebar, commonly used in documentation site.
 #components-layout-demo-top-side .site-layout-background {
   background: #fff;
 }
-```
+</style>
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index 8daa32345f..d18f006590 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -12,7 +12,7 @@ Generally, the mainnav is placed at the top of the page, and includes the logo,
 
 Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.
 
-```css
+<style>
 .site-layout-content {
   min-height: 280px;
   padding: 24px;
@@ -29,7 +29,7 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
   float: right;
   margin: 16px 0 16px 24px;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-layout-content {
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index a944b32007..354f3f7e1b 100644
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@@ -6,8 +6,8 @@
 
 Load more list with `loadMore` property.
 
-```css
+<style>
 .demo-loadmore-list {
   min-height: 350px;
 }
-```
+</style>
diff --git a/components/result/demo/error.md b/components/result/demo/error.md
index 6b31ff9776..52adf4bdbb 100644
--- a/components/result/demo/error.md
+++ b/components/result/demo/error.md
@@ -6,11 +6,11 @@
 
 Complex error feedback.
 
-```css
+<style>
 .site-result-demo-error-icon {
   color: red;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-result-demo-error-icon {
diff --git a/components/segmented/demo/basic.md b/components/segmented/demo/basic.md
index b617aa1f8f..f5df7ce8d7 100644
--- a/components/segmented/demo/basic.md
+++ b/components/segmented/demo/basic.md
@@ -6,7 +6,7 @@
 
 The most basic usage.
 
-```css
+<style>
 .code-box-demo {
   overflow-x: auto;
 }
@@ -14,4 +14,4 @@ The most basic usage.
 .code-box-demo .ant-segmented {
   margin-bottom: 10px;
 }
-```
+</style>
diff --git a/components/select/demo/option-label-prop.md b/components/select/demo/option-label-prop.md
index 61c9439676..44e4a1113a 100644
--- a/components/select/demo/option-label-prop.md
+++ b/components/select/demo/option-label-prop.md
@@ -6,8 +6,8 @@
 
 Specify the prop name of Option which will be rendered in select box.
 
-```css
+<style>
 .demo-option-label-item > span {
   margin-right: 6px;
 }
-```
+</style>
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index d96c461e1d..f5dc10df3c 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -6,7 +6,7 @@
 
 The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
 
-```css
+<style>
 .code-box-demo .ant-select {
   margin: 0 8px 10px 0;
 }
@@ -18,4 +18,4 @@ The height of the input field for the select defaults to 32px. If size is set to
 #components-select-demo-search-box .code-box-demo .ant-select {
   margin: 0;
 }
-```
+</style>
diff --git a/components/select/demo/status.md b/components/select/demo/status.md
index 9a44557590..2c00eb61e5 100644
--- a/components/select/demo/status.md
+++ b/components/select/demo/status.md
@@ -6,8 +6,8 @@
 
 Add status to Select with `status`, which could be `error` or `warning`.
 
-```css
+<style>
 #components-select-demo-status .ant-select {
   margin: 0;
 }
-```
+</style>
diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
index 3ebb9b6b47..79122013e5 100644
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@@ -6,7 +6,7 @@
 
 You can add an icon beside the slider to make it meaningful.
 
-```css
+<style>
 .icon-wrapper {
   position: relative;
   padding: 0px 30px;
@@ -33,7 +33,7 @@ You can add an icon beside the slider to make it meaningful.
 .icon-wrapper .anticon:last-child {
   right: 0;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .icon-wrapper .anticon {
diff --git a/components/space/demo/align.md b/components/space/demo/align.md
index 5e2a79737f..6e2eaae167 100644
--- a/components/space/demo/align.md
+++ b/components/space/demo/align.md
@@ -6,7 +6,7 @@
 
 Config item align.
 
-```css
+<style>
 .space-align-container {
   display: flex;
   flex-wrap: wrap;
@@ -23,4 +23,4 @@ Config item align.
   padding: 32px 8px 16px;
   background: rgba(150, 150, 150, 0.2);
 }
-```
+</style>
diff --git a/components/space/demo/compact-debug.md b/components/space/demo/compact-debug.md
index 4d52972353..999d346756 100644
--- a/components/space/demo/compact-debug.md
+++ b/components/space/demo/compact-debug.md
@@ -6,7 +6,7 @@
 
 Input addon debug.
 
-```css
+<style>
 .select-before {
   width: 90px;
 }
@@ -22,4 +22,4 @@ Input addon debug.
 [data-theme='compact'] .select-after {
   width: 65px;
 }
-```
+</style>
diff --git a/components/space/demo/compact-nested.md b/components/space/demo/compact-nested.md
index 0a37589f40..f05f269b61 100644
--- a/components/space/demo/compact-nested.md
+++ b/components/space/demo/compact-nested.md
@@ -6,7 +6,7 @@
 
 Nested `Space.Compact`
 
-```css
+<style>
 [data-theme='compact'] .select-before {
   width: 71px;
 }
@@ -14,4 +14,4 @@ Nested `Space.Compact`
 [data-theme='compact'] .select-after {
   width: 65px;
 }
-```
+</style>
diff --git a/components/space/demo/compact.md b/components/space/demo/compact.md
index f3545c8003..4a9502bf35 100644
--- a/components/space/demo/compact.md
+++ b/components/space/demo/compact.md
@@ -6,7 +6,7 @@
 
 Compact Mode for form component.
 
-```css
+<style>
 .site-space-compact-wrapper .site-input-split {
   background-color: #fff;
 }
@@ -28,4 +28,4 @@ Compact Mode for form component.
 .site-space-compact-wrapper .site-input-right.ant-input-rtl:focus {
   border-right-width: 1px;
 }
-```
+</style>
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
index 8ca6eac0d7..da83248ea0 100644
--- a/components/spin/demo/inside.md
+++ b/components/spin/demo/inside.md
@@ -6,7 +6,7 @@
 
 Spin in a container.
 
-```css
+<style>
 .example {
   margin: 20px 0;
   margin-bottom: 20px;
@@ -15,7 +15,7 @@ Spin in a container.
   background: rgba(0, 0, 0, 0.05);
   border-radius: 4px;
 }
-```
+</style>
 
 <style>
   .example {
diff --git a/components/statistic/demo/card.md b/components/statistic/demo/card.md
index 2079970f5d..18719f03bb 100644
--- a/components/statistic/demo/card.md
+++ b/components/statistic/demo/card.md
@@ -6,12 +6,12 @@
 
 Display statistic data in Card.
 
-```css
+<style>
 .site-statistic-demo-card {
   padding: 30px;
   background: #ececec;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-statistic-demo-card {
diff --git a/components/steps/demo/nav.md b/components/steps/demo/nav.md
index 113072dd6f..8e2a1c18a0 100644
--- a/components/steps/demo/nav.md
+++ b/components/steps/demo/nav.md
@@ -6,13 +6,13 @@
 
 Navigation steps.
 
-```css
+<style>
 [data-theme='compact'] .site-navigation-steps.ant-steps.ant-steps-navigation,
 .site-navigation-steps.ant-steps.ant-steps-navigation {
   margin-bottom: 60px;
   box-shadow: 0px -1px 0 0 #e8e8e8 inset;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-navigation-steps.ant-steps.ant-steps-navigation {
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index 35a2859f2a..033d8e607a 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -6,7 +6,7 @@
 
 Cooperate with the content and buttons, to represent the progress of a process.
 
-```css
+<style>
 .steps-content {
   min-height: 200px;
   margin-top: 16px;
@@ -20,7 +20,7 @@ Cooperate with the content and buttons, to represent the progress of a process.
 .steps-action {
   margin-top: 24px;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .steps-content {
diff --git a/components/switch/demo/text.tsx b/components/switch/demo/text.tsx
index 3314f10100..6af99605b4 100644
--- a/components/switch/demo/text.tsx
+++ b/components/switch/demo/text.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { Switch } from 'antd';
+import { Switch, Space } from 'antd';
 
 const App: React.FC = () => (
-  <>
+  <Space direction="vertical">
     <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
-    <br />
     <Switch checkedChildren="1" unCheckedChildren="0" />
-    <br />
     <Switch
       checkedChildren={<CheckOutlined />}
       unCheckedChildren={<CloseOutlined />}
       defaultChecked
     />
-  </>
+  </Space>
 );
 
 export default App;
diff --git a/components/table/demo/drag-sorting.md b/components/table/demo/drag-sorting.md
index 1f761cfd6a..4e399b8b50 100644
--- a/components/table/demo/drag-sorting.md
+++ b/components/table/demo/drag-sorting.md
@@ -6,7 +6,7 @@
 
 By using `components`, we can integrate table with [react-dnd](https://github.com/react-dnd/react-dnd) to implement drag sorting function.
 
-```css
+<style>
 #components-table-demo-drag-sorting tr.drop-over-downward td {
   border-bottom: 2px dashed #1890ff;
 }
@@ -14,4 +14,4 @@ By using `components`, we can integrate table with [react-dnd](https://github.co
 #components-table-demo-drag-sorting tr.drop-over-upward td {
   border-top: 2px dashed #1890ff;
 }
-```
+</style>
diff --git a/components/table/demo/edit-cell.md b/components/table/demo/edit-cell.md
index 38168770e9..21db4b01ea 100644
--- a/components/table/demo/edit-cell.md
+++ b/components/table/demo/edit-cell.md
@@ -6,7 +6,7 @@
 
 Table with editable cells. When work with `shouldCellUpdate`, please take care of [closure](https://github.com/ant-design/ant-design/issues/29243).
 
-```css
+<style>
 .editable-cell {
   position: relative;
 }
@@ -25,4 +25,4 @@ Table with editable cells. When work with `shouldCellUpdate`, please take care o
 [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
   border: 1px solid #434343;
 }
-```
+</style>
diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md
index 853950614a..e1c3ce37fe 100644
--- a/components/table/demo/edit-row.md
+++ b/components/table/demo/edit-row.md
@@ -8,10 +8,10 @@
 
 Table with editable rows.
 
-```css
+<style>
 .editable-row .ant-form-item-explain {
   position: absolute;
   top: 100%;
   font-size: 12px;
 }
-```
+</style>
diff --git a/components/table/demo/resizable-column.md b/components/table/demo/resizable-column.md
index f93c40a332..1d63abc92f 100644
--- a/components/table/demo/resizable-column.md
+++ b/components/table/demo/resizable-column.md
@@ -6,7 +6,7 @@
 
 Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable). When sort needed, you can use [additional mark](https://codesandbox.io/s/zrj8xvyzxx) to prevent resize trigger sort.
 
-```css
+<style>
 #components-table-demo-resizable-column .react-resizable {
   position: relative;
   background-clip: padding-box;
@@ -21,4 +21,4 @@ Implement resizable column by integrate with [react-resizable](https://github.co
   height: 100%;
   cursor: col-resize;
 }
-```
+</style>
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index 8d7015bdc6..5fb65aa47d 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -6,7 +6,7 @@
 
 Should be used at the top of container, needs to override styles.
 
-```css
+<style>
 .card-container p {
   margin: 0;
 }
@@ -54,4 +54,4 @@ Should be used at the top of container, needs to override styles.
   background: #141414;
   border-color: #141414;
 }
-```
+</style>
diff --git a/components/tabs/demo/custom-tab-bar-node.md b/components/tabs/demo/custom-tab-bar-node.md
index 626bd30790..a05918eddb 100644
--- a/components/tabs/demo/custom-tab-bar-node.md
+++ b/components/tabs/demo/custom-tab-bar-node.md
@@ -6,9 +6,9 @@
 
 Use `react-dnd@15+` to make tabs draggable.
 
-```css
+<style>
 .dropping {
   background: #fefefe;
   transition: all 0.3s;
 }
-```
+</style>
diff --git a/components/tabs/demo/custom-tab-bar.md b/components/tabs/demo/custom-tab-bar.md
index 8fdf248b16..77a9e18836 100644
--- a/components/tabs/demo/custom-tab-bar.md
+++ b/components/tabs/demo/custom-tab-bar.md
@@ -6,12 +6,12 @@
 
 Use react-sticky.
 
-```css
+<style>
 .site-custom-tab-bar {
   z-index: 1;
   background: #fff;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-custom-tab-bar {
diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
index a96be579b0..60f7035ca7 100644
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@@ -6,7 +6,7 @@
 
 You can add extra actions to the right or left or even both side of Tabs.
 
-```css
+<style>
 .tabs-extra-demo-button {
   margin-right: 16px;
 }
@@ -15,4 +15,4 @@ You can add extra actions to the right or left or even both side of Tabs.
   margin-right: 0;
   margin-left: 16px;
 }
-```
+</style>
diff --git a/components/tag/demo/animation.md b/components/tag/demo/animation.md
index c5182a9a38..2c449de2c3 100644
--- a/components/tag/demo/animation.md
+++ b/components/tag/demo/animation.md
@@ -6,12 +6,13 @@
 
 Animating the Tag by using [rc-tween-one](https://github.com/react-component/tween-one).
 
-```css
+<style>
+
 .site-tag-plus {
   background: #fff;
   border-style: dashed;
 }
-```
+</style>
 
 <style>
   [data-theme="dark"] .site-tag-plus {
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
index a71c5701c4..7e72606783 100644
--- a/components/tag/demo/control.md
+++ b/components/tag/demo/control.md
@@ -6,24 +6,21 @@
 
 Generating a set of Tags by array, you can add and remove dynamically.
 
-```css
-.site-tag-plus {
-  background: #fff;
-  border-style: dashed;
-}
-.edit-tag {
-  user-select: none;
-}
-.tag-input {
-  width: 78px;
-  margin-right: 8px;
-  vertical-align: top;
-}
-```
-
 <style>
   [data-theme="dark"] .site-tag-plus {
     background: transparent;
     border-style: dashed;
   }
+  .site-tag-plus {
+    background: #fff;
+    border-style: dashed;
+  }
+  .edit-tag {
+    user-select: none;
+  }
+  .tag-input {
+    width: 78px;
+    margin-right: 8px;
+    vertical-align: top;
+  }
 </style>
diff --git a/components/time-picker/demo/colored-popup.md b/components/time-picker/demo/colored-popup.md
index 2813e48640..cf6bed62e8 100644
--- a/components/time-picker/demo/colored-popup.md
+++ b/components/time-picker/demo/colored-popup.md
@@ -6,8 +6,8 @@
 
 Passing custom class to `TimePicker` popup
 
-```css
+<style>
 .myCustomClassName .ant-picker-time-panel-cell-inner {
   color: red !important;
 }
-```
+</style>
diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md
index 51b574f15d..3ddd9a4417 100644
--- a/components/timeline/demo/custom.md
+++ b/components/timeline/demo/custom.md
@@ -6,7 +6,7 @@
 
 Set a node as an icon or other custom element.
 
-```css
+<style>
 .timeline-clock-icon {
   font-size: 16px;
 }
@@ -14,4 +14,4 @@ Set a node as an icon or other custom element.
 [data-theme='compact'] .timeline-clock-icon {
   font-size: 14px;
 }
-```
+</style>
diff --git a/components/tooltip/demo/colorful.md b/components/tooltip/demo/colorful.md
index e5dbe95141..17498cbab2 100644
--- a/components/tooltip/demo/colorful.md
+++ b/components/tooltip/demo/colorful.md
@@ -6,8 +6,8 @@
 
 We preset a series of colorful Tooltip styles for use in different situations.
 
-```css
+<style>
 .ant-tag {
   margin-bottom: 8px;
 }
-```
+</style>
diff --git a/components/transfer/demo/table-transfer.md b/components/transfer/demo/table-transfer.md
index ac4811c6b9..6335061a08 100644
--- a/components/transfer/demo/table-transfer.md
+++ b/components/transfer/demo/table-transfer.md
@@ -6,8 +6,8 @@
 
 Customize render list with Table component.
 
-```css
+<style>
 #components-transfer-demo-table-transfer .ant-table td {
   background: transparent;
 }
-```
+</style>
diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md
index cce6453a00..efba525052 100644
--- a/components/tree/demo/search.md
+++ b/components/tree/demo/search.md
@@ -6,11 +6,11 @@
 
 Searchable Tree.
 
-```css
+<style>
 .site-tree-search-value {
   color: #f50;
 }
-```
+</style>
 
 <style>
 [data-theme="dark"] .site-tree-search-value {
diff --git a/components/upload/demo/drag-sorting.md b/components/upload/demo/drag-sorting.md
index 2ae6dbfc04..e71434e22c 100644
--- a/components/upload/demo/drag-sorting.md
+++ b/components/upload/demo/drag-sorting.md
@@ -6,7 +6,7 @@
 
 By using `itemRender`, we can integrate upload with react-dnd to implement drag sorting of uploadList.
 
-```css
+<style>
 #components-upload-demo-drag-sorting .ant-upload-draggable-list-item {
   border-top: 2px dashed rgba(0, 0, 0, 0);
   border-bottom: 2px dashed rgba(0, 0, 0, 0);
@@ -17,4 +17,4 @@ By using `itemRender`, we can integrate upload with react-dnd to implement drag
 #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-upward {
   border-top-color: #1890ff;
 }
-```
+</style>
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index c983c35fe2..135ef89b41 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -6,7 +6,7 @@
 
 If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
 
-```css
+<style>
 /* tile uploaded pictures */
 .upload-list-inline .ant-upload-list-item {
   float: left;
@@ -17,4 +17,4 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
 .ant-upload-rtl.upload-list-inline .ant-upload-list-item {
   float: right;
 }
-```
+</style>
diff --git a/docs/spec/font.en-US.md b/docs/spec/font.en-US.md
index 015728c541..419a7dffcb 100644
--- a/docs/spec/font.en-US.md
+++ b/docs/spec/font.en-US.md
@@ -89,5 +89,5 @@ Text will be difficult to read if it is too close to the background color. To ac
 The construction of the font system is the first step to achieve "the beauty of dynamic order". In practical design, we have three more advanced tips：
 
 1. **Establish a systematic design thinking:** In the UI design of the same system, a systematic design thinking should be established first. The primary, secondary, auxiliary, title, display, and other types of fonts are planned in a unified manner. And then make any necessary fine tuning according to the specific situation. The establishment of a systematic design approach helps to increase the consistency of horizontal font landing, improve the cost-effectiveness of font uses, and avoid unnecessary style waste.
-1. **Less is more：**Visual design should be achieved with as few styles as possible. Avoid meaningless use of large numbers of font scales, colors, and font weight to emphasize visual or contrast relationships.
-1. **Try to make font scale dance like a note** When you need to expand any gap, you can try to choose the different sizes of the font from the font scale table, which will create a subtle rhythm between the word scales.
+2. **Less is more：** Visual design should be achieved with as few styles as possible. Avoid meaningless use of large numbers of font scales, colors, and font weight to emphasize visual or contrast relationships.
+3. **Try to make font scale dance like a note** When you need to expand any gap, you can try to choose the different sizes of the font from the font scale table, which will create a subtle rhythm between the word scales.
diff --git a/docs/spec/font.zh-CN.md b/docs/spec/font.zh-CN.md
index c331e6ea31..4e1098a7dc 100644
--- a/docs/spec/font.zh-CN.md
+++ b/docs/spec/font.zh-CN.md
@@ -86,6 +86,6 @@ Ant Design 受到 5 音阶以及自然律的启发定义了 10 个不同尺寸
 
 字体系统的构建，是「动态秩序之美」的第一步。在实际的设计中，我们还有三点建议：
 
-1. **建立体系化的设计思路：**在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
-1. **少即是多：**在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。
-1. **尝试让字体像音符一样跳跃：**在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体大小，会令字阶之间产生一种微妙的韵律感。
+1. **建立体系化的设计思路：** 在同一个系统的 UI 设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
+2. **少即是多：** 在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。
+3. **尝试让字体像音符一样跳跃：** 在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体大小，会令字阶之间产生一种微妙的韵律感。