From 200b88246f70b52af9a7e2019db73de723b5acbb Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Mon, 13 Feb 2017 10:55:53 +0800
Subject: [PATCH] docs: update docs format

---
 components/affix/demo/basic.md                |  2 +-
 components/affix/demo/on-change.md            |  2 +-
 components/affix/demo/target.md               |  2 +-
 components/alert/demo/banner.md               |  2 +-
 components/alert/demo/basic.md                |  2 +-
 components/alert/demo/closable.md             |  2 +-
 components/alert/demo/close-text.md           |  2 +-
 components/alert/demo/description.md          |  2 +-
 components/alert/demo/icon.md                 |  2 +-
 components/alert/demo/style.md                |  2 +-
 components/anchor/demo/basic.md               |  2 +-
 components/anchor/demo/fixed.md               |  2 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 60 +++++++++++++++++++
 components/auto-complete/demo/antd.md         |  4 +-
 components/auto-complete/demo/basic.md        |  2 +-
 components/auto-complete/demo/options.md      |  2 +-
 .../auto-complete/demo/uncertain-category.md  | 38 ++++++++----
 components/back-top/demo/basic.md             |  2 +-
 components/back-top/demo/custom.md            |  2 +-
 components/badge/demo/basic.md                |  2 +-
 components/badge/demo/change.md               |  2 +-
 components/badge/demo/dot.md                  |  2 +-
 components/badge/demo/link.md                 |  2 +-
 components/badge/demo/no-wrapper.md           |  2 +-
 components/badge/demo/overflow.md             |  2 +-
 components/badge/demo/status.md               |  2 +-
 components/breadcrumb/demo/basic.md           |  2 +-
 components/breadcrumb/demo/router.md          |  2 +-
 components/breadcrumb/demo/separator.md       |  2 +-
 components/breadcrumb/demo/withIcon.md        |  2 +-
 components/button/demo/basic.md               |  2 +-
 components/button/demo/button-group.md        |  2 +-
 components/button/demo/disabled.md            |  2 +-
 components/button/demo/ghost.md               |  2 +-
 components/button/demo/icon.md                |  2 +-
 components/button/demo/loading.md             |  2 +-
 components/button/demo/multiple.md            |  2 +-
 components/button/demo/size.md                |  2 +-
 components/calendar/demo/basic.md             |  2 +-
 components/calendar/demo/card.md              |  2 +-
 components/calendar/demo/locale.md            |  2 +-
 components/calendar/demo/notice-calendar.md   |  2 +-
 components/card/demo/basic.md                 |  2 +-
 components/card/demo/border-less.md           |  2 +-
 components/card/demo/grid.md                  |  2 +-
 components/card/demo/loading.md               |  2 +-
 components/card/demo/no-padding.md            |  2 +-
 components/card/demo/simple.md                |  2 +-
 components/carousel/demo/autoplay.md          |  2 +-
 components/carousel/demo/basic.md             |  2 +-
 components/carousel/demo/fade.md              |  2 +-
 components/carousel/demo/vertical.md          |  2 +-
 components/cascader/demo/basic.md             |  2 +-
 components/cascader/demo/change-on-select.md  |  2 +-
 components/cascader/demo/custom-render.md     |  2 +-
 components/cascader/demo/custom-trigger.md    |  2 +-
 components/cascader/demo/default-value.md     |  2 +-
 components/cascader/demo/disabled-option.md   |  2 +-
 components/cascader/demo/hover.md             |  2 +-
 components/cascader/demo/lazy.md              |  2 +-
 components/cascader/demo/search.md            |  2 +-
 components/cascader/demo/size.md              |  2 +-
 components/checkbox/demo/basic.md             |  2 +-
 components/checkbox/demo/check-all.md         |  2 +-
 components/checkbox/demo/controller.md        |  2 +-
 components/checkbox/demo/disabled.md          |  2 +-
 components/checkbox/demo/group.md             |  2 +-
 components/collapse/demo/accordion.md         |  2 +-
 components/collapse/demo/basic.md             |  2 +-
 components/collapse/demo/borderless.md        |  2 +-
 components/collapse/demo/custom.md            |  2 +-
 components/collapse/demo/mix.md               |  2 +-
 components/date-picker/demo/basic.md          |  2 +-
 components/date-picker/demo/disabled-date.md  |  2 +-
 components/date-picker/demo/disabled.md       |  2 +-
 components/date-picker/demo/format.md         |  2 +-
 components/date-picker/demo/locale.md         |  2 +-
 .../date-picker/demo/presetted-ranges.md      |  2 +-
 components/date-picker/demo/size.md           |  2 +-
 components/date-picker/demo/start-end.md      |  2 +-
 components/date-picker/demo/time.md           |  2 +-
 components/dropdown/demo/basic.md             |  2 +-
 components/dropdown/demo/dropdown-button.md   |  2 +-
 components/dropdown/demo/event.md             |  2 +-
 components/dropdown/demo/item.md              |  2 +-
 components/dropdown/demo/overlay-visible.md   |  2 +-
 components/dropdown/demo/placement.md         |  2 +-
 components/dropdown/demo/sub-menu.md          |  2 +-
 components/dropdown/demo/trigger.md           |  2 +-
 components/form/demo/advanced-search.md       |  2 +-
 components/form/demo/coordinated.md           |  2 +-
 .../form/demo/customized-form-controls.md     |  2 +-
 components/form/demo/dynamic-form-item.md     |  2 +-
 components/form/demo/form-in-modal.md         |  2 +-
 components/form/demo/global-state.md          |  2 +-
 components/form/demo/horizontal-login.md      |  2 +-
 components/form/demo/layout.md                |  2 +-
 components/form/demo/normal-login.md          |  2 +-
 components/form/demo/register.md              |  2 +-
 components/form/demo/time-related-controls.md |  2 +-
 components/form/demo/validate-other.md        |  2 +-
 components/form/demo/validate-static.md       |  2 +-
 components/form/demo/without-form-create.md   |  2 +-
 components/grid/demo/basic.md                 |  2 +-
 components/grid/demo/flex-align.md            |  2 +-
 components/grid/demo/flex-order.md            |  2 +-
 components/grid/demo/flex.md                  |  2 +-
 components/grid/demo/gutter.md                |  2 +-
 components/grid/demo/offset.md                |  2 +-
 components/grid/demo/playground.md            |  2 +-
 components/grid/demo/reponsive-more.md        |  2 +-
 components/grid/demo/reponsive.md             |  2 +-
 components/grid/demo/sort.md                  |  2 +-
 components/input-number/demo/basic.md         |  2 +-
 components/input-number/demo/digit.md         |  2 +-
 components/input-number/demo/disabled.md      |  2 +-
 components/input-number/demo/size.md          |  2 +-
 components/input/demo/addon.md                |  2 +-
 components/input/demo/autosize-textarea.md    |  2 +-
 components/input/demo/basic.md                |  2 +-
 components/input/demo/group.md                |  2 +-
 components/input/demo/presuffix.md            |  2 +-
 components/input/demo/search-input.md         |  2 +-
 components/input/demo/size.md                 |  2 +-
 components/input/demo/textarea.md             |  2 +-
 components/input/demo/tooltip.md              |  2 +-
 components/layout/demo/basic.md               |  2 +-
 components/layout/demo/custom-trigger.md      |  2 +-
 components/layout/demo/side.md                |  2 +-
 components/layout/demo/top-side.md            |  2 +-
 components/layout/demo/top.md                 |  2 +-
 components/locale-provider/demo/all.md        |  2 +-
 components/locale-provider/demo/basic.md      |  2 +-
 components/mention/demo/async.md              |  2 +-
 components/mention/demo/avatar.md             |  2 +-
 components/mention/demo/basic.md              |  2 +-
 components/mention/demo/controllder-simple.md |  2 +-
 components/mention/demo/controlled.md         |  2 +-
 components/mention/demo/custom-tag.md         |  2 +-
 components/mention/demo/multilines.md         |  2 +-
 components/mention/demo/popupContainer.md     |  2 +-
 components/menu/demo/horizontal.md            |  2 +-
 components/menu/demo/sider-current.md         |  2 +-
 components/menu/demo/sider.md                 |  2 +-
 components/menu/demo/switch-mode.md           |  2 +-
 components/menu/demo/theme.md                 |  2 +-
 components/menu/demo/vertical.md              |  2 +-
 components/message/demo/duration.md           |  2 +-
 components/message/demo/info.md               |  2 +-
 components/message/demo/loading.md            |  2 +-
 components/message/demo/other.md              |  2 +-
 components/modal/demo/async.md                |  2 +-
 components/modal/demo/basic.md                |  2 +-
 components/modal/demo/confirm-promise.md      |  2 +-
 components/modal/demo/confirm.md              |  2 +-
 components/modal/demo/footer.md               |  2 +-
 components/modal/demo/info.md                 |  2 +-
 components/modal/demo/locale.md               |  2 +-
 components/modal/demo/manual.md               |  2 +-
 components/modal/demo/position.md             |  2 +-
 components/notification/demo/basic.md         |  2 +-
 components/notification/demo/custom-icon.md   |  2 +-
 components/notification/demo/duration.md      |  2 +-
 components/notification/demo/placement.md     |  6 +-
 components/notification/demo/with-btn.md      |  2 +-
 components/notification/demo/with-icon.md     |  2 +-
 components/pagination/demo/basic.md           |  2 +-
 components/pagination/demo/changer.md         |  2 +-
 components/pagination/demo/controlled.md      |  2 +-
 components/pagination/demo/jump.md            |  2 +-
 components/pagination/demo/mini.md            |  2 +-
 components/pagination/demo/more.md            |  2 +-
 components/pagination/demo/simple.md          |  2 +-
 components/pagination/demo/total.md           |  2 +-
 components/popconfirm/demo/basic.md           |  2 +-
 components/popconfirm/demo/dynamic-trigger.md |  2 +-
 components/popconfirm/demo/locale.md          |  2 +-
 components/popconfirm/demo/placement.md       |  2 +-
 .../popover/demo/arrow-point-at-center.md     |  2 +-
 components/popover/demo/basic.md              |  2 +-
 components/popover/demo/control.md            |  2 +-
 components/popover/demo/placement.md          |  2 +-
 components/popover/demo/triggerType.md        |  2 +-
 components/progress/demo/circle-dynamic.md    |  2 +-
 components/progress/demo/circle-mini.md       |  2 +-
 components/progress/demo/circle.md            |  2 +-
 components/progress/demo/dynamic.md           |  2 +-
 components/progress/demo/format.md            |  2 +-
 components/progress/demo/line-mini.md         |  2 +-
 components/progress/demo/line.md              |  2 +-
 components/radio/demo/basic.md                |  2 +-
 components/radio/demo/disable.md              |  2 +-
 components/radio/demo/radiobutton.md          |  2 +-
 components/radio/demo/radiogroup-more.md      |  2 +-
 components/radio/demo/radiogroup.md           |  2 +-
 components/radio/demo/size.md                 |  2 +-
 components/rate/demo/basic.md                 |  2 +-
 components/rate/demo/disabled.md              |  2 +-
 components/rate/demo/half.md                  |  2 +-
 components/rate/demo/text.md                  |  2 +-
 .../select/demo/automatic-tokenization.md     |  2 +-
 components/select/demo/basic.md               |  2 +-
 components/select/demo/combobox.md            |  2 +-
 components/select/demo/coordinate.md          |  2 +-
 components/select/demo/label-in-value.md      |  2 +-
 components/select/demo/multiple.md            |  2 +-
 components/select/demo/optgroup.md            |  2 +-
 components/select/demo/search-box.md          |  2 +-
 components/select/demo/search.md              |  2 +-
 components/select/demo/size.md                |  2 +-
 components/select/demo/tags.md                |  2 +-
 components/slider/demo/basic.md               |  2 +-
 components/slider/demo/event.md               |  2 +-
 components/slider/demo/icon-slider.md         |  2 +-
 components/slider/demo/input-number.md        |  2 +-
 components/slider/demo/mark.md                |  2 +-
 components/slider/demo/tip-formatter.md       |  2 +-
 components/slider/demo/vertical.md            |  2 +-
 components/spin/demo/basic.md                 |  2 +-
 components/spin/demo/delayAndDebounce.md      |  2 +-
 components/spin/demo/inside.md                |  2 +-
 components/spin/demo/nested.md                |  2 +-
 components/spin/demo/size.md                  |  2 +-
 components/spin/demo/tip.md                   |  2 +-
 .../steps/demo/customized-progress-dot.md     |  2 +-
 components/steps/demo/error.md                |  2 +-
 components/steps/demo/icon.md                 |  2 +-
 components/steps/demo/progress-dot.md         |  2 +-
 components/steps/demo/simple.md               |  2 +-
 components/steps/demo/small-size.md           |  2 +-
 components/steps/demo/step-next.md            |  2 +-
 components/steps/demo/vertical-small.md       |  2 +-
 components/steps/demo/vertical.md             |  2 +-
 components/switch/demo/basic.md               |  2 +-
 components/switch/demo/disabled.md            |  2 +-
 components/switch/demo/size.md                |  2 +-
 components/switch/demo/text.md                |  2 +-
 components/table/demo/ajax.md                 |  2 +-
 components/table/demo/basic.md                |  2 +-
 components/table/demo/bordered.md             |  2 +-
 components/table/demo/colspan-rowspan.md      |  2 +-
 components/table/demo/custom-filter-panel.md  |  2 +-
 components/table/demo/dynamic-settings.md     |  2 +-
 components/table/demo/edit-cell.md            |  2 +-
 components/table/demo/edit-row.md             |  2 +-
 components/table/demo/expand-children.md      |  2 +-
 components/table/demo/expand.md               |  2 +-
 components/table/demo/fixed-columns-header.md |  2 +-
 components/table/demo/fixed-columns.md        |  2 +-
 components/table/demo/fixed-header.md         |  2 +-
 components/table/demo/grouping-columns.md     |  2 +-
 components/table/demo/head.md                 |  2 +-
 components/table/demo/jsx.md                  |  2 +-
 components/table/demo/paging.md               |  2 +-
 components/table/demo/reset-filter.md         |  2 +-
 .../table/demo/row-selection-and-operation.md |  2 +-
 components/table/demo/row-selection.md        |  2 +-
 components/table/demo/size.md                 |  2 +-
 components/tabs/demo/basic.md                 |  2 +-
 components/tabs/demo/card-top.md              |  2 +-
 components/tabs/demo/card.md                  |  2 +-
 components/tabs/demo/custom-add-trigger.md    |  2 +-
 components/tabs/demo/disabled.md              |  2 +-
 components/tabs/demo/editable-card.md         |  2 +-
 components/tabs/demo/extra.md                 |  2 +-
 components/tabs/demo/icon.md                  |  2 +-
 components/tabs/demo/position.md              |  2 +-
 components/tabs/demo/size.md                  |  2 +-
 components/tabs/demo/slide.md                 |  2 +-
 components/tag/demo/basic.md                  |  2 +-
 components/tag/demo/checkable.md              |  2 +-
 components/tag/demo/colorful.md               |  2 +-
 components/tag/demo/control.md                |  2 +-
 components/tag/demo/hot-tags.md               |  2 +-
 components/time-picker/demo/addon.md          |  2 +-
 components/time-picker/demo/basic.md          |  2 +-
 .../time-picker/demo/disable-options.md       |  2 +-
 components/time-picker/demo/disabled.md       |  2 +-
 components/time-picker/demo/hide-column.md    |  2 +-
 components/time-picker/demo/size.md           |  2 +-
 components/time-picker/demo/value.md          |  2 +-
 components/timeline/demo/basic.md             |  2 +-
 components/timeline/demo/color.md             |  2 +-
 components/timeline/demo/custom.md            |  2 +-
 components/timeline/demo/pending.md           |  2 +-
 .../tooltip/demo/arrow-point-at-center.md     |  2 +-
 components/tooltip/demo/basic.md              |  2 +-
 components/tooltip/demo/placement.md          |  2 +-
 components/transfer/demo/advanced.md          |  2 +-
 components/transfer/demo/basic.md             |  2 +-
 components/transfer/demo/custom-item.md       |  2 +-
 components/transfer/demo/large-data.md        |  2 +-
 components/transfer/demo/search.md            |  2 +-
 components/tree-select/demo/basic.md          |  2 +-
 components/tree-select/demo/checkable.md      |  2 +-
 components/tree-select/demo/treeData.md       |  2 +-
 components/tree/demo/basic-controlled.md      |  2 +-
 components/tree/demo/basic.md                 |  2 +-
 components/tree/demo/draggable.md             |  2 +-
 components/tree/demo/dynamic.md               |  2 +-
 components/tree/demo/search.md                |  2 +-
 components/upload/demo/avatar.md              |  2 +-
 components/upload/demo/basic.md               |  2 +-
 components/upload/demo/defaultFileList.md     |  2 +-
 components/upload/demo/drag.md                |  2 +-
 components/upload/demo/fileList.md            |  2 +-
 components/upload/demo/picture-card.md        |  2 +-
 components/upload/demo/picture-style.md       |  2 +-
 docs/spec/layout/demo/aside-collapse.md       |  2 +-
 docs/spec/layout/demo/aside.md                |  2 +-
 docs/spec/layout/demo/ceiling.md              |  2 +-
 docs/spec/layout/demo/top-aside.md            |  2 +-
 docs/spec/layout/demo/top.md                  |  2 +-
 package.json                                  |  2 +-
 314 files changed, 400 insertions(+), 328 deletions(-)

diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
index d98989690..59c860556 100644
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The simplest usage.
 
-````__react
+````jsx
 import { Affix, Button } from 'antd';
 
 ReactDOM.render(
diff --git a/components/affix/demo/on-change.md b/components/affix/demo/on-change.md
index a0d1cdf65..9d9a89c9d 100644
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -13,7 +13,7 @@ title:
 
 Callback with affixed state.
 
-````__react
+````jsx
 import { Affix, Button } from 'antd';
 
 ReactDOM.render(
diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md
index 97dbc7f00..d78ab9100 100644
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@@ -13,7 +13,7 @@ title:
 
 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
 
-````__react
+````jsx
 import { Affix, Button } from 'antd';
 
 class Demo extends React.Component {
diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
index 9bb7ce489..35d3e7f20 100644
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -13,7 +13,7 @@ title:
 
 When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(
diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
index 2171fdfbe..02b0e57b5 100644
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The simplest usage for short messages.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
index f7fd39589..d1f35acb7 100644
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -13,7 +13,7 @@ title:
 
 To show close button.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 const onClose = function (e) {
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
index fab118e15..4959b2034 100644
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@@ -13,7 +13,7 @@ title:
 
 Replace the default icon with customized text.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
index acad94bc9..9d8c5fd18 100644
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -13,7 +13,7 @@ title:
 
 Additional description for alert message.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(<div>
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
index f0c672e4f..8b94e9b3b 100644
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -13,7 +13,7 @@ title:
 
 Decent icon make information more clear and more friendly.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(<div>
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
index ac5966733..7fae3b28b 100644
--- 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`.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(<div>
diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md
index ad45e4efa..d193e0c81 100644
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The simplest usage.
 
-```__react
+```jsx
 import { Anchor } from 'antd';
 const { Link } = Anchor;
 
diff --git a/components/anchor/demo/fixed.md b/components/anchor/demo/fixed.md
index 5cfd758e1..2e0fdbb8f 100644
--- a/components/anchor/demo/fixed.md
+++ b/components/anchor/demo/fixed.md
@@ -13,7 +13,7 @@ title:
 
 Do not change state when page is scrolling.
 
-```__react
+```jsx
 import { Anchor } from 'antd';
 const { Link } = Anchor;
 
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index 987eaa721..90002d523 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -128,3 +128,63 @@ exports[`test renders ./components/auto-complete/demo/options.md correctly 1`] =
   </div>
 </div>
 `;
+
+exports[`test renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
+<div
+  class="global-search-wrapper"
+  style="width:300px;">
+  <div
+    class="ant-select-lg ant-select-lg global-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
+    style="width:100%;">
+    <div
+      aria-autocomplete="list"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-select-selection
+                ant-select-selection--single"
+      role="combobox">
+      <div
+        class="ant-select-selection__rendered">
+        <div
+          class="ant-select-selection__placeholder"
+          style="display:block;user-select:none;-webkit-user-select:none;"
+          unselectable="unselectable">
+          input here
+        </div>
+        <ul>
+          <li
+            class="ant-select-search ant-select-search--inline">
+            <div
+              class="ant-select-search__field__wrap">
+              <span
+                class="ant-input-preSuffix-wrapper">
+                <input
+                  class="ant-input ant-input ant-select-search__field"
+                  type="text"
+                  value="" />
+                <span
+                  class="ant-input-suffix">
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-lg search-btn"
+                    type="button">
+                    <i
+                      class="anticon anticon-search" />
+                  </button>
+                </span>
+              </span>
+              <span
+                class="ant-select-search__field__mirror" />
+            </div>
+          </li>
+        </ul>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none;"
+        unselectable="unselectable">
+        <b />
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/auto-complete/demo/antd.md b/components/auto-complete/demo/antd.md
index 3f677ce1c..2abfe9150 100644
--- a/components/auto-complete/demo/antd.md
+++ b/components/auto-complete/demo/antd.md
@@ -13,7 +13,7 @@ title:
 
 Customize Input Component
 
-````__react
+````jsx
 import { AutoComplete } from 'antd';
 
 function onSelect(value) {
@@ -48,7 +48,7 @@ const Complete = React.createClass({
         onChange={this.handleChange}
         placeholder="input here"
       >
-        <textarea onKeyPress={this.handleKeyPress} style={{ height: 50 }}/>
+        <textarea onKeyPress={this.handleKeyPress} style={{ height: 50 }} />
       </AutoComplete>
     );
   },
diff --git a/components/auto-complete/demo/basic.md b/components/auto-complete/demo/basic.md
index 6c22674f4..279822677 100644
--- 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.
 
-````__react
+````jsx
 import { AutoComplete } from 'antd';
 
 function onSelect(value) {
diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md
index 6151568bf..77e3c8b10 100644
--- 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`。
 
-````__react
+````jsx
 import { AutoComplete } from 'antd';
 
 const Option = AutoComplete.Option;
diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md
index 1fd99c66b..7fbb24633 100644
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -14,17 +14,16 @@ title:
 Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
 Basic Usage, set datasource of autocomplete with `dataSource` property.
 
-````__react
+````jsx
 import { Icon, Button, Input, AutoComplete } from 'antd';
 const Option = AutoComplete.Option;
-const InputGroup = Input.Group;
 
 function onSelect(value) {
   console.log('onSelect', value);
 }
 
 function getRandomInt(max, min = 0) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
+  return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
 }
 
 function searchResult(query) {
@@ -37,11 +36,20 @@ function searchResult(query) {
 }
 
 function renderOption(item) {
-  return <Option key={item.category} text={item.category}>
-    {item.query} 在
-    <a href={`https://s.taobao.com/search?q=${item.query}`} target="_blank">{item.category}</a> 区块中
-    <span style={{float: 'right'}}>约 {item.count} 个结果</span>
-  </Option>;
+  return (
+    <Option key={item.category} text={item.category}>
+      {item.query} 在
+      <a
+        href={`https://s.taobao.com/search?q=${item.query}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {item.category}
+      </a>
+      区块中
+      <span style={{ float: 'right' }}>约 {item.count} 个结果</span>
+    </Option>
+  );
 }
 
 const Complete = React.createClass({
@@ -64,16 +72,20 @@ const Complete = React.createClass({
         <AutoComplete
           className="global-search"
           size="large"
-          style={{ width: '100%'}}
+          style={{ width: '100%' }}
           dataSource={dataSource.map(renderOption)}
           onSelect={onSelect}
           onChange={this.handleChange}
           placeholder="input here"
           optionLabelProp="text"
         >
-          <Input suffix={<Button className="search-btn" size="large" type="primary">
-            <Icon type="search" />
-          </Button>} />
+          <Input
+            suffix={(
+              <Button className="search-btn" size="large" type="primary">
+                <Icon type="search" />
+              </Button>
+            )}
+          />
         </AutoComplete>
       </div>
     );
@@ -123,4 +135,4 @@ ReactDOM.render(<Complete />, mountNode);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-````
\ No newline at end of file
+````
diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md
index 3362288de..65d51cba2 100644
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The most basic usage.
 
-````__react
+````jsx
 import { BackTop } from 'antd';
 
 ReactDOM.render(
diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md
index ed9b8c0e2..5091d26cb 100644
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -14,7 +14,7 @@ title:
 You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
 
 
-````__react
+````jsx
 import { BackTop } from 'antd';
 
 ReactDOM.render(
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index 58062cb26..903647b5c 100644
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Simplest Usage.
 
-````__react
+````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index 65b32cd41..400bbb23b 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -13,7 +13,7 @@ title:
 
 The count will be animated as it changes.
 
-````__react
+````jsx
 import { Badge, Button, Icon, Switch } from 'antd';
 const ButtonGroup = Button.Group;
 
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index 1de72d6cf..124d8e899 100644
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -13,7 +13,7 @@ title:
 
 This will simply display a red badge, without a specific count.
 
-````__react
+````jsx
 import { Badge, Icon } from 'antd';
 
 ReactDOM.render(<div>
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index f4c928145..426b89061 100644
--- 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.
 
-````__react
+````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index ec986a69f..f40029fe9 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -15,7 +15,7 @@ title:
 
 Used in standalone when children is empty.
 
-````__react
+````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(<div>
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index 22313dd24..6cce42804 100644
--- 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`.
 
-````__react
+````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(<div>
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
index faa0aa315..29ccd868a 100644
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -13,7 +13,7 @@ title:
 
 Standalone badge with status.
 
-````__react
+````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(
diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md
index e39f90487..1d5f8bb08 100644
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The simplest use
 
-````__react
+````jsx
 import { Breadcrumb } from 'antd';
 
 ReactDOM.render(
diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md
index e0b3b9516..9ab146a9f 100644
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -14,7 +14,7 @@ title:
 
 Used together with `react-router@2+`.
 
-````__react
+````jsx
 import { Router, Route, Link, hashHistory } from 'react-router';
 import { Breadcrumb, Alert } from 'antd';
 
diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md
index eab8499c5..79b39ae20 100644
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@@ -13,7 +13,7 @@ title:
 
 The separator can be customized by setting the separator property: separator=">"
 
-````__react
+````jsx
 import { Breadcrumb } from 'antd';
 
 ReactDOM.render(
diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md
index 619502e1a..559f2195c 100644
--- 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.
 
-````__react
+````jsx
 import { Breadcrumb, Icon } from 'antd';
 
 ReactDOM.render(
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index d125fb23b..f6a74509c 100644
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -17,7 +17,7 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto
 
 > `danger` is supported after `antd@2.7`.
 
-````__react
+````jsx
 import { Button } from 'antd';
 
 ReactDOM.render(
diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md
index b537b7f1b..283bc3fa7 100644
--- 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.
 
-````__react
+````jsx
 import { Button, Icon } from 'antd';
 const ButtonGroup = Button.Group;
 
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index ffd4be428..bd7b2e3a9 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -13,7 +13,7 @@ title:
 
 To mark a button as disabled, add the `disabled` property to the `Button`.
 
-````__react
+````jsx
 import { Button } from 'antd';
 
 ReactDOM.render(
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index 0f93fc624..bf0074d36 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -13,7 +13,7 @@ title:
 
 `ghost` property will make button's background transparent, it is common used in colored background.
 
-````__react
+````jsx
 import { Button } from 'antd';
 
 ReactDOM.render(
diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
index bcdeb27e2..ee6046de6 100644
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -17,7 +17,7 @@ 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.
 
-````__react
+````jsx
 import { Button } from 'antd';
 
 ReactDOM.render(
diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
index cc512dbce..1ecbb1cc9 100644
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -13,7 +13,7 @@ title:
 
 A loading indicator can be added to a button by setting the `loading` property on the `Button`.
 
-````__react
+````jsx
 import { Button } from 'antd';
 
 const App = React.createClass({
diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
index 69363cabe..5e44fd589 100644
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -14,7 +14,7 @@ title:
 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`.
 
 
-````__react
+````jsx
 import { Button, Menu, Dropdown, Icon } from 'antd';
 
 function handleMenuClick(e) {
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
index 5cbdc980e..e3b91a061 100644
--- 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.
 
-````__react
+````jsx
 import { Button, Radio, Icon } from 'antd';
 
 class ButtonSize extends React.Component {
diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md
index cf229f119..956bc2621 100644
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 A basic calendar component with Year/Month switch.
 
-````__react
+````jsx
 import { Calendar } from 'antd';
 
 function onPanelChange(value, mode) {
diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md
index f9643afab..df9e2b39c 100644
--- 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.
 
-````__react
+````jsx
 import { Calendar } from 'antd';
 
 function onPanelChange(value, mode) {
diff --git a/components/calendar/demo/locale.md b/components/calendar/demo/locale.md
index 6a0df4303..1bdb7a17d 100644
--- a/components/calendar/demo/locale.md
+++ b/components/calendar/demo/locale.md
@@ -13,7 +13,7 @@ title:
 
 To set the language. en_US, zh_CN are supported by default.
 
-````__react
+````jsx
 import { Calendar } from 'antd';
 import enUS from 'antd/lib/calendar/locale/en_US';
 import moment from 'moment';
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
index ae3d1fb80..831d74cd8 100644
--- 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.
 
-````__react
+````jsx
 import { Calendar } from 'antd';
 
 function getListData(value) {
diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
index cb52d92ab..e51f29143 100644
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 A basic card containing a title, content and an extra corner content.
 
-````__react
+````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
index fcada7fe3..c83805c1d 100644
--- 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.
 
-````__react
+````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md
index c9989c659..f087fd453 100644
--- a/components/card/demo/grid.md
+++ b/components/card/demo/grid.md
@@ -13,7 +13,7 @@ title:
 
 Cards usually cooperate with grid layout in overview page.
 
-````__react
+````jsx
 import { Card, Col, Row } from 'antd';
 
 ReactDOM.render(
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
index 9bb81ebf3..dff8fb322 100644
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -13,7 +13,7 @@ title:
 
 Shows a loading indicator while the contents of the card is being fetched.
 
-````__react
+````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
diff --git a/components/card/demo/no-padding.md b/components/card/demo/no-padding.md
index 61aa247d1..177ff78c0 100644
--- a/components/card/demo/no-padding.md
+++ b/components/card/demo/no-padding.md
@@ -14,7 +14,7 @@ title:
 Customizing default width and margin.
 
 
-````__react
+````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md
index de506aea5..054179848 100644
--- 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.
 
-````__react
+````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(
diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md
index b378cfc7e..30e2888c7 100644
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@@ -13,7 +13,7 @@ title:
 
 Timing of scrolling to the next card/picture.
 
-````__react
+````jsx
 import { Carousel } from 'antd';
 
 ReactDOM.render(
diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md
index 995e037e7..241263680 100644
--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic usage.
 
-````__react
+````jsx
 import { Carousel } from 'antd';
 
 function onChange(a, b, c) {
diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md
index 9fc60eb75..450174318 100644
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@@ -13,7 +13,7 @@ title:
 
 Slides use fade for transition.
 
-````__react
+````jsx
 import { Carousel } from 'antd';
 
 ReactDOM.render(
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
index a70e117a0..d13fc60f1 100644
--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@@ -13,7 +13,7 @@ title:
 
 Vertical pagination.
 
-````__react
+````jsx
 import { Carousel } from 'antd';
 
 ReactDOM.render(
diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md
index 5808d3139..d99ed2593 100644
--- a/components/cascader/demo/basic.md
+++ b/components/cascader/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Cascade selection box for selecting province/city/district.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/change-on-select.md b/components/cascader/demo/change-on-select.md
index 884f202b8..1a25b4f58 100644
--- a/components/cascader/demo/change-on-select.md
+++ b/components/cascader/demo/change-on-select.md
@@ -13,7 +13,7 @@ title:
 
 Allow only select parent options.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/custom-render.md b/components/cascader/demo/custom-render.md
index 89d5e093d..f18730490 100644
--- a/components/cascader/demo/custom-render.md
+++ b/components/cascader/demo/custom-render.md
@@ -13,7 +13,7 @@ title:
 
 For instance, add an external link after the selected value.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/custom-trigger.md b/components/cascader/demo/custom-trigger.md
index ad992e40e..a5ce65481 100644
--- a/components/cascader/demo/custom-trigger.md
+++ b/components/cascader/demo/custom-trigger.md
@@ -13,7 +13,7 @@ title:
 
 Separate trigger button and result.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md
index 26307d67e..f77df5d1f 100644
--- a/components/cascader/demo/default-value.md
+++ b/components/cascader/demo/default-value.md
@@ -13,7 +13,7 @@ title:
 
 Specifies default value by an array.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/disabled-option.md b/components/cascader/demo/disabled-option.md
index e9b2431a6..7fd0664b0 100644
--- a/components/cascader/demo/disabled-option.md
+++ b/components/cascader/demo/disabled-option.md
@@ -13,7 +13,7 @@ title:
 
 Disable option by specifying the `disabled` property in `options`.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/hover.md b/components/cascader/demo/hover.md
index 044e5d76a..c86630c8d 100644
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@@ -13,7 +13,7 @@ title:
 
 Hover to expand sub menu, click to select option.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/lazy.md b/components/cascader/demo/lazy.md
index 49f6d7c43..2852cd0c5 100644
--- a/components/cascader/demo/lazy.md
+++ b/components/cascader/demo/lazy.md
@@ -17,7 +17,7 @@ Load options lazily with `loadData`.
 
 > Note: `loadData` cannot work with `showSearch`.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/search.md b/components/cascader/demo/search.md
index a68755d7d..a571d42e0 100644
--- a/components/cascader/demo/search.md
+++ b/components/cascader/demo/search.md
@@ -13,7 +13,7 @@ title:
 
 Search and select options directly.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/cascader/demo/size.md b/components/cascader/demo/size.md
index 2d020d317..daf3b640a 100644
--- a/components/cascader/demo/size.md
+++ b/components/cascader/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 Cascade selection box of different sizes.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
index 523d58cd4..6db6141b0 100644
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic usage of checkbox.
 
-````__react
+````jsx
 import { Checkbox } from 'antd';
 
 function onChange(e) {
diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md
index f20519c2b..214e3a528 100644
--- a/components/checkbox/demo/check-all.md
+++ b/components/checkbox/demo/check-all.md
@@ -13,7 +13,7 @@ title:
 
 The `indeterminate` property can help you to achieve a 'check all' effect.
 
-````__react
+````jsx
 import { Checkbox } from 'antd';
 const CheckboxGroup = Checkbox.Group;
 
diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md
index 33dcdd270..812a33075 100644
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -13,7 +13,7 @@ title:
 
 Communicated with other components.
 
-````__react
+````jsx
 import { Checkbox, Button } from 'antd';
 
 const App = React.createClass({
diff --git a/components/checkbox/demo/disabled.md b/components/checkbox/demo/disabled.md
index 1dac88d5d..ae52df4f9 100644
--- a/components/checkbox/demo/disabled.md
+++ b/components/checkbox/demo/disabled.md
@@ -13,7 +13,7 @@ checkbox 不可用。
 
 Disabled checkbox.
 
-````__react
+````jsx
 import { Checkbox } from 'antd';
 
 ReactDOM.render(<div>
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
index ef45c42c0..3148a8b06 100644
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -13,7 +13,7 @@ title:
 
 Generate a group of checkboxes from an array.
 
-````__react
+````jsx
 import { Checkbox } from 'antd';
 const CheckboxGroup = Checkbox.Group;
 
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
index ecb06d49b..33a4143c4 100644
--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@@ -13,7 +13,7 @@ title:
 
 Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
 
-````__react
+````jsx
 import { Collapse } from 'antd';
 const Panel = Collapse.Panel;
 
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
index d157215f4..72eaab4ff 100644
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
 
-````__react
+````jsx
 import { Collapse } from 'antd';
 const Panel = Collapse.Panel;
 
diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md
index a36d0aae7..c60f5a396 100644
--- a/components/collapse/demo/borderless.md
+++ b/components/collapse/demo/borderless.md
@@ -13,7 +13,7 @@ title:
 
 A borderless style of Collapse.
 
-````__react
+````jsx
 import { Collapse } from 'antd';
 const Panel = Collapse.Panel;
 
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
index f6bdf0581..8ffa0534b 100644
--- a/components/collapse/demo/custom.md
+++ b/components/collapse/demo/custom.md
@@ -13,7 +13,7 @@ title:
 
 Customize the background, border and margin styles for each panel.
 
-````__react
+````jsx
 import { Collapse } from 'antd';
 const Panel = Collapse.Panel;
 
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
index 0e6b1fc85..b6124e715 100644
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@@ -13,7 +13,7 @@ title:
 
 `Collapse` is nested inside the `Collapse`.
 
-````__react
+````jsx
 import { Collapse } from 'antd';
 const Panel = Collapse.Panel;
 
diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
index 3f5f7da2f..90d4dc868 100644
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic use case. Users can select or input a date in panel.
 
-````__react
+````jsx
 import { DatePicker } from 'antd';
 const { MonthPicker, RangePicker } = DatePicker;
 
diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md
index f864adb80..b317eebb4 100644
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -13,7 +13,7 @@ title:
 
 Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
 
-````__react
+````jsx
 import { DatePicker } from 'antd';
 const RangePicker = DatePicker.RangePicker;
 
diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md
index e953eb245..7fbe5347c 100644
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -13,7 +13,7 @@ title:
 
 A disabled state of the `DatePicker`.
 
-````__react
+````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
 const { MonthPicker, RangePicker } = DatePicker;
diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md
index 707e5afe3..60cb0a584 100644
--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@@ -13,7 +13,7 @@ title:
 
 We can set the date format by `format`.
 
-````__react
+````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
 const { MonthPicker, RangePicker } = DatePicker;
diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md
index f4ebd5f1e..a3357eedb 100644
--- a/components/date-picker/demo/locale.md
+++ b/components/date-picker/demo/locale.md
@@ -18,7 +18,7 @@ Use locale to set the language. `en_US`, `zh_CN` are supported by default.
 moment will use your time zone automatically. If you want to set other time zone, please set it by yourself.
 
 
-````__react
+````jsx
 import { DatePicker } from 'antd';
 import enUS from 'antd/lib/date-picker/locale/en_US';
 import moment from 'moment-timezone/moment-timezone';
diff --git a/components/date-picker/demo/presetted-ranges.md b/components/date-picker/demo/presetted-ranges.md
index 49287d9b4..d10eeccdb 100644
--- a/components/date-picker/demo/presetted-ranges.md
+++ b/components/date-picker/demo/presetted-ranges.md
@@ -13,7 +13,7 @@ RangePicker 可以设置常用的 预设范围 提高用户体验。
 
 We can set presetted ranges to RangePicker to improve user experience.
 
-````__react
+````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
 const RangePicker = DatePicker.RangePicker;
diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md
index 7b22548cc..cefbfb407 100644
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@@ -14,7 +14,7 @@ title:
 The input box comes in three sizes. `default` will be used if `size` is omitted.
 
 
-````__react
+````jsx
 import { DatePicker, Radio } from 'antd';
 const { MonthPicker, RangePicker } = DatePicker;
 
diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md
index c7dbfb8bf..453c51dcb 100644
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -17,7 +17,7 @@ When `RangePicker` is not satisfied your requirements, try to implement similar
 > * Use the `disabledDate` property to limit the start and end dates.
 > * Imporve user experience with `open` `onOpenChange`.
 
-````__react
+````jsx
 import { DatePicker } from 'antd';
 
 class DateRange extends React.Component {
diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md
index 7e8f9280f..475f6f40e 100644
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@@ -13,7 +13,7 @@ title:
 
 This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
 
-````__react
+````jsx
 import { DatePicker } from 'antd';
 const { RangePicker } = DatePicker;
 
diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md
index 7dafba6a3..c0d4b2f27 100644
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The most basic dropdown menu.
 
-````__react
+````jsx
 import { Menu, Dropdown, Icon } from 'antd';
 
 const menu = (
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index f22a84954..9b7365157 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -13,7 +13,7 @@ title:
 
 A button is on the left, and a related functional menu is on the right.
 
-````__react
+````jsx
 import { Menu, Dropdown, Button, Icon, message } from 'antd';
 
 function handleButtonClick(e) {
diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md
index 64cd1d149..082f54d4d 100644
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@@ -13,7 +13,7 @@ title:
 
 An event will be triggered when you click menu items, in which you can make different operations according to item's key.
 
-````__react
+````jsx
 import { Menu, Dropdown, Icon, message } from 'antd';
 const onClick = function ({ key }) {
   message.info(`Click on item ${key}`);
diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md
index b13484b56..a338e8a35 100644
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@@ -13,7 +13,7 @@ title:
 
 Divider and disabled menu item.
 
-````__react
+````jsx
 import { Menu, Dropdown, Icon } from 'antd';
 
 const menu = (
diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md
index f08a52ece..6f3c5b1b5 100644
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -13,7 +13,7 @@ title:
 
 The default is to close the menu when you click on menu items, this feature can be turned off.
 
-````__react
+````jsx
 import { Menu, Dropdown, Icon } from 'antd';
 
 const OverlayVisible = React.createClass({
diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
index aa90b3646..5afbcfd2f 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -13,7 +13,7 @@ title:
 
 Support 6 placements.
 
-````__react
+````jsx
 import { Menu, Dropdown, Button } from 'antd';
 
 const menu = (
diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md
index 825f281c6..99f3f577a 100644
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@@ -13,7 +13,7 @@ title:
 
 The menu has multiple levels.
 
-````__react
+````jsx
 import { Menu, Dropdown, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
 
diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md
index b357313f6..d000480e2 100644
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@@ -13,7 +13,7 @@ title:
 
 The default trigger mode is `hover`, you can change it to `click`.
 
-````__react
+````jsx
 import { Menu, Dropdown, Icon } from 'antd';
 
 const menu = (
diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md
index 19dd4dbf9..ff1250021 100644
--- a/components/form/demo/advanced-search.md
+++ b/components/form/demo/advanced-search.md
@@ -18,7 +18,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.
 
 
-````__react
+````jsx
 import { Form, Row, Col, Input, Button, Icon } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/form/demo/coordinated.md b/components/form/demo/coordinated.md
index af41dc045..a91d3ff75 100644
--- a/components/form/demo/coordinated.md
+++ b/components/form/demo/coordinated.md
@@ -13,7 +13,7 @@ title:
 
 Use `setFieldsValue` to set other control's value programmaticly.
 
-````__react
+````jsx
 import { Form, Select, Input, Button } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md
index c24300543..723639848 100644
--- a/components/form/demo/customized-form-controls.md
+++ b/components/form/demo/customized-form-controls.md
@@ -18,7 +18,7 @@ Customized or third-party form controls can be used in Form, too. Controls must
 > * It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters).
 
 
-````__react
+````jsx
 import { Form, Input, Select, Button } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md
index 0dde45114..bffcc6c26 100644
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -13,7 +13,7 @@ title:
 
 Add or remove form items dynamically.
 
-````__react
+````jsx
 import { Form, Input, Icon, Button } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md
index c4097327e..bd8e36d6c 100644
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.md
@@ -13,7 +13,7 @@ title:
 
 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 fills in the form to create an item.
 
-````__react
+````jsx
 import { Button, Modal, Form, Input, Radio } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/form/demo/global-state.md b/components/form/demo/global-state.md
index 9e18acd15..26dfcfed2 100644
--- a/components/form/demo/global-state.md
+++ b/components/form/demo/global-state.md
@@ -13,7 +13,7 @@ title:
 
 We can store form data into upper component or [Redux](https://github.com/reactjs/redux) or [dva](https://github.com/dvajs/dva) by using `onFieldsChange` and `mapPropsToFields`.
 
-````__react
+````jsx
 import { Form, Input } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/form/demo/horizontal-login.md b/components/form/demo/horizontal-login.md
index bdeda4406..c0b79d75f 100644
--- a/components/form/demo/horizontal-login.md
+++ b/components/form/demo/horizontal-login.md
@@ -13,7 +13,7 @@ title:
 
 Horizontal login form is often used in navigation bar.
 
-````__react
+````jsx
 import { Form, Icon, Input, Button } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/form/demo/layout.md b/components/form/demo/layout.md
index 97ed953ef..6c93b863a 100644
--- a/components/form/demo/layout.md
+++ b/components/form/demo/layout.md
@@ -13,7 +13,7 @@ title:
 
 There are three layout for form: `horizontal`, `vertical`, `inline`.
 
-````__react
+````jsx
 import { Form, Input, Button, Radio } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md
index da0198049..1bd476549 100644
--- a/components/form/demo/normal-login.md
+++ b/components/form/demo/normal-login.md
@@ -13,7 +13,7 @@ title:
 
 Normal login form which can contain more elements.
 
-````__react
+````jsx
 import { Form, Icon, Input, Button, Checkbox } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/form/demo/register.md b/components/form/demo/register.md
index 419f14040..973c7ff1b 100644
--- a/components/form/demo/register.md
+++ b/components/form/demo/register.md
@@ -13,7 +13,7 @@ title:
 
 Fill in this form to create a new account for you.
 
-````__react
+````jsx
 import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md
index f103f7a27..0eb6b3f80 100644
--- a/components/form/demo/time-related-controls.md
+++ b/components/form/demo/time-related-controls.md
@@ -13,7 +13,7 @@ title:
 
 After `antd@2.0`, the `value` of time-related components had been changed to `moment`. So, we need to pre-process those values.
 
-````__react
+````jsx
 import { Form, DatePicker, TimePicker, Button } from 'antd';
 const FormItem = Form.Item;
 const MonthPicker = DatePicker.MonthPicker;
diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md
index 6388a6fc8..d976a126d 100644
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -13,7 +13,7 @@ title:
 
 Demostration for validataion configuration for form controls which are not show in the above demos.
 
-````__react
+````jsx
 import {
   Form, Select, InputNumber, Switch, Radio,
   Slider, Button, Upload, Icon,
diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md
index c2c05af33..e04c488b9 100644
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@@ -21,7 +21,7 @@ validateStatus: 'success', 'warning', 'error', 'validating'。
 
 To set `hasFeedback` property to `true` enable to display feed icon of input control.
 
-````__react
+````jsx
 import { Form, Input, DatePicker, Col } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.md
index 437e6d315..98018f23e 100644
--- a/components/form/demo/without-form-create.md
+++ b/components/form/demo/without-form-create.md
@@ -13,7 +13,7 @@ title:
 
 `Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy your business, you can drop `Form.create` and handle form data manually.
 
-````__react
+````jsx
 import { Form, InputNumber } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md
index b0e8055eb..9f23ce6bc 100644
--- a/components/grid/demo/basic.md
+++ b/components/grid/demo/basic.md
@@ -17,7 +17,7 @@ From the stack to the horizontal arrangement.
 
 You can create a basic grid system by using a single set of `Row` and` Col` grid assembly, all of the columns (Col) must be placed in `Row`.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md
index 9f19bffc2..483b3b5de 100644
--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@@ -13,7 +13,7 @@ Flex 子元素垂直对齐。
 
 Flex child elements vertically aligned.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md
index b220f1a5c..fc375c949 100644
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@@ -13,7 +13,7 @@ title:
 
 To change the element sort by Flex layout order.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index 6e3c92c60..8f3b5330f 100644
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -15,7 +15,7 @@ Flex 布局基础。
 
 Use `row-flex` define` flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index 6345b5d4d..4969fd293 100644
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@@ -13,7 +13,7 @@ title:
 
 You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
diff --git a/components/grid/demo/offset.md b/components/grid/demo/offset.md
index 9bc00fa41..f74660883 100644
--- a/components/grid/demo/offset.md
+++ b/components/grid/demo/offset.md
@@ -15,7 +15,7 @@ title:
 
 `Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 84f28044c..d6a3dd778 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -13,7 +13,7 @@ title:
 
 A simple playground for column count and gutter.
 
-````__react
+````jsx
 import { Row, Col, Slider } from 'antd';
 
 class App extends React.Component {
diff --git a/components/grid/demo/reponsive-more.md b/components/grid/demo/reponsive-more.md
index f5a80c194..4907c75c2 100644
--- a/components/grid/demo/reponsive-more.md
+++ b/components/grid/demo/reponsive-more.md
@@ -16,7 +16,7 @@ title:
 `Span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` properties to use,
 where `xs = {6}` is equivalent to `xs = {{span: 6}}`.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
diff --git a/components/grid/demo/reponsive.md b/components/grid/demo/reponsive.md
index e578d4375..2b008e54d 100644
--- a/components/grid/demo/reponsive.md
+++ b/components/grid/demo/reponsive.md
@@ -13,7 +13,7 @@ title:
 
 Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset four dimensions: `xs` `sm` `md` `lg`.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
diff --git a/components/grid/demo/sort.md b/components/grid/demo/sort.md
index 8ce2d168a..8352bb2c8 100644
--- a/components/grid/demo/sort.md
+++ b/components/grid/demo/sort.md
@@ -15,7 +15,7 @@ title:
 
 By using `push` and` pull` class you can easily change column order.
 
-````__react
+````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md
index 25687d828..bafc92bcd 100644
--- a/components/input-number/demo/basic.md
+++ b/components/input-number/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Numeric-only input box.
 
-````__react
+````jsx
 import { InputNumber } from 'antd';
 
 function onChange(value) {
diff --git a/components/input-number/demo/digit.md b/components/input-number/demo/digit.md
index 6339023b0..fd2ea32eb 100644
--- a/components/input-number/demo/digit.md
+++ b/components/input-number/demo/digit.md
@@ -13,7 +13,7 @@ title:
 
 A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop.
 
-````__react
+````jsx
 import { InputNumber } from 'antd';
 
 function onChange(value) {
diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md
index b8a564a21..b1012df46 100644
--- a/components/input-number/demo/disabled.md
+++ b/components/input-number/demo/disabled.md
@@ -13,7 +13,7 @@ title:
 
 Click the button to toggle between available and disabled states.
 
-````__react
+````jsx
 import { InputNumber, Button } from 'antd';
 
 const Test = React.createClass({
diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md
index 8c43e91ac..0b2f5c350 100644
--- a/components/input-number/demo/size.md
+++ b/components/input-number/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 There are three sizes available to a numeric input box. By default, the size is `28px`. The two additional sizes are `large` and `small` which means `32px` and `22px`, respectively.
 
-````__react
+````jsx
 import { InputNumber } from 'antd';
 
 function onChange(value) {
diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md
index f8de6344b..c1ce8b508 100644
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -13,7 +13,7 @@ title:
 
 Using pre & post tabs example.
 
-````__react
+````jsx
 import { Input, Select, Icon } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/input/demo/autosize-textarea.md b/components/input/demo/autosize-textarea.md
index 5d03aa759..fb04ab806 100644
--- a/components/input/demo/autosize-textarea.md
+++ b/components/input/demo/autosize-textarea.md
@@ -15,7 +15,7 @@ title:
 An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
 
 
-````__react
+````jsx
 import { Input } from 'antd';
 
 ReactDOM.render(
diff --git a/components/input/demo/basic.md b/components/input/demo/basic.md
index cc08dd260..14f5cb878 100644
--- a/components/input/demo/basic.md
+++ b/components/input/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic usage example
 
-````__react
+````jsx
 import { Input } from 'antd';
 
 ReactDOM.render(<Input placeholder="Basic usage" />, mountNode);
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index 07d104fb9..c420411bd 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -17,7 +17,7 @@ Input.Group example
 
 Note: You don't need `Col` to control the width in the `compact` mode.
 
-````__react
+````jsx
 import { Input, Col, Select, InputNumber, DatePicker } from 'antd';
 const InputGroup = Input.Group;
 const Option = Select.Option;
diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md
index 6f32f392f..2b9b5dc05 100644
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@@ -13,7 +13,7 @@ title:
 
 Add prefix or suffix icons inside input.
 
-````__react
+````jsx
 import { Input, Icon } from 'antd';
 
 class App extends React.Component {
diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md
index 6198d3fa0..e59e99d3c 100644
--- a/components/input/demo/search-input.md
+++ b/components/input/demo/search-input.md
@@ -13,7 +13,7 @@ title:
 
 Example of creating a search box by grouping a standard input with a search button, added in `2.5.0`.
 
-````__react
+````jsx
 import { Input } from 'antd';
 const Search = Input.Search;
 
diff --git a/components/input/demo/size.md b/components/input/demo/size.md
index 451a197d5..7781a1aaa 100644
--- a/components/input/demo/size.md
+++ b/components/input/demo/size.md
@@ -17,7 +17,7 @@ There are three sizes of an Input box: `large` (32px)、`default` (28px) and `sm
 
 Note: Inside of forms, only the large size is used.
 
-````__react
+````jsx
 import { Input } from 'antd';
 
 ReactDOM.render(
diff --git a/components/input/demo/textarea.md b/components/input/demo/textarea.md
index 6c66882d3..6b8aa5bf3 100644
--- a/components/input/demo/textarea.md
+++ b/components/input/demo/textarea.md
@@ -13,7 +13,7 @@ title:
 
 For multi-line user input cases, an input whose `type` prop has the value of `"textarea"` can be used.
 
-````__react
+````jsx
 import { Input } from 'antd';
 
 ReactDOM.render(<Input type="textarea" rows={4} />, mountNode);
diff --git a/components/input/demo/tooltip.md b/components/input/demo/tooltip.md
index 00e2cfdc6..3c65c61af 100644
--- a/components/input/demo/tooltip.md
+++ b/components/input/demo/tooltip.md
@@ -13,7 +13,7 @@ title:
 
 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.
 
-````__react
+````jsx
 import { Input, Tooltip } from 'antd';
 
 function formatNumber(value) {
diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index d51a10012..3915f225f 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Classic page layouts.
 
-````__react
+````jsx
 import { Layout } from 'antd';
 const { Header, Footer, Sider, Content } = Layout;
 
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 28403cf2b..f30a6b3a4 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -13,7 +13,7 @@ title:
 
 If you want to use a customized trigger, you can hide the default one by setting `trigger={null}`.
 
-````__react
+````jsx
 import { Layout, Menu, Icon } from 'antd';
 const { Header, Sider, Content } = Layout;
 
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index e524a4882..f5415ca8a 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -13,7 +13,7 @@ title:
 
 Be used in the two-columns layout.
 
-````__react
+````jsx
 import { Layout, Menu, Breadcrumb, Icon } from 'antd';
 const { Header, Content, Footer, Sider } = Layout;
 
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 773a6da69..15b1ce026 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -13,7 +13,7 @@ title:
 
 Be used in the page which has both the top navigation and the sidebar.
 
-````__react
+````jsx
 import { Layout, Menu, Breadcrumb, Icon } from 'antd';
 const { SubMenu } = Menu;
 const { Header, Content, Footer, Sider } = Layout;
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index 06eba6dce..0e6d3eb38 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -13,7 +13,7 @@ title:
 
 The most basic "header-content-footer" layout.
 
-````__react
+````jsx
 import { Layout, Menu, Breadcrumb } from 'antd';
 const { Header, Content, Footer } = Layout;
 
diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md
index 107d1e888..844668f28 100644
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@@ -13,7 +13,7 @@ title:
 
 Components which need localization support are listed here, you can toggle the language in the demo.
 
-````__react
+````jsx
 import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
          Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md
index 07526cb79..9367669c6 100644
--- a/components/locale-provider/demo/basic.md
+++ b/components/locale-provider/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Wrap your app with `LocaleProvider`, and apply the corresponding language package.
 
-````__react
+````jsx
 import { Pagination, LocaleProvider } from 'antd';
 import enUS from 'antd/lib/locale-provider/en_US';
 
diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md
index 4e1f11cbd..dc0dc465e 100644
--- a/components/mention/demo/async.md
+++ b/components/mention/demo/async.md
@@ -13,7 +13,7 @@ title:
 
 async
 
-````__react
+````jsx
 import { Mention } from 'antd';
 
 const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md
index 0760738d8..b9d2978a6 100644
--- a/components/mention/demo/avatar.md
+++ b/components/mention/demo/avatar.md
@@ -15,7 +15,7 @@ title:
 
 Customize suggestions
 
-````__react
+````jsx
 import { Mention } from 'antd';
 const Nav = Mention.Nav;
 
diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md
index c6284b968..0fc1d17a8 100644
--- a/components/mention/demo/basic.md
+++ b/components/mention/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic usage.
 
-````__react
+````jsx
 import { Mention } from 'antd';
 const { toString, toEditorState } = Mention;
 
diff --git a/components/mention/demo/controllder-simple.md b/components/mention/demo/controllder-simple.md
index 5f0b585ee..721b04eaa 100644
--- a/components/mention/demo/controllder-simple.md
+++ b/components/mention/demo/controllder-simple.md
@@ -13,7 +13,7 @@ title:
 
 Controlled mode.
 
-````__react
+````jsx
 import { Mention } from 'antd';
 const { toEditorState } = Mention;
 
diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md
index c2fbbc773..3c8f2a935 100644
--- a/components/mention/demo/controlled.md
+++ b/components/mention/demo/controlled.md
@@ -13,7 +13,7 @@ title:
 
 Controlled mode, for example, to work with `Form` .
 
-````__react
+````jsx
 import { Mention, Form, Button } from 'antd';
 const { toEditorState, getMentions } = Mention;
 const FormItem = Form.Item;
diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md
index 8ddaef27f..b80f3148d 100644
--- a/components/mention/demo/custom-tag.md
+++ b/components/mention/demo/custom-tag.md
@@ -15,7 +15,7 @@ title:
 
 Customize suggestions.
 
-````__react
+````jsx
 import { Mention } from 'antd';
 const Nav = Mention.Nav;
 
diff --git a/components/mention/demo/multilines.md b/components/mention/demo/multilines.md
index f773f0e61..81342ec9c 100644
--- a/components/mention/demo/multilines.md
+++ b/components/mention/demo/multilines.md
@@ -13,7 +13,7 @@ title:
 
 Multi lines mode.
 
-````__react
+````jsx
 import { Mention } from 'antd';
 const { toString } = Mention;
 
diff --git a/components/mention/demo/popupContainer.md b/components/mention/demo/popupContainer.md
index fd0fe2193..b69fe9e53 100644
--- a/components/mention/demo/popupContainer.md
+++ b/components/mention/demo/popupContainer.md
@@ -13,7 +13,7 @@ title:
 
 To set the container of the suggestion.
 
-````__react
+````jsx
 import { Mention, Popover, Button } from 'antd';
 const { toString, toEditorState } = Mention;
 
diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md
index eb861fdef..b1d5c7685 100755
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -13,7 +13,7 @@ title:
 
 Horizontal top navigation menu.
 
-````__react
+````jsx
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index 761b59ead..dc676add3 100755
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -17,7 +17,7 @@ Click the menu and you will see that all the other menus gets collapsed to keep
 
 > This demo is for antd@2.0+.
 
-````__react
+````jsx
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
 
diff --git a/components/menu/demo/sider.md b/components/menu/demo/sider.md
index 414f15c99..963d8fe0c 100755
--- a/components/menu/demo/sider.md
+++ b/components/menu/demo/sider.md
@@ -13,7 +13,7 @@ title:
 
 Vertical menu with inline submenus.
 
-````__react
+````jsx
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
index 2f1661531..815e023ff 100755
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -13,7 +13,7 @@ title:
 
 Show the dynamic switching mode (between 'inline' and 'vertical').
 
-````__react
+````jsx
 import { Menu, Icon, Switch } from 'antd';
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
diff --git a/components/menu/demo/theme.md b/components/menu/demo/theme.md
index ccaf7b6ab..54dfb1877 100755
--- a/components/menu/demo/theme.md
+++ b/components/menu/demo/theme.md
@@ -13,7 +13,7 @@ title:
 
 There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
 
-````__react
+````jsx
 import { Menu, Icon, Switch } from 'antd';
 const SubMenu = Menu.SubMenu;
 
diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md
index e3f737279..59990ee30 100755
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@@ -13,7 +13,7 @@ title:
 
 Submenus open as pop-ups.
 
-````__react
+````jsx
 import { Menu, Icon } from 'antd';
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
diff --git a/components/message/demo/duration.md b/components/message/demo/duration.md
index 93014ed23..af1b56520 100644
--- a/components/message/demo/duration.md
+++ b/components/message/demo/duration.md
@@ -13,7 +13,7 @@ title:
 
 Customize message display duration from default `1.5s` to `10s`.
 
-````__react
+````jsx
 import { message, Button } from 'antd';
 
 const success = function () {
diff --git a/components/message/demo/info.md b/components/message/demo/info.md
index 371ec17da..918436284 100644
--- a/components/message/demo/info.md
+++ b/components/message/demo/info.md
@@ -13,7 +13,7 @@ title:
 
 Normal messages as feedbacks.
 
-````__react
+````jsx
 import { message, Button } from 'antd';
 
 const info = function () {
diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md
index b0df92856..e9ec40518 100644
--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@@ -13,7 +13,7 @@ title:
 
 Display a global loading indicator, which is dismissed by itself asynchronously.
 
-````__react
+````jsx
 import { message, Button } from 'antd';
 
 const success = () => {
diff --git a/components/message/demo/other.md b/components/message/demo/other.md
index 788687a9c..c5e07f925 100644
--- a/components/message/demo/other.md
+++ b/components/message/demo/other.md
@@ -13,7 +13,7 @@ title:
 
 Messages of success, error and warning types.
 
-````__react
+````jsx
 import { message, Button } from 'antd';
 
 const success = function () {
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index 1e3739a48..8532b1f18 100644
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@@ -14,7 +14,7 @@ title:
 Asynchronously close a modal dialog when a user clicked OK button, for example,
 you can use this pattern when you submit a form.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 
 const Test = React.createClass({
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index 3f047d36a..c8d44155f 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic modal dialog.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 
 const App = React.createClass({
diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md
index d828447ec..e923790af 100644
--- a/components/modal/demo/confirm-promise.md
+++ b/components/modal/demo/confirm-promise.md
@@ -14,7 +14,7 @@ title:
 To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to
 delay closing the dialog.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 const confirm = Modal.confirm;
 
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index 3b009f5da..da0f45bac 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -13,7 +13,7 @@ title:
 
 To use `confirm()` to popup a confirmation modal dialog.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 const confirm = Modal.confirm;
 
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index a96ceecc2..48e427608 100644
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -15,7 +15,7 @@ A more complex example, as illustrated in this example, we define a customized f
 the dialog will change to loading state after clicking submit button , when the loading is over,
 the modal dialog will be closed.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 
 const Test = React.createClass({
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
index a91d4eb82..6b6719ffa 100644
--- a/components/modal/demo/info.md
+++ b/components/modal/demo/info.md
@@ -13,7 +13,7 @@ title:
 
 In the various types of information modal dialog, only one button to close dialog is provided.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 
 function info() {
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
index 80331b234..2c4b5ae4d 100644
--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@@ -13,7 +13,7 @@ title:
 
 To customize the text of the buttons, you need to set `okText` and `cancelText` props.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 
 const LocalizedModal = React.createClass({
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
index 0b9201415..3f09e4786 100644
--- a/components/modal/demo/manual.md
+++ b/components/modal/demo/manual.md
@@ -14,7 +14,7 @@ title:
 
 Manually destroying a modal.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 
 function success() {
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index 80f542194..d27ab0853 100644
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@@ -14,7 +14,7 @@ title:
 After release `1.0`,  Modal's `align` prop was removed. You can use `style.top` or other styles to
 set position of modal dialog.
 
-````__react
+````jsx
 import { Modal, Button } from 'antd';
 
 const App = React.createClass({
diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md
index eaa42613a..a631cffcc 100644
--- a/components/notification/demo/basic.md
+++ b/components/notification/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The simplest usage that close the notification box after 4.5s.
 
-````__react
+````jsx
 import { Button, notification } from 'antd';
 
 const openNotification = () => {
diff --git a/components/notification/demo/custom-icon.md b/components/notification/demo/custom-icon.md
index 5a882c6cc..6faf1526d 100644
--- a/components/notification/demo/custom-icon.md
+++ b/components/notification/demo/custom-icon.md
@@ -13,7 +13,7 @@ title:
 
 The icon can be customized to any react node.
 
-````__react
+````jsx
 import { Button, notification, Icon } from 'antd';
 
 const openNotification = () => {
diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md
index a90000eff..41f9c878f 100644
--- a/components/notification/demo/duration.md
+++ b/components/notification/demo/duration.md
@@ -15,7 +15,7 @@ title:
 the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,
 the notification box will never close automatically.
 
-````__react
+````jsx
 import { Button, notification } from 'antd';
 
 const openNotification = () => {
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index c6ccc53c3..702ffc221 100755
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -13,11 +13,11 @@ title:
 
 A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft`.
 
-````__react
+````jsx
 import { Button, Select, notification } from 'antd';
 
 const { Option } = Select;
-const options = ['topLeft', 'topRight','bottomLeft', 'bottomRight'];
+const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
 const openNotification = () => {
   notification.open({
     message: 'Notification Title',
@@ -30,7 +30,7 @@ ReactDOM.render(
     <Select
       defaultValue="topRight"
       style={{ width: 120, marginRight: 10 }}
-      onChange={val => {
+      onChange={(val) => {
         notification.config({
           placement: val,
         });
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index b12b9199e..2fe1ba73f 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -13,7 +13,7 @@ title:
 
 To customize the style or font of the close button.
 
-````__react
+````jsx
 import { Button, notification } from 'antd';
 
 const close = () => {
diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md
index caae68c7d..9a7d7d046 100644
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -13,7 +13,7 @@ title:
 
 A notification box with a icon at the left side.
 
-````__react
+````jsx
 import { Button, notification } from 'antd';
 
 const openNotificationWithIcon = (type) => {
diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md
index 5e92f08c0..f79eb3c9d 100644
--- a/components/pagination/demo/basic.md
+++ b/components/pagination/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic pagination.
 
-````__react
+````jsx
 import { Pagination } from 'antd';
 
 ReactDOM.render(<Pagination defaultCurrent={1} total={50} />, mountNode);
diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md
index 4d03cc8c5..5662ef402 100644
--- a/components/pagination/demo/changer.md
+++ b/components/pagination/demo/changer.md
@@ -13,7 +13,7 @@ title:
 
 Change `pageSize`.
 
-````__react
+````jsx
 import { Pagination } from 'antd';
 
 function onShowSizeChange(current, pageSize) {
diff --git a/components/pagination/demo/controlled.md b/components/pagination/demo/controlled.md
index 6684e9df5..4cb378b68 100644
--- a/components/pagination/demo/controlled.md
+++ b/components/pagination/demo/controlled.md
@@ -13,7 +13,7 @@ title:
 
 Controlled page number.
 
-````__react
+````jsx
 import { Pagination } from 'antd';
 
 const Container = React.createClass({
diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md
index 0ce16c1e8..83042d309 100644
--- a/components/pagination/demo/jump.md
+++ b/components/pagination/demo/jump.md
@@ -13,7 +13,7 @@ title:
 
 Jump to a page directly.
 
-````__react
+````jsx
 import { Pagination } from 'antd';
 
 function onChange(pageNumber) {
diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md
index 34557b5fc..1bd2344fa 100644
--- a/components/pagination/demo/mini.md
+++ b/components/pagination/demo/mini.md
@@ -13,7 +13,7 @@ title:
 
 Mini size pagination.
 
-````__react
+````jsx
 import { Pagination } from 'antd';
 
 function showTotal(total) {
diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md
index ceea2c6b2..5d4d38a30 100644
--- a/components/pagination/demo/more.md
+++ b/components/pagination/demo/more.md
@@ -13,7 +13,7 @@ title:
 
 More pages.
 
-````__react
+````jsx
 import { Pagination } from 'antd';
 
 ReactDOM.render(
diff --git a/components/pagination/demo/simple.md b/components/pagination/demo/simple.md
index 27d2e0d86..290fd7efb 100644
--- a/components/pagination/demo/simple.md
+++ b/components/pagination/demo/simple.md
@@ -13,7 +13,7 @@ title:
 
 Simple mode.
 
-````__react
+````jsx
 import { Pagination } from 'antd';
 
 ReactDOM.render(
diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md
index 8eb5868fb..3cce6e3dd 100644
--- a/components/pagination/demo/total.md
+++ b/components/pagination/demo/total.md
@@ -13,7 +13,7 @@ title:
 
 You can show the total number of data by setting `showTotal`.
 
-````__react
+````jsx
 import { Pagination } from 'antd';
 
 ReactDOM.render(
diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md
index 060de982b..c4f90d1cd 100755
--- a/components/popconfirm/demo/basic.md
+++ b/components/popconfirm/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The basic example.
 
-````__react
+````jsx
 import { Popconfirm, message } from 'antd';
 
 function confirm() {
diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md
index 90b3ce4c2..0b93476df 100755
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -13,7 +13,7 @@ title:
 
 Make it pop up under some conditions.
 
-````__react
+````jsx
 import { Popconfirm, Switch, message } from 'antd';
 
 const App = React.createClass({
diff --git a/components/popconfirm/demo/locale.md b/components/popconfirm/demo/locale.md
index 9137dbff2..afab4c358 100755
--- a/components/popconfirm/demo/locale.md
+++ b/components/popconfirm/demo/locale.md
@@ -13,7 +13,7 @@ title:
 
 Set `okText` and `cancelText` props to customise the button's labels.
 
-````__react
+````jsx
 import { Popconfirm } from 'antd';
 
 ReactDOM.render(
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
index f897c2bbd..1f796fde0 100755
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@@ -13,7 +13,7 @@ title:
 
 There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target.
 
-````__react
+````jsx
 import { Popconfirm, message, Button } from 'antd';
 
 const text = 'Are you sure delete this task?';
diff --git a/components/popover/demo/arrow-point-at-center.md b/components/popover/demo/arrow-point-at-center.md
index 16f941284..80df7d2c4 100644
--- a/components/popover/demo/arrow-point-at-center.md
+++ b/components/popover/demo/arrow-point-at-center.md
@@ -13,7 +13,7 @@ title:
 
 The arrow points to the center of the target element, which set `arrowPointAtCenter`.
 
-````__react
+````jsx
 import { Popover, Button } from 'antd';
 
 const text = <span>Title</span>;
diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md
index 35ad9db89..4b76e29be 100755
--- a/components/popover/demo/basic.md
+++ b/components/popover/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The most basic example. The size of the floating layer depends on the contents region.
 
-````__react
+````jsx
 import { Popover, Button } from 'antd';
 
 const content = (
diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md
index a0e00feac..f9b46ccfe 100755
--- a/components/popover/demo/control.md
+++ b/components/popover/demo/control.md
@@ -13,7 +13,7 @@ title:
 
 Use `visible` prop to control the display of the card.
 
-````__react
+````jsx
 import { Popover, Button } from 'antd';
 
 const App = React.createClass({
diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md
index a123bddd3..b7b810b81 100755
--- a/components/popover/demo/placement.md
+++ b/components/popover/demo/placement.md
@@ -13,7 +13,7 @@ title:
 
 There are 12 `placement` options available.
 
-````__react
+````jsx
 import { Popover, Button } from 'antd';
 
 const text = <span>Title</span>;
diff --git a/components/popover/demo/triggerType.md b/components/popover/demo/triggerType.md
index 71b59da77..0c07f8647 100755
--- a/components/popover/demo/triggerType.md
+++ b/components/popover/demo/triggerType.md
@@ -13,7 +13,7 @@ title:
 
 Mouse to click, focus and move in.
 
-````__react
+````jsx
 import { Popover, Button } from 'antd';
 
 const content = (
diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md
index b5bdf577b..14d8e5b04 100644
--- a/components/progress/demo/circle-dynamic.md
+++ b/components/progress/demo/circle-dynamic.md
@@ -13,7 +13,7 @@ title:
 
 A dynamic progress bar is better.
 
-````__react
+````jsx
 import { Progress, Button } from 'antd';
 const ButtonGroup = Button.Group;
 
diff --git a/components/progress/demo/circle-mini.md b/components/progress/demo/circle-mini.md
index 7b95cae5f..7350fd734 100644
--- a/components/progress/demo/circle-mini.md
+++ b/components/progress/demo/circle-mini.md
@@ -13,7 +13,7 @@ title:
 
 A smaller circular progress bar.
 
-````__react
+````jsx
 import { Progress } from 'antd';
 
 ReactDOM.render(
diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md
index 67312ed38..7df3b8805 100644
--- a/components/progress/demo/circle.md
+++ b/components/progress/demo/circle.md
@@ -13,7 +13,7 @@ title:
 
 A circular progress bar.
 
-````__react
+````jsx
 import { Progress } from 'antd';
 
 ReactDOM.render(
diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md
index 06b122eba..0a4226505 100644
--- a/components/progress/demo/dynamic.md
+++ b/components/progress/demo/dynamic.md
@@ -13,7 +13,7 @@ title:
 
 A dynamic progress bar is better.
 
-````__react
+````jsx
 import { Progress, Button } from 'antd';
 const ButtonGroup = Button.Group;
 
diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md
index 6a6c702f7..5d92a56e7 100644
--- a/components/progress/demo/format.md
+++ b/components/progress/demo/format.md
@@ -13,7 +13,7 @@ title:
 
 You can custom text format by setting `format`.
 
-````__react
+````jsx
 import { Progress } from 'antd';
 
 ReactDOM.render(
diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md
index d9c64a0cf..3f929a71a 100644
--- a/components/progress/demo/line-mini.md
+++ b/components/progress/demo/line-mini.md
@@ -13,7 +13,7 @@ title:
 
 Appropriate for a narrow area.
 
-````__react
+````jsx
 import { Progress } from 'antd';
 
 ReactDOM.render(
diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md
index dc54e0250..1a6446843 100644
--- a/components/progress/demo/line.md
+++ b/components/progress/demo/line.md
@@ -13,7 +13,7 @@ title:
 
 A standard progress bar.
 
-````__react
+````jsx
 import { Progress } from 'antd';
 
 ReactDOM.render(
diff --git a/components/radio/demo/basic.md b/components/radio/demo/basic.md
index 92f92bd2b..ac6753cc1 100644
--- a/components/radio/demo/basic.md
+++ b/components/radio/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The simplest use.
 
-```__react
+```jsx
 import { Radio } from 'antd';
 
 ReactDOM.render(<Radio>Radio</Radio>, mountNode);
diff --git a/components/radio/demo/disable.md b/components/radio/demo/disable.md
index 5aff58fb5..990f34158 100644
--- a/components/radio/demo/disable.md
+++ b/components/radio/demo/disable.md
@@ -13,7 +13,7 @@ Radio 不可用。
 
 Radio unavailable.
 
-```__react
+```jsx
 import { Radio, Button } from 'antd';
 
 const App = React.createClass({
diff --git a/components/radio/demo/radiobutton.md b/components/radio/demo/radiobutton.md
index bd4ebcbc9..ee3337266 100644
--- a/components/radio/demo/radiobutton.md
+++ b/components/radio/demo/radiobutton.md
@@ -13,7 +13,7 @@ title:
 
 The combination of radio button style.
 
-```__react
+```jsx
 import { Radio } from 'antd';
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
diff --git a/components/radio/demo/radiogroup-more.md b/components/radio/demo/radiogroup-more.md
index 44441a225..befcac97b 100644
--- a/components/radio/demo/radiogroup-more.md
+++ b/components/radio/demo/radiogroup-more.md
@@ -13,7 +13,7 @@ title:
 
 Vertical RadioGroup, with more radios.
 
-```__react
+```jsx
 import { Radio, Input } from 'antd';
 const RadioGroup = Radio.Group;
 
diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md
index 251fc70ac..5b8a7457a 100644
--- a/components/radio/demo/radiogroup.md
+++ b/components/radio/demo/radiogroup.md
@@ -13,7 +13,7 @@ title:
 
 A set of mutually exclusive Radio with the use of
 
-```__react
+```jsx
 import { Radio } from 'antd';
 const RadioGroup = Radio.Group;
 
diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md
index 94f780f55..860c72d68 100644
--- a/components/radio/demo/size.md
+++ b/components/radio/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 There are three sizes available: large, medium, and small. It can coordinate with input box.
 
-```__react
+```jsx
 import { Radio } from 'antd';
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
diff --git a/components/rate/demo/basic.md b/components/rate/demo/basic.md
index 73f415dd4..7b41ee340 100644
--- a/components/rate/demo/basic.md
+++ b/components/rate/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The simplest usage.
 
-````__react
+````jsx
 import { Rate } from 'antd';
 
 ReactDOM.render(<Rate />, mountNode);
diff --git a/components/rate/demo/disabled.md b/components/rate/demo/disabled.md
index 936cc17dc..bc060d0cf 100644
--- a/components/rate/demo/disabled.md
+++ b/components/rate/demo/disabled.md
@@ -13,7 +13,7 @@ title:
 
 Read only, can't use mouse to interact.
 
-````__react
+````jsx
 import { Rate } from 'antd';
 
 ReactDOM.render(<Rate disabled defaultValue={2} />, mountNode);
diff --git a/components/rate/demo/half.md b/components/rate/demo/half.md
index c3eaffbb9..b3b1ea528 100644
--- a/components/rate/demo/half.md
+++ b/components/rate/demo/half.md
@@ -13,7 +13,7 @@ title:
 
 Support select half star.
 
-````__react
+````jsx
 import { Rate } from 'antd';
 
 ReactDOM.render(<Rate allowHalf defaultValue={2.5} />, mountNode);
diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md
index c7318ced0..2fab4d13b 100644
--- a/components/rate/demo/text.md
+++ b/components/rate/demo/text.md
@@ -13,7 +13,7 @@ title:
 
 Add copywriting in rate components.
 
-````__react
+````jsx
 import { Rate } from 'antd';
 
 const Rater = React.createClass({
diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md
index 081eefe37..a9d6e80dd 100644
--- a/components/select/demo/automatic-tokenization.md
+++ b/components/select/demo/automatic-tokenization.md
@@ -13,7 +13,7 @@ title:
 
 Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode.
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index 0abf97b8d..cae886a1f 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic Usage.
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md
index 31bca0bd8..9573faf4e 100644
--- a/components/select/demo/combobox.md
+++ b/components/select/demo/combobox.md
@@ -18,7 +18,7 @@ Automatic completion of select input.
 Using the [AutoComplete](/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable.
 
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md
index 73fd04007..4285426eb 100644
--- a/components/select/demo/coordinate.md
+++ b/components/select/demo/coordinate.md
@@ -18,7 +18,7 @@ Coordinating the selection of provinces and cities is a common use case and demo
 Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable.
 
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md
index 3bab11e18..8abd9ef54 100644
--- a/components/select/demo/label-in-value.md
+++ b/components/select/demo/label-in-value.md
@@ -17,7 +17,7 @@ As a default behavior, the onChange callback can only get the value of the selec
 
 The label of the selected item will be packed as an object for passing to the onChange callback.
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 4e3a73d37..2536430e5 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -13,7 +13,7 @@ title:
 
 Multiple selection, selecting from existing items (scroll the menu).
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md
index 6a47a78cf..5f3d1b682 100644
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@@ -13,7 +13,7 @@ title:
 
 Using `OptGroup` to group the options.
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 const OptGroup = Select.OptGroup;
diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md
index fe52955db..da9b4fac4 100644
--- a/components/select/demo/search-box.md
+++ b/components/select/demo/search-box.md
@@ -13,7 +13,7 @@ title:
 
 Autocomplete with remote ajax data.
 
-````__react
+````jsx
 import { Select } from 'antd';
 import jsonp from 'fetch-jsonp';
 import querystring from 'querystring';
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
index 1972cb2ff..c9c4ad503 100644
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -13,7 +13,7 @@ title:
 
 Search the options while expanded.
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index dedc53d1f..0697786ef 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 The height of the inpub field for the select defaults to 28px. If size is set to large, the height will be 32px, and if set to small, 22px.
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index 5bfbe6a65..a1e2ee8da 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -13,7 +13,7 @@ tags select，随意输入的内容（scroll the menu）
 
 Select with tags, transform input to tag (scroll the menu)
 
-````__react
+````jsx
 import { Select } from 'antd';
 const Option = Select.Option;
 
diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
index 68626139c..e0aaeda6c 100644
--- a/components/slider/demo/basic.md
+++ b/components/slider/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
 
-````__react
+````jsx
 import { Slider, Switch } from 'antd';
 
 class Demo extends React.Component {
diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md
index 14b5827f4..d8104cb8d 100644
--- a/components/slider/demo/event.md
+++ b/components/slider/demo/event.md
@@ -14,7 +14,7 @@ title:
 The `onChange` callback function will fire when the user changes the slider's value.
 The `onAfterChange` callback function will fire when `onmouseup` fired.
 
-````__react
+````jsx
 import { Slider } from 'antd';
 
 function onChange(value) {
diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
index 061ed01fb..aed803d06 100644
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@@ -13,7 +13,7 @@ title:
 
 You can add an icon beside the slider to make it meaningful.
 
-````__react
+````jsx
 import { Slider, Icon } from 'antd';
 
 const IconSlider = React.createClass({
diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md
index 4c3521724..76e5adc21 100644
--- a/components/slider/demo/input-number.md
+++ b/components/slider/demo/input-number.md
@@ -13,7 +13,7 @@ title:
 
 Synchronize with [InptNumber](/components/input-number/) component.
 
-````__react
+````jsx
 import { Slider, InputNumber, Row, Col } from 'antd';
 
 const IntegerStep = React.createClass({
diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
index 59262355f..bbccc5935 100644
--- a/components/slider/demo/mark.md
+++ b/components/slider/demo/mark.md
@@ -16,7 +16,7 @@ When `included` is false, means that different thumbs are coordinative.
 when `step` is null, users can only slide the thumbs onto marks.
 
 
-````__react
+````jsx
 import { Slider } from 'antd';
 
 const marks = {
diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md
index cef838cef..9d729db13 100644
--- a/components/slider/demo/tip-formatter.md
+++ b/components/slider/demo/tip-formatter.md
@@ -13,7 +13,7 @@ title:
 
 Use `tipFormatter` to format content of `Toolip`. If `tipFormatter` is null, hide it.
 
-````__react
+````jsx
 import { Slider } from 'antd';
 
 function formatter(value) {
diff --git a/components/slider/demo/vertical.md b/components/slider/demo/vertical.md
index feade2299..e6a972c40 100644
--- a/components/slider/demo/vertical.md
+++ b/components/slider/demo/vertical.md
@@ -13,7 +13,7 @@ title:
 
 The vertical Slider.
 
-````__react
+````jsx
 import { Slider } from 'antd';
 
 const style = {
diff --git a/components/spin/demo/basic.md b/components/spin/demo/basic.md
index 91b3ac11c..1307aa00e 100644
--- a/components/spin/demo/basic.md
+++ b/components/spin/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 A simple loading status.
 
-````__react
+````jsx
 import { Spin } from 'antd';
 
 ReactDOM.render(<Spin />, mountNode);
diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
index 497b9ca23..4972e2131 100644
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@@ -13,7 +13,7 @@ title:
 
 Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
 
-````__react
+````jsx
 import { Spin, Alert, Switch } from 'antd';
 
 const Card = React.createClass({
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
index d7e3a513f..147277770 100644
--- a/components/spin/demo/inside.md
+++ b/components/spin/demo/inside.md
@@ -13,7 +13,7 @@ title:
 
 Spin in a container.
 
-````__react
+````jsx
 import { Spin } from 'antd';
 
 ReactDOM.render(
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index 5c19ba0b4..bbdfd14a2 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -13,7 +13,7 @@ title:
 
 Embedding content into `Spin` will alter it into loading state.
 
-````__react
+````jsx
 import { Spin, Switch, Alert } from 'antd';
 
 const Card = React.createClass({
diff --git a/components/spin/demo/size.md b/components/spin/demo/size.md
index 9f438f357..b59dda1f6 100644
--- a/components/spin/demo/size.md
+++ b/components/spin/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.
 
-````__react
+````jsx
 import { Spin } from 'antd';
 
 ReactDOM.render(
diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md
index cce7e0c9b..517b58603 100644
--- a/components/spin/demo/tip.md
+++ b/components/spin/demo/tip.md
@@ -13,7 +13,7 @@ title:
 
 Customized description content.
 
-````__react
+````jsx
 import { Spin, Alert } from 'antd';
 
 ReactDOM.render(
diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md
index a90bffb4f..6f3e272c6 100644
--- a/components/steps/demo/customized-progress-dot.md
+++ b/components/steps/demo/customized-progress-dot.md
@@ -13,7 +13,7 @@ title:
 
 You can customize the display for Steps with progress dot style.
 
-````__react
+````jsx
 import { Steps, Popover } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md
index 12d079fec..eb75d968a 100644
--- a/components/steps/demo/error.md
+++ b/components/steps/demo/error.md
@@ -13,7 +13,7 @@ title:
 
 By using `status` of `Steps`, you can specify the state for current step.
 
-````__react
+````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md
index b6882c8b1..616744367 100644
--- a/components/steps/demo/icon.md
+++ b/components/steps/demo/icon.md
@@ -13,7 +13,7 @@ title:
 
 You can use your own custom icons by setting the property `icon` for `Steps.Step`.
 
-````__react
+````jsx
 import { Steps, Icon } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md
index 595240aa9..b2b9f2e48 100644
--- a/components/steps/demo/progress-dot.md
+++ b/components/steps/demo/progress-dot.md
@@ -13,7 +13,7 @@ title:
 
 Steps with progress dot style.
 
-````__react
+````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md
index f243dd00b..eddab2892 100644
--- a/components/steps/demo/simple.md
+++ b/components/steps/demo/simple.md
@@ -13,7 +13,7 @@ title:
 
 The most basic step bar.
 
-````__react
+````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md
index a9e17d378..abecad0e1 100644
--- a/components/steps/demo/small-size.md
+++ b/components/steps/demo/small-size.md
@@ -13,7 +13,7 @@ title:
 
 By setting like this: `<Steps size="small">`, you can get a mini version.
 
-````__react
+````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index d076e3857..5efc9d7fb 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -13,7 +13,7 @@ title:
 
 Cooperate with the content and buttons, to represent the progress of a process.
 
-````__react
+````jsx
 import { Steps, Button, message } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md
index eb4b15159..8446d52dd 100644
--- a/components/steps/demo/vertical-small.md
+++ b/components/steps/demo/vertical-small.md
@@ -13,7 +13,7 @@ title:
 
 A simple mini version step bar in the vertical direction.
 
-````__react
+````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md
index bbe6c1544..36f85f735 100644
--- a/components/steps/demo/vertical.md
+++ b/components/steps/demo/vertical.md
@@ -13,7 +13,7 @@ title:
 
 A simple step bar in the vertical direction.
 
-````__react
+````jsx
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
index 58fdc2bd2..37d01d02f 100644
--- a/components/switch/demo/basic.md
+++ b/components/switch/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The most basic usage.
 
-````__react
+````jsx
 import { Switch } from 'antd';
 
 function onChange(checked) {
diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md
index 221f71b2d..c7ce2543e 100644
--- a/components/switch/demo/disabled.md
+++ b/components/switch/demo/disabled.md
@@ -13,7 +13,7 @@ Switch 失效状态。
 
 Disabled state of `Switch`.
 
-````__react
+````jsx
 import { Switch, Button } from 'antd';
 
 const Test = React.createClass({
diff --git a/components/switch/demo/size.md b/components/switch/demo/size.md
index 40289345a..d1ef8ff8d 100644
--- a/components/switch/demo/size.md
+++ b/components/switch/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 `size="small"` represents a small sized switch.
 
-````__react
+````jsx
 import { Switch } from 'antd';
 
 ReactDOM.render(
diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md
index 6ec67c948..e10efcd26 100644
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@@ -13,7 +13,7 @@ title:
 
 With text and icon.
 
-````__react
+````jsx
 import { Switch, Icon } from 'antd';
 
 ReactDOM.render(<div>
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
index 9ba77efe8..47542eea8 100644
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@@ -19,7 +19,7 @@ This example shows how to fetch and present data from remote server, and how to
 
 **Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**
 
-````__react
+````jsx
 import { Table } from 'antd';
 import reqwest from 'reqwest';
 
diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md
index 17d15e28b..3d1e47f83 100644
--- a/components/table/demo/basic.md
+++ b/components/table/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Simple table with actions.
 
-````__react
+````jsx
 import { Table, Icon } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md
index e4022dc1d..f62973ee5 100644
--- a/components/table/demo/bordered.md
+++ b/components/table/demo/bordered.md
@@ -13,7 +13,7 @@ title:
 
 Add border, title and footer for table.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md
index dc6d78462..8d1d81826 100644
--- a/components/table/demo/colspan-rowspan.md
+++ b/components/table/demo/colspan-rowspan.md
@@ -17,7 +17,7 @@ Table column title supports `colSpan` that set in `column`.
 
 Table cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 // In the fifth row, other columns are merged into first column
diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
index be17768b2..c9d1bb810 100644
--- a/components/table/demo/custom-filter-panel.md
+++ b/components/table/demo/custom-filter-panel.md
@@ -13,7 +13,7 @@ title:
 
 Implement a customized column search example via `filterDropdown`, `filterDropdownVisible` and `filterDropdownVisibleChange`.
 
-````__react
+````jsx
 import { Table, Input, Button } from 'antd';
 
 const data = [{
diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md
index 654200f63..e2e2ac2d0 100644
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@@ -13,7 +13,7 @@ title:
 
 Select different settings to see the result.
 
-````__react
+````jsx
 import { Table, Icon, Switch, Radio, Form } from 'antd';
 const FormItem = Form.Item;
 
diff --git a/components/table/demo/edit-cell.md b/components/table/demo/edit-cell.md
index e2aafbe97..e580f1772 100644
--- a/components/table/demo/edit-cell.md
+++ b/components/table/demo/edit-cell.md
@@ -13,7 +13,7 @@ title:
 
 Table with editable cells.
 
-````__react
+````jsx
 import { Table, Input, Icon, Button, Popconfirm } from 'antd';
 
 class EditableCell extends React.Component {
diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md
index 17c84d0f5..684d9ccf3 100644
--- a/components/table/demo/edit-row.md
+++ b/components/table/demo/edit-row.md
@@ -13,7 +13,7 @@ title:
 
 Table with editable rows.
 
-````__react
+````jsx
 import { Table, Input, Popconfirm } from 'antd';
 
 class EditableCell extends React.Component {
diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md
index e3bf255be..49ece808c 100644
--- a/components/table/demo/expand-children.md
+++ b/components/table/demo/expand-children.md
@@ -17,7 +17,7 @@ Display tree structure data in Table, control the indent width by setting `inden
 
 > Note, no support for recursive selection of tree structure data table yet.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md
index eace02fc1..3049c34ab 100644
--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@@ -13,7 +13,7 @@ title:
 
 When there's too much information to show and the table can't display all at once.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [
diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md
index 1176397b1..3d99ef724 100644
--- a/components/table/demo/fixed-columns-header.md
+++ b/components/table/demo/fixed-columns-header.md
@@ -21,7 +21,7 @@ Suitable for large amounts of data with long columns.
 
 > A fixed width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [
diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md
index 40a093b9a..1f8b3ed85 100644
--- a/components/table/demo/fixed-columns.md
+++ b/components/table/demo/fixed-columns.md
@@ -21,7 +21,7 @@ Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile.
 
 > A fixed width for `scroll.x` is recommended.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [
diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md
index d5b7d272b..5b02f7c61 100644
--- a/components/table/demo/fixed-header.md
+++ b/components/table/demo/fixed-header.md
@@ -17,7 +17,7 @@ Display large amounts of data in scrollable view.
 
 > Specify the width of each column if header and cell do not align properly.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md
index bccfc8d91..e0e033f6b 100644
--- a/components/table/demo/grouping-columns.md
+++ b/components/table/demo/grouping-columns.md
@@ -13,7 +13,7 @@ title:
 
 Group table head with `columns[n].children`.
 
-```__react
+```jsx
 import { Table } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/head.md b/components/table/demo/head.md
index 4bda41d32..00d76afb0 100644
--- a/components/table/demo/head.md
+++ b/components/table/demo/head.md
@@ -17,7 +17,7 @@ Use `filters` to generate filter menu in columns, `onFilter` to determine filter
 
 Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/jsx.md b/components/table/demo/jsx.md
index 9d458b72b..5e4d74847 100644
--- a/components/table/demo/jsx.md
+++ b/components/table/demo/jsx.md
@@ -17,7 +17,7 @@ Using JSX style API (introduced in 2.5.0)
 
 > Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.
 
-````__react
+````jsx
 import { Table, Icon } from 'antd';
 
 const { Column, ColumnGroup } = Table;
diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md
index 02b4e96a5..1d25d68df 100644
--- a/components/table/demo/paging.md
+++ b/components/table/demo/paging.md
@@ -13,7 +13,7 @@ title:
 
 The pagination in table could be configured with an object, and you can use `pagination={false}` to turn off pagination.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md
index f6f316869..43606cc5e 100644
--- a/components/table/demo/reset-filter.md
+++ b/components/table/demo/reset-filter.md
@@ -21,7 +21,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
 > 2. Make sure `sortOrder` is assigned for only one column.
 > 3. `column.key` is required.
 
-````__react
+````jsx
 import { Table, Button } from 'antd';
 
 const data = [{
diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md
index 20b3cedef..9bb40d93c 100644
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@@ -14,7 +14,7 @@ title:
 To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
 
 
-````__react
+````jsx
 import { Table, Button } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md
index bcf72e9cf..ec20cb0a1 100644
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@@ -13,7 +13,7 @@ title:
 
 Rows can be selectable by making first column as a selectable column.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [{
diff --git a/components/table/demo/size.md b/components/table/demo/size.md
index 6fddcaf49..44bd49534 100644
--- a/components/table/demo/size.md
+++ b/components/table/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 Two compacted table size: `middle` and `small`, `small` size is used in Modal only.
 
-````__react
+````jsx
 import { Table } from 'antd';
 
 const columns = [{
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md
index 8dea07fac..2862b961e 100644
--- a/components/tabs/demo/basic.md
+++ b/components/tabs/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Default activate first tab.
 
-````__react
+````jsx
 import { Tabs } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index ff3e7a040..b1c9220b5 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -13,7 +13,7 @@ title:
 
 Should be used at the top of container, needs to override styles.
 
-````__react
+````jsx
 import { Tabs } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
index c61c04fb4..debed6cb1 100644
--- a/components/tabs/demo/card.md
+++ b/components/tabs/demo/card.md
@@ -14,7 +14,7 @@ title:
 Another type Tabs, which doesn't support vertical mode.
 
 
-````__react
+````jsx
 import { Tabs } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md
index af3d12c46..a81b2ba84 100644
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@@ -13,7 +13,7 @@ title:
 Hide default plus icon, and bind event for customized trigger.
 
 
-````__react
+````jsx
 import { Tabs, Button } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md
index 9b35220de..5e06d2c28 100644
--- a/components/tabs/demo/disabled.md
+++ b/components/tabs/demo/disabled.md
@@ -13,7 +13,7 @@ title:
 
 Disabled a tab.
 
-````__react
+````jsx
 import { Tabs } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index 293559d4a..d57ed4755 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -13,7 +13,7 @@ title:
 
 Only card type Tabs support adding & closeable.
 
-````__react
+````jsx
 import { Tabs } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
index 2c37e353d..9d4836957 100644
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@@ -14,7 +14,7 @@ title:
 You can add extra actions to the right of Tabs.
 
 
-````__react
+````jsx
 import { Tabs, Button } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md
index 56f24f8d6..2e9073ac5 100644
--- a/components/tabs/demo/icon.md
+++ b/components/tabs/demo/icon.md
@@ -14,7 +14,7 @@ title:
 The Tab with Icon.
 
 
-````__react
+````jsx
 import { Tabs, Icon } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md
index 60da6c1f4..26fd1894e 100644
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@@ -13,7 +13,7 @@ title:
 
 Tab's position: left, right, top or bottom.
 
-````__react
+````jsx
 import { Tabs, Select } from 'antd';
 const TabPane = Tabs.TabPane;
 const Option = Select.Option;
diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md
index a85b65352..e62953936 100644
--- a/components/tabs/demo/size.md
+++ b/components/tabs/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 Small size can be used in Modal.
 
-````__react
+````jsx
 import { Tabs } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index d15b002cd..8a6491345 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -13,7 +13,7 @@ title:
 
 Tab can be slide to left or right, which is used for a lot of tabs.
 
-````__react
+````jsx
 import { Tabs } from 'antd';
 const TabPane = Tabs.TabPane;
 
diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md
index 7e11b1754..252255842 100644
--- a/components/tag/demo/basic.md
+++ b/components/tag/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events.
 
-````__react
+````jsx
 import { Tag } from 'antd';
 
 function log(e) {
diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md
index 1b3f23a5e..fd04012b3 100644
--- a/components/tag/demo/checkable.md
+++ b/components/tag/demo/checkable.md
@@ -13,7 +13,7 @@ title:
 
 Tag.CheckableTag works like Checkbox, and it is an absolute controlled component and has no uncontrolled mode.
 
-````__react
+````jsx
 import { Tag } from 'antd';
 const CheckableTag = Tag.CheckableTag;
 
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
index ede37d778..ed9f75e6d 100644
--- a/components/tag/demo/colorful.md
+++ b/components/tag/demo/colorful.md
@@ -18,7 +18,7 @@ And you can always set it to a hex color string for custom color.
 
 > Preset colors are supported after `antd@2.7.0`.
 
-````__react
+````jsx
 import { Tag } from 'antd';
 
 ReactDOM.render(
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
index b227ad81a..262e14905 100644
--- a/components/tag/demo/control.md
+++ b/components/tag/demo/control.md
@@ -14,7 +14,7 @@ title:
 Generating a set of Tags by array, you can add and remove dynamically.
 It's based on `afterClose` event, which will be triggered while the close animation end.
 
-````__react
+````jsx
 import { Tag, Input, Tooltip, Button } from 'antd';
 
 class EditableTagGroup extends React.Component {
diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md
index 5358805cb..1e1d26fb2 100644
--- a/components/tag/demo/hot-tags.md
+++ b/components/tag/demo/hot-tags.md
@@ -13,7 +13,7 @@ title:
 
 Select your favourite topics.
 
-````__react
+````jsx
 import { Tag } from 'antd';
 const CheckableTag = Tag.CheckableTag;
 
diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md
index 66514c7e5..40c53512c 100644
--- a/components/time-picker/demo/addon.md
+++ b/components/time-picker/demo/addon.md
@@ -13,7 +13,7 @@ title:
 
 Render addon contents to timepicker panel's bottom.
 
-````__react
+````jsx
 import { TimePicker, Button } from 'antd';
 
 ReactDOM.render(
diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md
index a9ff14a27..118df8f67 100644
--- a/components/time-picker/demo/basic.md
+++ b/components/time-picker/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Click `TimePicker`, and then we could select or input a time in panel.
 
-````__react
+````jsx
 import { TimePicker } from 'antd';
 
 function onChange(time, timeString) {
diff --git a/components/time-picker/demo/disable-options.md b/components/time-picker/demo/disable-options.md
index 5bb2c0b0f..e130a9c46 100644
--- a/components/time-picker/demo/disable-options.md
+++ b/components/time-picker/demo/disable-options.md
@@ -12,7 +12,7 @@ title:
 
 Make part of time unselectable by `disabledHours` `disabledMinutes` `disabledSeconds`, and we even can hide those unselectable options by `hideDisabledOptions`.
 
-````__react
+````jsx
 import { TimePicker } from 'antd';
 
 function range(start, end) {
diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md
index 0c5f2d2d1..9da9857bf 100644
--- a/components/time-picker/demo/disabled.md
+++ b/components/time-picker/demo/disabled.md
@@ -14,7 +14,7 @@ title:
 A disabled state of the `TimePicker`.
 
 
-````__react
+````jsx
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md
index 5089d7544..69595e0cf 100644
--- a/components/time-picker/demo/hide-column.md
+++ b/components/time-picker/demo/hide-column.md
@@ -13,7 +13,7 @@ TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的
 
 While part of `format` is omitted, the corresponding column in panel will disappear, too.
 
-````__react
+````jsx
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md
index 7900acdd2..39e1e14a3 100644
--- a/components/time-picker/demo/size.md
+++ b/components/time-picker/demo/size.md
@@ -13,7 +13,7 @@ title:
 
 The input box comes in three sizes. large is used in the form, while the medium size is the default.
 
-````__react
+````jsx
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md
index 8862d7417..eaf13f83c 100644
--- a/components/time-picker/demo/value.md
+++ b/components/time-picker/demo/value.md
@@ -13,7 +13,7 @@ value 和 onChange 需要配合使用。
 
 `value` and `onChange` should be used together,
 
-````__react
+````jsx
 import { TimePicker } from 'antd';
 
 class Demo extends React.Component {
diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md
index ad889e26b..365a080a8 100644
--- a/components/timeline/demo/basic.md
+++ b/components/timeline/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Basic timeline.
 
-````__react
+````jsx
 import { Timeline } from 'antd';
 
 ReactDOM.render(
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index 4e86bb8be..dd8d2d14f 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -13,7 +13,7 @@ title:
 
 Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
 
-````__react
+````jsx
 import { Timeline } from 'antd';
 
 ReactDOM.render(
diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md
index dae06b0f0..39b73d9cd 100644
--- a/components/timeline/demo/custom.md
+++ b/components/timeline/demo/custom.md
@@ -13,7 +13,7 @@ title:
 
 Set a node as an icon or other custom element.
 
-````__react
+````jsx
 import { Timeline, Icon } from 'antd';
 
 ReactDOM.render(
diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md
index 5c3085805..2f7c2b6b2 100644
--- a/components/timeline/demo/pending.md
+++ b/components/timeline/demo/pending.md
@@ -13,7 +13,7 @@ title:
 
 When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a React Element}`。
 
-````__react
+````jsx
 import { Timeline } from 'antd';
 
 ReactDOM.render(
diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md
index ec9e5e35f..c0fea126b 100644
--- a/components/tooltip/demo/arrow-point-at-center.md
+++ b/components/tooltip/demo/arrow-point-at-center.md
@@ -13,7 +13,7 @@ title:
 
 By specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element.
 
-````__react
+````jsx
 import { Tooltip, Button } from 'antd';
 
 ReactDOM.render(
diff --git a/components/tooltip/demo/basic.md b/components/tooltip/demo/basic.md
index bb4887024..356223f58 100644
--- a/components/tooltip/demo/basic.md
+++ b/components/tooltip/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The simplest usage.
 
-````__react
+````jsx
 import { Tooltip } from 'antd';
 
 ReactDOM.render(
diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md
index 27ed92abd..8d7b9d090 100644
--- a/components/tooltip/demo/placement.md
+++ b/components/tooltip/demo/placement.md
@@ -13,7 +13,7 @@ title:
 
 The ToolTip has 12 placements choice.
 
-````__react
+````jsx
 import { Tooltip } from 'antd';
 const text = <span>prompt text</span>;
 
diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md
index 4141035a0..e6178d35f 100644
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@@ -15,7 +15,7 @@ Advanced Usage of Transfer.
 
 You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
 
-````__react
+````jsx
 import { Transfer, Button } from 'antd';
 
 const App = React.createClass({
diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
index 9455b66a6..ff4ae5fac 100644
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and change callback functions.
 
-````__react
+````jsx
 import { Transfer } from 'antd';
 
 const mockData = [];
diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md
index 5b6970d8d..dc0ce24c0 100644
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@@ -13,7 +13,7 @@ title:
 
 Custom each Transfer Item, and in this way you can render a complex datasource.
 
-````__react
+````jsx
 import { Transfer } from 'antd';
 
 const App = React.createClass({
diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md
index ed29d2b22..090eba226 100644
--- a/components/transfer/demo/large-data.md
+++ b/components/transfer/demo/large-data.md
@@ -14,7 +14,7 @@ title:
 
 2000 items.
 
-````__react
+````jsx
 import { Transfer } from 'antd';
 
 const App = React.createClass({
diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md
index a6a65625e..a9a02df8c 100644
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@@ -13,7 +13,7 @@ title:
 
 Transfer with a search box.
 
-````__react
+````jsx
 import { Transfer } from 'antd';
 
 const App = React.createClass({
diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md
index af80022e4..913c1d6a7 100644
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The most basic usage.
 
-````__react
+````jsx
 import { TreeSelect } from 'antd';
 const TreeNode = TreeSelect.TreeNode;
 
diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md
index a82a960e6..81d86140e 100644
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@@ -13,7 +13,7 @@ title:
 
 Multiple and checkable.
 
-````__react
+````jsx
 import { TreeSelect } from 'antd';
 const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 
diff --git a/components/tree-select/demo/treeData.md b/components/tree-select/demo/treeData.md
index 827b4d0ae..327a0a28b 100644
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@@ -14,7 +14,7 @@ title:
 The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content.
 
 
-````__react
+````jsx
 import { TreeSelect } from 'antd';
 
 const treeData = [{
diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md
index d85a2df7b..16c3851ff 100644
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@@ -13,7 +13,7 @@ title:
 
 basic controlled example
 
-````__react
+````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md
index b1d42fda8..aef36c976 100644
--- a/components/tree/demo/basic.md
+++ b/components/tree/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
 
-````__react
+````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md
index 8919682e9..8a1649f1d 100644
--- a/components/tree/demo/draggable.md
+++ b/components/tree/demo/draggable.md
@@ -13,7 +13,7 @@ title:
 
 Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
 
-````__react
+````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md
index 18dd400b5..6ac062350 100644
--- a/components/tree/demo/dynamic.md
+++ b/components/tree/demo/dynamic.md
@@ -13,7 +13,7 @@ title:
 
 To load data asynchronously when click to expand a treeNode.
 
-````__react
+````jsx
 import { Tree } from 'antd';
 const TreeNode = Tree.TreeNode;
 
diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md
index 6ceda0b66..60460d137 100644
--- a/components/tree/demo/search.md
+++ b/components/tree/demo/search.md
@@ -13,7 +13,7 @@ title:
 
 Searchable Tree.
 
-````__react
+````jsx
 import { Tree, Input } from 'antd';
 
 const TreeNode = Tree.TreeNode;
diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md
index 40bd072da..9d00208e6 100644
--- a/components/upload/demo/avatar.md
+++ b/components/upload/demo/avatar.md
@@ -17,7 +17,7 @@ Click to upload user's avatar, and validate size and format of picture with `bef
 
 > The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](http://react-component.github.io/upload/examples/beforeUpload.html)
 
-````__react
+````jsx
 import { Upload, Icon, message } from 'antd';
 
 function getBase64(img, callback) {
diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md
index 8c163c5b2..975b7a0c8 100644
--- a/components/upload/demo/basic.md
+++ b/components/upload/demo/basic.md
@@ -13,7 +13,7 @@ title:
 
 Classic mode. File selection dialog pops up when upload button is clicked 
 
-````__react
+````jsx
 import { Upload, message, Button, Icon } from 'antd';
 
 const props = {
diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md
index 8c48fd403..f0995c8e3 100644
--- a/components/upload/demo/defaultFileList.md
+++ b/components/upload/demo/defaultFileList.md
@@ -14,7 +14,7 @@ title:
 Edit uploaded files
 
 
-````__react
+````jsx
 import { Upload, Button, Icon } from 'antd';
 
 const props = {
diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md
index 175e6e0ef..4a21db9e7 100644
--- a/components/upload/demo/drag.md
+++ b/components/upload/demo/drag.md
@@ -17,7 +17,7 @@ You can drag files to a specific area, to upload. Alternatively, you can also up
 
 We can upload serveral files at once in modern browsers by giving the input the `multiple` attribute.
 
-````__react
+````jsx
 import { Upload, Icon, message } from 'antd';
 const Dragger = Upload.Dragger;
 
diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md
index e1bdbdf12..876e314d7 100644
--- a/components/upload/demo/fileList.md
+++ b/components/upload/demo/fileList.md
@@ -25,7 +25,7 @@ You can gain full control over filelist by configuring `fileList`. You can accom
 
 3) filter successfully uploaded files according to response from server.
 
-````__react
+````jsx
 import { Upload, Button, Icon } from 'antd';
 
 const MyUpload = React.createClass({
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index 1ba0a67ab..080d25503 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -13,7 +13,7 @@ title:
 
 After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
 
-````__react
+````jsx
 import { Upload, Icon, Modal } from 'antd';
 
 class PicturesWall extends React.Component {
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index dd8bd0b74..6bdfc2ddd 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -14,7 +14,7 @@ title:
 If uploade file is picture, a thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
 
 
-````__react
+````jsx
 import { Upload, Button, Icon } from 'antd';
 
 const props = {
diff --git a/docs/spec/layout/demo/aside-collapse.md b/docs/spec/layout/demo/aside-collapse.md
index 6fa9dd661..6216bb0ec 100644
--- a/docs/spec/layout/demo/aside-collapse.md
+++ b/docs/spec/layout/demo/aside-collapse.md
@@ -13,7 +13,7 @@ title:
 
 This pattern is used when the horizontal space is limited. By default, Aside navigation is collapsed. You can click the button at the bottom to expand it.
 
-````__react
+````jsx
 import { Menu, Breadcrumb, Icon } from 'antd';
 import BrowserDemo from 'site/theme/template/BrowserDemo';
 const SubMenu = Menu.SubMenu;
diff --git a/docs/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md
index e106be0fe..7f43b3cf9 100644
--- a/docs/spec/layout/demo/aside.md
+++ b/docs/spec/layout/demo/aside.md
@@ -19,7 +19,7 @@ A left-right structure of page layouts is used to Aside navigation, Generally, t
 
 The level of the aisde 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.
 
-````__react
+````jsx
 import { Menu, Breadcrumb, Icon } from 'antd';
 import BrowserDemo from 'site/theme/template/BrowserDemo';
 const SubMenu = Menu.SubMenu;
diff --git a/docs/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md
index 1f43b02fa..dc965d6b5 100644
--- a/docs/spec/layout/demo/ceiling.md
+++ b/docs/spec/layout/demo/ceiling.md
@@ -16,7 +16,7 @@ Generally, ceiling is used for cross system/applications, where you can put unif
 
 Background color of a ceiling is a dark color, height is `30px`, and a light color foreground for the mainnav should be used.
 
-````__react
+````jsx
 import { Menu, Breadcrumb } from 'antd';
 import BrowserDemo from 'site/theme/template/BrowserDemo';
 
diff --git a/docs/spec/layout/demo/top-aside.md b/docs/spec/layout/demo/top-aside.md
index 7b2924089..5485b9e16 100644
--- a/docs/spec/layout/demo/top-aside.md
+++ b/docs/spec/layout/demo/top-aside.md
@@ -13,7 +13,7 @@ title:
 
 The top navigation is placed on the top, and the secondary navigation is placed on the aside.
 
-````__react
+````jsx
 import { Menu, Breadcrumb, Icon } from 'antd';
 import BrowserDemo from 'site/theme/template/BrowserDemo';
 const SubMenu = Menu.SubMenu;
diff --git a/docs/spec/layout/demo/top.md b/docs/spec/layout/demo/top.md
index 9e032b5fd..0890dbfaa 100644
--- a/docs/spec/layout/demo/top.md
+++ b/docs/spec/layout/demo/top.md
@@ -23,7 +23,7 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
 
 > `<BrowserDemo />` This is for demo, don't need to copy.
 
-````__react
+````jsx
 import { Menu, Breadcrumb } from 'antd';
 import BrowserDemo from 'site/theme/template/BrowserDemo';
 
diff --git a/package.json b/package.json
index daae35dad..b0d5a6bd0 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "bisheng": "^0.21.0",
-    "bisheng-plugin-antd": "^0.10.0",
+    "bisheng-plugin-antd": "^0.11.0",
     "bisheng-plugin-description": "^0.1.1",
     "bisheng-plugin-react": "^0.4.0",
     "bisheng-plugin-toc": "^0.4.0",