docs: update docs format

components/affix/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 The simplest usage.
 
-````__react
+````jsx
 import { Affix, Button } from 'antd';
 
 ReactDOM.render(

components/affix/demo/on-change.md

@@ -13,7 +13,7 @@ title:
 
 Callback with affixed state.
 
-````__react
+````jsx
 import { Affix, Button } from 'antd';
 
 ReactDOM.render(

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 {

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(

components/alert/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 The simplest usage for short messages.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(

components/alert/demo/closable.md

@@ -13,7 +13,7 @@ title:
 
 To show close button.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 const onClose = function (e) {

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(

components/alert/demo/description.md

@@ -13,7 +13,7 @@ title:
 
 Additional description for alert message.
 
-````__react
+````jsx
 import { Alert } from 'antd';
 
 ReactDOM.render(<div>

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>

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>

components/anchor/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 The simplest usage.
 
-```__react
+```jsx
 import { Anchor } from 'antd';
 const { Link } = Anchor;
 

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;
 

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>
+`;

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>
     );
   },

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) {

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;

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}>
+  return (
-    {item.query} 在
+    <Option key={item.category} text={item.category}>
-    <a href={`https://s.taobao.com/search?q=${item.query}`} target="_blank">{item.category}</a> 区块中
+      {item.query} 在
-    <span style={{float: 'right'}}>约 {item.count} 个结果</span>
+      <a
-  </Option>;
+        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">
+          <Input
-            <Icon type="search" />
+            suffix={(
-          </Button>} />
+              <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;
 }
-````
+````

components/back-top/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 The most basic usage.
 
-````__react
+````jsx
 import { BackTop } from 'antd';
 
 ReactDOM.render(

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(

components/badge/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 Simplest Usage.
 
-````__react
+````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(

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;
 

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>

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(

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>

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>

components/badge/demo/status.md

@@ -13,7 +13,7 @@ title:
 
 Standalone badge with status.
 
-````__react
+````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(

components/breadcrumb/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 The simplest use
 
-````__react
+````jsx
 import { Breadcrumb } from 'antd';
 
 ReactDOM.render(

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';
 

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(

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(

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(

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;
 

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(

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(

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(

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({

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) {

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 {

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) {

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) {

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';

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) {

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(

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(

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(

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(

components/card/demo/no-padding.md

@@ -14,7 +14,7 @@ title:
 Customizing default width and margin.
 
 
-````__react
+````jsx
 import { Card } from 'antd';
 
 ReactDOM.render(

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(

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(

components/carousel/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 Basic usage.
 
-````__react
+````jsx
 import { Carousel } from 'antd';
 
 function onChange(a, b, c) {

components/carousel/demo/fade.md

@@ -13,7 +13,7 @@ title:
 
 Slides use fade for transition.
 
-````__react
+````jsx
 import { Carousel } from 'antd';
 
 ReactDOM.render(

components/carousel/demo/vertical.md

@@ -13,7 +13,7 @@ title:
 
 Vertical pagination.
 
-````__react
+````jsx
 import { Carousel } from 'antd';
 
 ReactDOM.render(

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 = [{

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 = [{

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 = [{

components/cascader/demo/custom-trigger.md

@@ -13,7 +13,7 @@ title:
 
 Separate trigger button and result.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{

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 = [{

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 = [{

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 = [{

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 = [{

components/cascader/demo/search.md

@@ -13,7 +13,7 @@ title:
 
 Search and select options directly.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{

components/cascader/demo/size.md

@@ -13,7 +13,7 @@ title:
 
 Cascade selection box of different sizes.
 
-````__react
+````jsx
 import { Cascader } from 'antd';
 
 const options = [{

components/checkbox/demo/basic.md

@@ -13,7 +13,7 @@ title:
 
 Basic usage of checkbox.
 
-````__react
+````jsx
 import { Checkbox } from 'antd';
 
 function onChange(e) {

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;
 

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({

components/checkbox/demo/disabled.md

@@ -13,7 +13,7 @@ checkbox 不可用。
 
 Disabled checkbox.
 
-````__react
+````jsx
 import { Checkbox } from 'antd';
 
 ReactDOM.render(<div>

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;
 

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;
 

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;
 

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;
 

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;
 

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;
 

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;
 

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;
 

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;

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;

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';

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;

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;
 

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 {

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;
 

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 = (

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) {

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}`);

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 = (

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({

components/dropdown/demo/placement.md

@@ -13,7 +13,7 @@ title:
 
 Support 6 placements.
 
-````__react
+````jsx
 import { Menu, Dropdown, Button } from 'antd';
 
 const menu = (

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;
 

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 = (

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;
 

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;

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;

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;
 

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;
 

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;
 

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;
 

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;
 

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;
 

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;

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;