diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
index 17ed3b6ee..c7173d720 100644
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -8,7 +8,7 @@
 The simplest usage.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-affix :offsetTop="this.top">
diff --git a/components/affix/demo/on-change.md b/components/affix/demo/on-change.md
index ce89054b1..589d660e6 100644
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -8,7 +8,7 @@
 Callback with affixed state.
 </us>
 
-```html
+```tpl
 <template>
   <a-affix :offsetTop="120" @change="change">
     <a-button>120px to affix top</a-button>
diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md
index 3950d6e90..8be0f4d12 100644
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@@ -8,7 +8,7 @@
 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-affix-demo-target" class="scrollable-container" ref="container">
     <div class="background">
diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
index 0d92ada72..0ed003323 100644
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -8,7 +8,7 @@
 Display Alert as a banner at top of page.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-alert message="Warning text" banner />
diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
index d3e81b4cf..d6ed1180e 100644
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -8,7 +8,7 @@
 The simplest usage for short messages.
 </us>
 
-```html
+```tpl
 <template>
   <a-alert message="Success Text" type="success" />
 </template>
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
index c06ef1fc9..332d391f7 100644
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -8,7 +8,7 @@
 To show close button.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-alert
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
index 06516026e..54388702a 100644
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@@ -8,7 +8,7 @@
 Replace the default icon with customized text.
 </us>
 
-```html
+```tpl
 <template>
   <a-alert message="Info Text" type="info" closeText="Close Now" />
 </template>
diff --git a/components/alert/demo/custom-icon.md b/components/alert/demo/custom-icon.md
index b26ede4dd..c2b74e20a 100644
--- a/components/alert/demo/custom-icon.md
+++ b/components/alert/demo/custom-icon.md
@@ -8,7 +8,7 @@
 Decent icon make information more clear and more friendly.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-alert message="showIcon = false" type="success">
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
index 07f264ed4..0dbfac2d3 100644
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -8,7 +8,7 @@
 Additional description for alert message.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-alert message="Success Text" type="success">
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
index 68f32c6e7..72dfa689f 100644
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -8,7 +8,7 @@
 Decent icon make information more clear and more friendly.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-alert message="Success Tips" type="success" showIcon />
diff --git a/components/alert/demo/smooth-closed.md b/components/alert/demo/smooth-closed.md
index 484f4c949..ba9bbeafe 100644
--- a/components/alert/demo/smooth-closed.md
+++ b/components/alert/demo/smooth-closed.md
@@ -8,7 +8,7 @@
 Smoothly and unaffectedly unmount Alert.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-alert
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
index 47a111bf3..2e416527d 100644
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -8,7 +8,7 @@
 There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-alert message="Success Text" type="success" />
diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md
index 9f8f44b66..be91e4374 100644
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@@ -8,7 +8,7 @@
 The simplest usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-anchor>
     <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
diff --git a/components/anchor/demo/onClick.md b/components/anchor/demo/onClick.md
index 957d1cc42..9fbd19015 100644
--- a/components/anchor/demo/onClick.md
+++ b/components/anchor/demo/onClick.md
@@ -8,7 +8,7 @@
 Clicking on an anchor does not record history.
 </us>
 
-```html
+```tpl
 <template>
   <a-anchor :affix="false" @click="handleClick">
     <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
diff --git a/components/anchor/demo/static.md b/components/anchor/demo/static.md
index 6472abe5d..a071d7c00 100644
--- a/components/anchor/demo/static.md
+++ b/components/anchor/demo/static.md
@@ -8,7 +8,7 @@
 Do not change state when page is scrolling.
 </us>
 
-```html
+```tpl
 <template>
   <a-anchor :affix="false">
     <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
diff --git a/components/auto-complete/demo/basic.md b/components/auto-complete/demo/basic.md
index d2aabf04e..2c2317194 100644
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@@ -8,7 +8,7 @@
 Basic Usage, set datasource of autocomplete with `dataSource` property.
 </us>
 
-```html
+```tpl
 <template>
   <a-auto-complete
     :dataSource="dataSource"
diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index a2bc28efa..930398dd0 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -8,7 +8,7 @@
 Lookup-Patterns - Certain Category
 </us>
 
-```html
+```tpl
 <template>
   <div class="certain-category-search-wrapper" style="width: 250px">
     <a-auto-complete
diff --git a/components/auto-complete/demo/custom.md b/components/auto-complete/demo/custom.md
index 955afa90c..486c1d465 100644
--- a/components/auto-complete/demo/custom.md
+++ b/components/auto-complete/demo/custom.md
@@ -8,7 +8,7 @@
 Customize Input Component
 </us>
 
-```html
+```tpl
 <template>
   <a-auto-complete
     :dataSource="dataSource"
diff --git a/components/auto-complete/demo/non-case-sensitive.md b/components/auto-complete/demo/non-case-sensitive.md
index 21981d958..a40396e7d 100644
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@@ -8,7 +8,7 @@
 A non-case-sensitive AutoComplete
 </us>
 
-```html
+```tpl
 <template>
   <a-auto-complete
     :dataSource="dataSource"
diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md
index 0db247376..51f012c56 100644
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@@ -8,7 +8,7 @@
 You could pass `slot="dataSource` as children of `AutoComplete`, instead of using `dataSource`。
 </us>
 
-```html
+```tpl
 <template>
   <a-auto-complete style="width: 200px" @search="handleSearch" placeholder="input here">
     <template slot="dataSource">
diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md
index 74a3dd205..ee29a0031 100644
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -8,7 +8,7 @@
 Lookup-Patterns - Uncertain Category
 </us>
 
-```html
+```tpl
 <template>
   <div class="global-search-wrapper" style="width: 300px">
     <a-auto-complete
diff --git a/components/avatar/demo/badge.md b/components/avatar/demo/badge.md
index 63cc0a452..9ab7a7c73 100644
--- a/components/avatar/demo/badge.md
+++ b/components/avatar/demo/badge.md
@@ -8,7 +8,7 @@
 Usually used for messages remind.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <span style="margin-right:24px">
diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md
index 5dc18e8d2..dc817bd37 100644
--- a/components/avatar/demo/basic.md
+++ b/components/avatar/demo/basic.md
@@ -8,7 +8,7 @@
 Three sizes and two shapes are available.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div>
diff --git a/components/avatar/demo/dynamic.md b/components/avatar/demo/dynamic.md
index ffb12b576..31af04e36 100644
--- a/components/avatar/demo/dynamic.md
+++ b/components/avatar/demo/dynamic.md
@@ -8,7 +8,7 @@
 For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-avatar shape="square" size="large" :style="{backgroundColor: color, verticalAlign: 'middle'}"
diff --git a/components/avatar/demo/type.md b/components/avatar/demo/type.md
index 554310570..ffcae27ac 100644
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@@ -8,7 +8,7 @@
 Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-avatar icon="user" />
diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md
index c129eea17..41960a745 100644
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -8,7 +8,7 @@
 The most basic usage.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-back-top />
diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md
index f7691cc87..9be58a6ea 100644
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -8,7 +8,7 @@
 You can customize the style of the button, just note the size limit: no more than `40px * 40px`.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-back-top-demo-custom">
     <a-back-top>
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index c7c67d288..4cba8e4dc 100644
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -8,7 +8,7 @@
 Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-badge count="5">
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index dbaadc63c..3160f5760 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -8,7 +8,7 @@
   The count will be animated as it changes.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div>
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index 376b97271..c17164432 100644
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -9,7 +9,7 @@ This will simply display a red badge, without a specific count.
 If count equals 0, it won't display the dot.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-badge-demo-dot">
     <a-badge dot>
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index efb8c3ae6..482ea70af 100644
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -8,7 +8,7 @@
   The badge can be wrapped with `a` tag to make it linkable.
 </us>
 
-```html
+```tpl
 <template>
   <a href="#">
     <a-badge count="5">
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index 850d98875..76e5d4d85 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -9,7 +9,7 @@
 Used in standalone when children is empty.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-badge count="25" />
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index 0a23162b9..751f3c270 100644
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -8,7 +8,7 @@
 `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-badge :count="99">
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
index 9ec4f91cc..c74a6908e 100644
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -8,7 +8,7 @@
   Standalone badge with status.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-badge status="success" />
diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md
index b86863bd7..03059af10 100644
--- a/components/badge/demo/title.md
+++ b/components/badge/demo/title.md
@@ -8,7 +8,7 @@
   The badge will display `title` when hovered over, instead of `count`.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-badge-demo-title">
     <a-badge :count="5" title="Custom hover text">
diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md
index aa6e4fc21..03b56dc27 100644
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -8,7 +8,7 @@
   The simplest use
 </us>
 
-```html
+```tpl
 <template>
   <a-breadcrumb>
     <a-breadcrumb-item>Home</a-breadcrumb-item>
diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md
index 3ddc510e3..82a1ebe1b 100644
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -8,7 +8,7 @@
 Used together with `vue-router`
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-breadcrumb :routes="routes">
diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md
index 426f1e0d7..1d7917857 100644
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@@ -9,7 +9,7 @@
   slot="separator"
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-breadcrumb separator=">">
diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md
index 62b1ed914..fee1aea73 100644
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@@ -8,7 +8,7 @@
  The icon should be placed in front of the text
 </us>
 
-```html
+```tpl
 <template>
   <a-breadcrumb>
     <a-breadcrumb-item href="">
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index d5f0c8364..a67dfafec 100644
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -8,7 +8,7 @@
 There are `primary` button, `default` button, `dashed` button and `danger` button and `link` button in antd.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary">Primary</a-button>
diff --git a/components/button/demo/block.md b/components/button/demo/block.md
index d1c3c5d60..f2cd80d2d 100644
--- a/components/button/demo/block.md
+++ b/components/button/demo/block.md
@@ -8,7 +8,7 @@
 `block` property will make the button fit to its parent width.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" block>Primary</a-button>
diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md
index 798b2e98c..27341ef20 100644
--- a/components/button/demo/button-group.md
+++ b/components/button/demo/button-group.md
@@ -10,7 +10,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.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-button-demo-button-group">
     <h4>Basic</h4>
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
index dc9d2bec7..6de8c574c 100644
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -8,7 +8,7 @@
 To mark a button as disabled, add the `disabled` property to the `Button`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary">Primary</a-button>
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index aaeaa376e..af9526815 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -8,7 +8,7 @@
 `ghost` property will make button's background transparent, it is common used in colored background.
 </us>
 
-```html
+```tpl
 <template>
   <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
     <a-button type="primary" ghost>Primary</a-button>
diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
index caf2b311b..e8a2ee495 100644
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -10,7 +10,7 @@
 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.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" shape="circle" icon="search"></a-button>
diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
index a244cb16f..4b74f650a 100644
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -8,7 +8,7 @@
 A loading indicator can be added to a button by setting the `loading` property on the `Button`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" loading>
diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
index fca2c4118..95317eb91 100644
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -8,7 +8,7 @@
 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`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary">Primary</a-button>
diff --git a/components/button/demo/size.md b/components/button/demo/size.md
index 4e220e765..87929ab2d 100644
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@@ -10,7 +10,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.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-radio-group :value="size" @change="handleSizeChange">
diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md
index 58d7dd8b8..5bfcec5b0 100644
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@@ -8,7 +8,7 @@
 A basic calendar component with Year/Month switch.
 </us>
 
-```html
+```tpl
 <template>
   <a-calendar @panelChange="onPanelChange" />
 </template>
diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md
index 723ee4b22..e5e18f15b 100644
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@@ -8,7 +8,7 @@
 Nested inside a container element for rendering in limited space.
 </us>
 
-```html
+```tpl
 <template>
   <div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
     <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
index 4a474a71d..74552444a 100644
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -8,7 +8,7 @@
 This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
 </us>
 
-```html
+```tpl
 <template>
   <a-calendar>
     <ul class="events" slot="dateCellRender" slot-scope="value">
diff --git a/components/calendar/demo/select.md b/components/calendar/demo/select.md
index d5ba22d61..13f2b870d 100644
--- a/components/calendar/demo/select.md
+++ b/components/calendar/demo/select.md
@@ -8,7 +8,7 @@
 A basic calendar component with Year/Month switch.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-alert
diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
index e7a8cc531..247d5e192 100644
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -10,7 +10,7 @@ A basic card containing a title, content and an extra corner content.
 Supports two sizes: `default` and `small`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-card title="Default size card" style="width: 300px">
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
index b6c002458..4e78476c3 100644
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@@ -8,7 +8,7 @@
   A borderless card on a gray background.
 </us>
 
-```html
+```tpl
 <template>
   <div style="background:#ECECEC; padding:30px">
     <a-card title="Card title" :bordered="false" style="width: 300px">
diff --git a/components/card/demo/flexible-content.md b/components/card/demo/flexible-content.md
index c00bf0614..65fd92eaa 100644
--- a/components/card/demo/flexible-content.md
+++ b/components/card/demo/flexible-content.md
@@ -8,7 +8,7 @@
   You can use `Card.Meta` to support more flexible content.
 </us>
 
-```html
+```tpl
 <template>
   <a-card hoverable style="width: 240px">
     <img
diff --git a/components/card/demo/grid-card.md b/components/card/demo/grid-card.md
index b5f4305eb..a7500f526 100644
--- a/components/card/demo/grid-card.md
+++ b/components/card/demo/grid-card.md
@@ -8,7 +8,7 @@
 Grid style card content.
 </us>
 
-```html
+```tpl
 <template>
   <a-card title="Card Title">
     <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
diff --git a/components/card/demo/in-column.md b/components/card/demo/in-column.md
index 4f1a7ce44..ea17a53bb 100644
--- a/components/card/demo/in-column.md
+++ b/components/card/demo/in-column.md
@@ -8,7 +8,7 @@
   Cards usually cooperate with grid column layout in overview page.
 </us>
 
-```html
+```tpl
 <template>
   <div style="background-color: #ececec; padding: 20px;">
     <a-row :gutter="16">
diff --git a/components/card/demo/inner.md b/components/card/demo/inner.md
index 95a88cbaf..d8adcef99 100644
--- a/components/card/demo/inner.md
+++ b/components/card/demo/inner.md
@@ -8,7 +8,7 @@
   It can be placed inside the ordinary card to display the information of the multilevel structure
 </us>
 
-```html
+```tpl
 <template>
   <a-card title="Card title">
     <p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500">
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
index 3e6196199..0dd798711 100644
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -8,7 +8,7 @@
   Shows a loading indirector while the contents of the card is being featched
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-card :loading="loading" title="Card title">
diff --git a/components/card/demo/meta.md b/components/card/demo/meta.md
index d193a4983..9608b24c8 100644
--- a/components/card/demo/meta.md
+++ b/components/card/demo/meta.md
@@ -8,7 +8,7 @@
   A Card that supports `cover`, `avatar`, `title` and `description`.
 </us>
 
-```html
+```tpl
 <template>
   <a-card hoverable style="width: 300px">
     <img
diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md
index e2bbd97ee..a4f807592 100644
--- a/components/card/demo/simple.md
+++ b/components/card/demo/simple.md
@@ -8,7 +8,7 @@
 A simple card only containing a content area.
 </us>
 
-```html
+```tpl
 <template>
   <a-card style="width: 300px">
     <p>Card content</p>
diff --git a/components/card/demo/tabs.md b/components/card/demo/tabs.md
index 71715d530..0ab78fd3d 100644
--- a/components/card/demo/tabs.md
+++ b/components/card/demo/tabs.md
@@ -8,7 +8,7 @@
   More content can be hosted
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-card
diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md
index 297205012..f1932158d 100644
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@@ -8,7 +8,7 @@
 Timing of scrolling to the next card/picture.
 </us>
 
-```html
+```tpl
 <template>
   <a-carousel autoplay>
     <div><h3>1</h3></div>
diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md
index 6595f2c97..9dc0a9202 100644
--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -8,7 +8,7 @@
 Basic usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-carousel :afterChange="onChange">
     <div><h3>1</h3></div>
diff --git a/components/carousel/demo/customArrows.md b/components/carousel/demo/customArrows.md
index 17ed93374..07072d1b1 100644
--- a/components/carousel/demo/customArrows.md
+++ b/components/carousel/demo/customArrows.md
@@ -8,7 +8,7 @@
 Custom arrows display
 </us>
 
-```html
+```tpl
 <template>
   <a-carousel arrows>
     <div
diff --git a/components/carousel/demo/customPaging.md b/components/carousel/demo/customPaging.md
index 6e262d5bf..24fb28094 100644
--- a/components/carousel/demo/customPaging.md
+++ b/components/carousel/demo/customPaging.md
@@ -8,7 +8,7 @@
 Custom paging display
 </us>
 
-```html
+```tpl
 <template>
   <a-carousel arrows dotsClass="slick-dots slick-thumb">
     <a slot="customPaging" slot-scope="props">
diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md
index 13a42ca53..7d70e0573 100644
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@@ -8,7 +8,7 @@
 Slides use fade for transition.
 </us>
 
-```html
+```tpl
 <template>
   <a-carousel effect="fade">
     <div><h3>1</h3></div>
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
index fd022a76e..6d866c700 100644
--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@@ -8,7 +8,7 @@
 Vertical pagination.
 </us>
 
-```html
+```tpl
 <template>
   <a-carousel vertical>
     <div><h3>1</h3></div>
diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md
index d300718df..dab579cb6 100644
--- a/components/cascader/demo/basic.md
+++ b/components/cascader/demo/basic.md
@@ -8,7 +8,7 @@
 Cascade selection box for selecting province/city/district.
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader :options="options" @change="onChange" placeholder="Please select" />
 </template>
diff --git a/components/cascader/demo/change-on-select.md b/components/cascader/demo/change-on-select.md
index 56cd429b0..314ce6d24 100644
--- a/components/cascader/demo/change-on-select.md
+++ b/components/cascader/demo/change-on-select.md
@@ -8,7 +8,7 @@
 Allow only select parent options.
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader :options="options" @change="onChange" changeOnSelect />
 </template>
diff --git a/components/cascader/demo/custom-render.md b/components/cascader/demo/custom-render.md
index aebb19f4e..afddd143f 100644
--- a/components/cascader/demo/custom-render.md
+++ b/components/cascader/demo/custom-render.md
@@ -8,7 +8,7 @@
 For instance, add an external link after the selected value.
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader
     :options="options"
diff --git a/components/cascader/demo/custom-trigger.md b/components/cascader/demo/custom-trigger.md
index 18c3d469a..fcf159c41 100644
--- a/components/cascader/demo/custom-trigger.md
+++ b/components/cascader/demo/custom-trigger.md
@@ -8,7 +8,7 @@
 Separate trigger button and result.
 </us>
 
-```html
+```tpl
 <template>
   <span>
     {{text}} &nbsp;
diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md
index 92ba53f03..cf2b51513 100644
--- a/components/cascader/demo/default-value.md
+++ b/components/cascader/demo/default-value.md
@@ -8,7 +8,7 @@
 Specifies default value by an array.
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader
     :options="options"
diff --git a/components/cascader/demo/disabled-option.md b/components/cascader/demo/disabled-option.md
index 97b1e3943..89030e10a 100644
--- a/components/cascader/demo/disabled-option.md
+++ b/components/cascader/demo/disabled-option.md
@@ -8,7 +8,7 @@
 Disable option by specifying the `disabled` property in `options`.
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader :options="options" @change="onChange" />
 </template>
diff --git a/components/cascader/demo/fields-name.md b/components/cascader/demo/fields-name.md
index ccf70f3a7..182c0879e 100644
--- a/components/cascader/demo/fields-name.md
+++ b/components/cascader/demo/fields-name.md
@@ -8,7 +8,7 @@
 Custom Field Names.
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader
     :fieldNames="{ label: 'name', value: 'code', children: 'items' }"
diff --git a/components/cascader/demo/hover.md b/components/cascader/demo/hover.md
index ad4edd6c8..b79368277 100644
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@@ -8,7 +8,7 @@
 Hover to expand sub menu, click to select option.
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader
     :options="options"
diff --git a/components/cascader/demo/lazy.md b/components/cascader/demo/lazy.md
index d02a4d6ef..ea991b855 100644
--- a/components/cascader/demo/lazy.md
+++ b/components/cascader/demo/lazy.md
@@ -10,7 +10,7 @@ Load options lazily with `loadData`.
 > Note: `loadData` cannot work with `showSearch`.
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader
     :options="options"
diff --git a/components/cascader/demo/search.md b/components/cascader/demo/search.md
index 17db6c068..892ff1e1d 100644
--- a/components/cascader/demo/search.md
+++ b/components/cascader/demo/search.md
@@ -10,7 +10,7 @@ Search and select options directly.
 > Now, `Cascader[showSearch]` doesn't support search on server, more info [#5547](https://github.com/ant-design/ant-design/issues/5547)
 </us>
 
-```html
+```tpl
 <template>
   <a-cascader
     :options="options"
diff --git a/components/cascader/demo/size.md b/components/cascader/demo/size.md
index b33c79d01..b484a641c 100644
--- a/components/cascader/demo/size.md
+++ b/components/cascader/demo/size.md
@@ -8,7 +8,7 @@
 Cascade selection box of different sizes.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-cascader size="large" :options="options" @change="onChange" /><br /><br />
diff --git a/components/cascader/demo/suffix.md b/components/cascader/demo/suffix.md
index 0796de75e..7e60848f0 100644
--- a/components/cascader/demo/suffix.md
+++ b/components/cascader/demo/suffix.md
@@ -8,7 +8,7 @@
 Cascade selection box for selecting province/city/district.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-cascader
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
index a0a390f57..79523e681 100644
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -8,7 +8,7 @@
 Basic usage of checkbox
 </us>
 
-```html
+```tpl
 <template>
   <a-checkbox @change="onChange">Checkbox</a-checkbox>
 </template>
diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md
index bd682d6c4..891137c10 100644
--- a/components/checkbox/demo/check-all.md
+++ b/components/checkbox/demo/check-all.md
@@ -8,7 +8,7 @@
 The `indeterminate` property can help you to achieve a 'check all' effect.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div :style="{ borderBottom: '1px solid #E9E9E9' }">
diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md
index 78740977a..9270bde40 100644
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -8,7 +8,7 @@
 Communicated with other components
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <p :style="{ marginBottom: '20px' }">
diff --git a/components/checkbox/demo/disabled.md b/components/checkbox/demo/disabled.md
index e20f8b52a..0926fa950 100644
--- a/components/checkbox/demo/disabled.md
+++ b/components/checkbox/demo/disabled.md
@@ -8,7 +8,7 @@ checkbox 不可用
 Disabled checkbox
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-checkbox :defaultChecked="false" disabled />
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
index b84fd7286..215c9a761 100644
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -8,7 +8,7 @@
 Generate a group of checkboxes from an array
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-checkbox-group :options="plainOptions" v-model="value" @change="onChange" />
diff --git a/components/checkbox/demo/layout.md b/components/checkbox/demo/layout.md
index a67d2b38e..ccbf81d03 100644
--- a/components/checkbox/demo/layout.md
+++ b/components/checkbox/demo/layout.md
@@ -8,7 +8,7 @@ Checkbox.Group内嵌Checkbox并与Grid组件一起使用，可以实现灵活的
 We can use Checkbox and Grid Checkbox.group, to implement complex layout
 </us>
 
-```html
+```tpl
 <template>
   <a-checkbox-group @change="onChange">
     <a-row>
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
index efe9fad4b..99e9b743d 100644
--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@@ -8,7 +8,7 @@
 Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-collapse accordion>
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
index 6ec2e3814..82e85685a 100644
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@@ -8,7 +8,7 @@
 More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-collapse v-model="activeKey">
diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md
index eb50b1c6b..44fc7f762 100644
--- a/components/collapse/demo/borderless.md
+++ b/components/collapse/demo/borderless.md
@@ -8,7 +8,7 @@
 A borderless style of Collapse.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-collapse defaultActiveKey="1" :bordered="false">
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
index 01cb74b97..88a4c02ec 100644
--- a/components/collapse/demo/custom.md
+++ b/components/collapse/demo/custom.md
@@ -8,7 +8,7 @@
 Customize the background, border and margin styles and icon for each panel.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-collapse defaultActiveKey="1" :bordered="false">
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
index afc52d936..e8bd3830a 100644
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@@ -8,7 +8,7 @@
 `Collapse` is nested inside the `Collapse`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-collapse @change="changeActivekey">
diff --git a/components/collapse/demo/noarrow.md b/components/collapse/demo/noarrow.md
index 638290353..5cabe033d 100644
--- a/components/collapse/demo/noarrow.md
+++ b/components/collapse/demo/noarrow.md
@@ -8,7 +8,7 @@
 You can disable showing arrow icon by passing `:showArrow="false"` to `a-collapse-panel` component.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-collapse defaultActiveKey="1" @change="changeActivekey">
diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md
index a5a8e5ab3..9f9a1aa28 100644
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@@ -8,7 +8,7 @@
 A basic comment with author, avatar, time and actions.
 </us>
 
-```html
+```tpl
 <template>
   <a-comment>
     <template slot="actions">
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index df9de0dc0..578e622c1 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -8,7 +8,7 @@
 Comment can be used as editor, user can customize the editor component.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-list
diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md
index 68369c9e4..dc74ffd06 100644
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@@ -8,7 +8,7 @@
 Displaying a series of comments using the `antd` List Component.
 </us>
 
-```html
+```tpl
 <template>
   <a-list
     class="comment-list"
diff --git a/components/comment/demo/nested.md b/components/comment/demo/nested.md
index c597067fc..0c49394f8 100644
--- a/components/comment/demo/nested.md
+++ b/components/comment/demo/nested.md
@@ -8,7 +8,7 @@
 Comments can be nested.
 </us>
 
-```html
+```tpl
 <template>
   <a-comment>
     <span slot="actions">Reply to</span>
diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
index 30326358f..f1680c290 100644
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -8,7 +8,7 @@
 Basic use case. Users can select or input a date in panel.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker @change="onChange" />
diff --git a/components/date-picker/demo/date-render.md b/components/date-picker/demo/date-render.md
index 29f7c2577..bfbb01a9c 100644
--- a/components/date-picker/demo/date-render.md
+++ b/components/date-picker/demo/date-render.md
@@ -8,7 +8,7 @@
 We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker>
diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md
index 289bafe5e..6a64efda6 100644
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -8,7 +8,7 @@
 Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker
diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md
index 38d6a2a1e..7fa95acdc 100644
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -8,7 +8,7 @@
 A disabled state of the `DatePicker`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker :defaultValue="moment('2015-06-06', dateFormat)" disabled />
diff --git a/components/date-picker/demo/extra-footer.md b/components/date-picker/demo/extra-footer.md
index 8761a8259..ba8e85362 100644
--- a/components/date-picker/demo/extra-footer.md
+++ b/components/date-picker/demo/extra-footer.md
@@ -8,7 +8,7 @@
 Render extra footer in panel for customized requirements.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker>
diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md
index 43a3040bc..d7716b2b6 100644
--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@@ -8,7 +8,7 @@
 We can set the date format by `format`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker :defaultValue="moment('2015/01/01', dateFormat)" :format="dateFormat" />
diff --git a/components/date-picker/demo/mode.md b/components/date-picker/demo/mode.md
index 34a4b7375..1ef4561f7 100644
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@@ -8,7 +8,7 @@
 Determing which panel to show with `mode` and `onPanelChange`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker
diff --git a/components/date-picker/demo/presetted-ranges.md b/components/date-picker/demo/presetted-ranges.md
index dec7708ce..0cc4d4cc3 100644
--- a/components/date-picker/demo/presetted-ranges.md
+++ b/components/date-picker/demo/presetted-ranges.md
@@ -8,7 +8,7 @@
 We can set presetted ranges to RangePicker to improve user experience.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-range-picker
diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md
index 6329507b6..4ae3289a0 100644
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@@ -8,7 +8,7 @@
 The input box comes in three sizes. `default` will be used if `size` is omitted.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-radio-group v-model="size">
diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md
index 2277a70ad..8528eb9e3 100644
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -12,7 +12,7 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
 > * Improve user experience with `open` and `onOpenChange`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker
diff --git a/components/date-picker/demo/suffix.md b/components/date-picker/demo/suffix.md
index f4fec9899..65d5dc8ec 100644
--- a/components/date-picker/demo/suffix.md
+++ b/components/date-picker/demo/suffix.md
@@ -8,7 +8,7 @@
 Basic use case. Users can select or input a date in panel.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker @change="onChange">
diff --git a/components/date-picker/demo/text.md b/components/date-picker/demo/text.md
index c1b410701..7b9f06b4f 100644
--- a/components/date-picker/demo/text.md
+++ b/components/date-picker/demo/text.md
@@ -8,7 +8,7 @@
 Added custom rendering function, in the default `slot', you can set any component you want to render..
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker placeholder="Select Time" v-model="time1" @change="onChange" @ok="onOk">
diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md
index d314e8452..48636b27e 100644
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@@ -8,7 +8,7 @@
 This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-date-picker showTime placeholder="Select Time" @change="onChange" @ok="onOk" />
diff --git a/components/divider/demo/horizontal.md b/components/divider/demo/horizontal.md
index 9a01e96c3..a605e7318 100644
--- a/components/divider/demo/horizontal.md
+++ b/components/divider/demo/horizontal.md
@@ -8,7 +8,7 @@
 Divider default type is `horizontal`. Support inner text inside Divider.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <p>
diff --git a/components/divider/demo/orientation.md b/components/divider/demo/orientation.md
index 0b0a4f85a..d5913f207 100644
--- a/components/divider/demo/orientation.md
+++ b/components/divider/demo/orientation.md
@@ -8,7 +8,7 @@
 Set orientation of divider to left or right.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-divider orientation="left">Left Text</a-divider>
diff --git a/components/divider/demo/vertical.md b/components/divider/demo/vertical.md
index 777540967..449a1d85c 100644
--- a/components/divider/demo/vertical.md
+++ b/components/divider/demo/vertical.md
@@ -8,7 +8,7 @@
 Use `type="vertical"` make it vertical.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     Text
diff --git a/components/drawer/demo/basic-right.md b/components/drawer/demo/basic-right.md
index 3f2dc0a7c..b77766262 100644
--- a/components/drawer/demo/basic-right.md
+++ b/components/drawer/demo/basic-right.md
@@ -8,7 +8,7 @@
 Basic drawer.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" @click="showDrawer">
diff --git a/components/drawer/demo/form-in-drawer.md b/components/drawer/demo/form-in-drawer.md
index 661ed1a3a..bbc723c83 100644
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@@ -8,7 +8,7 @@
 Use form in drawer with submit button.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> New account </a-button>
diff --git a/components/drawer/demo/multi-level-drawer.md b/components/drawer/demo/multi-level-drawer.md
index 5a3180cc4..35b74b1e9 100644
--- a/components/drawer/demo/multi-level-drawer.md
+++ b/components/drawer/demo/multi-level-drawer.md
@@ -8,7 +8,7 @@
 Open a new drawer on top of an existing drawer to handle multi branch tasks
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" @click="showDrawer">
diff --git a/components/drawer/demo/placement.md b/components/drawer/demo/placement.md
index 7d6da2682..85a33a94e 100644
--- a/components/drawer/demo/placement.md
+++ b/components/drawer/demo/placement.md
@@ -8,7 +8,7 @@
 Basic drawer.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-radio-group style="margin-right: 8px" :defaultValue="placement" @change="onChange">
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
index e92eff3d2..0067867e6 100644
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@@ -8,7 +8,7 @@
 Use when you need to quickly preview the outline of the object. Such as list item preview.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-list
diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md
index 532fbd07c..1ed83ce36 100644
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@@ -8,7 +8,7 @@
 The most basic dropdown menu.
 </us>
 
-```html
+```tpl
 <template>
   <a-dropdown>
     <a class="ant-dropdown-link" href="#"> Hover me <a-icon type="down" /> </a>
diff --git a/components/dropdown/demo/context-menu.md b/components/dropdown/demo/context-menu.md
index f605f852c..a836f31d4 100644
--- a/components/dropdown/demo/context-menu.md
+++ b/components/dropdown/demo/context-menu.md
@@ -8,7 +8,7 @@
 The default trigger mode is `hover`, you can change it to `contextMenu`.
 </us>
 
-```html
+```tpl
 <template>
   <a-dropdown :trigger="['contextmenu']">
     <span style="user-select: none">Right Click on Me</span>
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index 2893eba33..239021a15 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -8,7 +8,7 @@
 A button is on the left, and a related functional menu is on the right.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-dropdown-button @click="handleButtonClick">
diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md
index ddbb86059..81074e48f 100644
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@@ -8,7 +8,7 @@
 An event will be triggered when you click menu items, in which you can make different operations according to item's key.
 </us>
 
-```html
+```tpl
 <template>
   <a-dropdown>
     <a class="ant-dropdown-link" href="#"> Hover me, Click menu item <a-icon type="down" /> </a>
diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md
index 8dfd8fbc1..79c0e6bdd 100644
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@@ -8,7 +8,7 @@
 Divider and disabled menu item.
 </us>
 
-```html
+```tpl
 <template>
   <a-dropdown>
     <a class="ant-dropdown-link" href="#"> Hover me <a-icon type="down" /> </a>
diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md
index f907af614..68c6ad54c 100644
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -8,7 +8,7 @@
 The default is to close the menu when you click on menu items, this feature can be turned off.
 </us>
 
-```html
+```tpl
 <template>
   <a-dropdown v-model="visible">
     <a class="ant-dropdown-link" href="#"> Hover me <a-icon type="down" /> </a>
diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
index f348b2fef..bf816a482 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -8,7 +8,7 @@
 Support 6 placements.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-dropdown-demo-placement">
     <template v-for="(placement, index) in placements">
diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md
index 25b8ba9db..351599fd7 100644
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@@ -8,7 +8,7 @@
 The menu has multiple levels.
 </us>
 
-```html
+```tpl
 <template>
   <a-dropdown>
     <a class="ant-dropdown-link" href="#"> Cascading menu <a-icon type="down" /> </a>
diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md
index 39697ac71..917b10ada 100644
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@@ -8,7 +8,7 @@
 The default trigger mode is `hover`, you can change it to `click`.
 </us>
 
-```html
+```tpl
 <template>
   <a-dropdown :trigger="['click']">
     <a class="ant-dropdown-link" href="#"> Click me <a-icon type="down" /> </a>
diff --git a/components/empty/demo/basic.md b/components/empty/demo/basic.md
index 43a49dd66..2b0b88ea8 100644
--- a/components/empty/demo/basic.md
+++ b/components/empty/demo/basic.md
@@ -8,7 +8,7 @@
 Simplest Usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-empty />
 </template>
diff --git a/components/empty/demo/config-provider.md b/components/empty/demo/config-provider.md
index f0dc7cfe9..bbe027a7b 100644
--- a/components/empty/demo/config-provider.md
+++ b/components/empty/demo/config-provider.md
@@ -8,7 +8,7 @@
 Use ConfigProvider set global Empty style.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch
diff --git a/components/empty/demo/customize.md b/components/empty/demo/customize.md
index c955d4fe1..b5a546712 100644
--- a/components/empty/demo/customize.md
+++ b/components/empty/demo/customize.md
@@ -8,7 +8,7 @@
 Customize image, description and extra content.
 </us>
 
-```html
+```tpl
 <template>
   <a-empty
     image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md
index 0003ff21e..8fcc1c56d 100644
--- a/components/grid/demo/basic.md
+++ b/components/grid/demo/basic.md
@@ -10,7 +10,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`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-row>
diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md
index 0f446f868..ab4761ef4 100644
--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@@ -8,7 +8,7 @@ Flex 子元素垂直对齐。
 Flex child elements vertically aligned.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <p>Align Top</p>
diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md
index ae0189739..7fa72de97 100644
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@@ -9,7 +9,7 @@
 To change the element sort by Flex layout order.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-row type="flex">
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index f25c0006d..8b8daa100 100644
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -9,7 +9,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.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <p>sub-element align left</p>
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index 10389821b..d38d4e29a 100644
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@@ -10,7 +10,7 @@ You can use the `gutter` property of `Row` as grid spacing, we recommend set it
 You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.
 </us>
 
-```html
+```tpl
 <template>
   <div class="gutter-example">
     <a-row :gutter="16">
diff --git a/components/grid/demo/offset.md b/components/grid/demo/offset.md
index 9a3be6cc7..8cd10264f 100644
--- a/components/grid/demo/offset.md
+++ b/components/grid/demo/offset.md
@@ -9,7 +9,7 @@
 `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.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-row>
diff --git a/components/grid/demo/playfround.md b/components/grid/demo/playfround.md
index f1edfb1e5..9589f9e35 100644
--- a/components/grid/demo/playfround.md
+++ b/components/grid/demo/playfround.md
@@ -8,7 +8,7 @@
 A simple playground for column count and gutter.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-grid-demo-playground">
     <div style="marginBottom:16px">
diff --git a/components/grid/demo/responsive-more.md b/components/grid/demo/responsive-more.md
index 44e91cfef..22771060a 100644
--- a/components/grid/demo/responsive-more.md
+++ b/components/grid/demo/responsive-more.md
@@ -10,7 +10,7 @@
 where `:xs="6"` is equivalent to `:xs="{span: 6}"`.
 </us>
 
-```html
+```tpl
 <template>
   <a-row>
     <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
diff --git a/components/grid/demo/responsive.md b/components/grid/demo/responsive.md
index e31d7627c..80c9c455b 100644
--- a/components/grid/demo/responsive.md
+++ b/components/grid/demo/responsive.md
@@ -8,7 +8,7 @@
 Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: `xs` `sm` `md` `lg` `xl`.
 </us>
 
-```html
+```tpl
 <template>
   <a-row>
     <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
diff --git a/components/grid/demo/sort.md b/components/grid/demo/sort.md
index c0df6068b..99e459264 100644
--- a/components/grid/demo/sort.md
+++ b/components/grid/demo/sort.md
@@ -9,7 +9,7 @@
 By using `push` and` pull` class you can easily change column order.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-row>
diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md
index b8023e18d..cf5c85b33 100644
--- a/components/icon/demo/basic.md
+++ b/components/icon/demo/basic.md
@@ -8,7 +8,7 @@
 Use tag `<Icon />` to create an icon and set its type in the `type` prop. Specific the `spin` property to show spinning animation and the `theme` property to switch different themes.
 </us>
 
-```html
+```tpl
 <template>
   <div class="icons-list">
     <a-icon type="home" />
diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md
index 45f557d59..a02c39ec8 100644
--- a/components/icon/demo/custom.md
+++ b/components/icon/demo/custom.md
@@ -8,7 +8,7 @@
 Create a reusable Vue component by using `<a-icon :component="{...}" />`. The property `component` takes a Vue component that renders to `svg` element.
 </us>
 
-```html
+```tpl
 <template>
   <div class="custom-icons-list">
     <heart-icon :style="{ color: 'hotpink' }" />
diff --git a/components/icon/demo/iconfont.md b/components/icon/demo/iconfont.md
index bd2817a94..33a87caf6 100644
--- a/components/icon/demo/iconfont.md
+++ b/components/icon/demo/iconfont.md
@@ -8,7 +8,7 @@
 If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.
 </us>
 
-```html
+```tpl
 <template>
   <div class="icons-list">
     <icon-font type="icon-tuichu" />
diff --git a/components/icon/demo/old-icons.md b/components/icon/demo/old-icons.md
index 4b0461bc9..c627477a4 100644
--- a/components/icon/demo/old-icons.md
+++ b/components/icon/demo/old-icons.md
@@ -8,7 +8,7 @@
 Test old icons before `1.2.0`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-icon v-for="icon in icons" :key="icon" :type="icon" />
diff --git a/components/icon/demo/two-tone.md b/components/icon/demo/two-tone.md
index 8364ddc5c..cfb2c63b9 100644
--- a/components/icon/demo/two-tone.md
+++ b/components/icon/demo/two-tone.md
@@ -8,7 +8,7 @@
 Specific them property `theme` to `twoTone` to render two-tone icons. You can also set the primary color.
 </us>
 
-```html
+```tpl
 <template>
   <div class="icons-list">
     <a-icon type="smile" theme="twoTone" />
diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md
index d144fe855..3f6978d0e 100644
--- a/components/input-number/demo/basic.md
+++ b/components/input-number/demo/basic.md
@@ -8,7 +8,7 @@
 Numeric-only input box.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-input-number :min="1" :max="10" v-model="value" @change="onChange" />
diff --git a/components/input-number/demo/digit.md b/components/input-number/demo/digit.md
index dfa27a9e3..c50cc3dd8 100644
--- a/components/input-number/demo/digit.md
+++ b/components/input-number/demo/digit.md
@@ -8,7 +8,7 @@
 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.
 </us>
 
-```html
+```tpl
 <template>
   <a-input-number :min="0" :max="10" :step="0.1" @change="onChange" />
 </template>
diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md
index 4fc6cd144..5631abcd1 100644
--- a/components/input-number/demo/disabled.md
+++ b/components/input-number/demo/disabled.md
@@ -8,7 +8,7 @@
 Click the button to toggle between available and disabled states.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-input-number :min="1" :max="10" :disabled="disabled" :defaultValue="3" />
diff --git a/components/input-number/demo/formatter.md b/components/input-number/demo/formatter.md
index b8f6c6ad1..7429f8474 100644
--- a/components/input-number/demo/formatter.md
+++ b/components/input-number/demo/formatter.md
@@ -8,7 +8,7 @@
 Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-input-number
diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md
index b9650f563..6c66b1a9f 100644
--- a/components/input-number/demo/size.md
+++ b/components/input-number/demo/size.md
@@ -8,7 +8,7 @@
 There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-input-number size="large" :min="1" :max="100000" :defaultValue="3" @change="onChange" />
diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md
index 5a0f20bd0..8db2d07ad 100644
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -8,7 +8,7 @@
 Using pre & post tabs example.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div style="margin-bottom: 16px">
diff --git a/components/input/demo/allowClear.md b/components/input/demo/allowClear.md
index 1729f0f3e..ff3841ef7 100644
--- a/components/input/demo/allowClear.md
+++ b/components/input/demo/allowClear.md
@@ -8,7 +8,7 @@
 Input type of password.
 </us>
 
-```html
+```tpl
 <template>
   <a-input placeholder="input with clear icon" allowClear @change="onChange" />
 </template>
diff --git a/components/input/demo/autosize-textarea.md b/components/input/demo/autosize-textarea.md
index 6feca1b2b..78bc9e725 100644
--- a/components/input/demo/autosize-textarea.md
+++ b/components/input/demo/autosize-textarea.md
@@ -9,7 +9,7 @@
 An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-textarea placeholder="Autosize height based on content lines" autosize />
diff --git a/components/input/demo/basic.md b/components/input/demo/basic.md
index 50f93029a..08b4b8784 100644
--- a/components/input/demo/basic.md
+++ b/components/input/demo/basic.md
@@ -8,7 +8,7 @@
 Basic usage example.
 </us>
 
-```html
+```tpl
 <template>
   <a-input placeholder="Basic usage" />
 </template>
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index 26f62dca6..4cbb79780 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -10,7 +10,7 @@ Input.Group example
 Note: You don't need `Col` to control the width in the `compact` mode.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-input-group size="large">
diff --git a/components/input/demo/password-input.md b/components/input/demo/password-input.md
index 45adab85e..d5a665af7 100644
--- a/components/input/demo/password-input.md
+++ b/components/input/demo/password-input.md
@@ -8,7 +8,7 @@
 Input type of password and added in 1.4.0.
 </us>
 
-```html
+```tpl
 <template>
   <a-input-password placeholder="input password" />
 </template>
diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md
index b02066020..456fea25f 100644
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@@ -8,7 +8,7 @@
 Add prefix or suffix icons inside input.
 </us>
 
-```html
+```tpl
 <template>
   <div class="components-input-demo-presuffix">
     <a-input placeholder="Basic usage" v-model="userName" ref="userNameInput">
diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md
index d69c6f9d8..26be0915d 100644
--- a/components/input/demo/search-input.md
+++ b/components/input/demo/search-input.md
@@ -8,7 +8,7 @@
 Example of creating a search box by grouping a standard input with a search button.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-input-search placeholder="input search text" style="width: 200px" @search="onSearch" />
diff --git a/components/input/demo/size.md b/components/input/demo/size.md
index 3d0cbf69f..97cab245c 100644
--- a/components/input/demo/size.md
+++ b/components/input/demo/size.md
@@ -8,7 +8,7 @@
 There are three sizes of an Input box: `large` (40px)、`default` (32px) and `small` (24px).
 </us>
 
-```html
+```tpl
 <template>
   <div class="components-input-demo-size">
     <a-input size="large" placeholder="large size" />
diff --git a/components/input/demo/textarea-resize.md b/components/input/demo/textarea-resize.md
index e6d8bd000..d81670ec5 100644
--- a/components/input/demo/textarea-resize.md
+++ b/components/input/demo/textarea-resize.md
@@ -8,7 +8,7 @@
 For multi-line input.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button style="margin-bottom: 16px" @click="() => this.autoResize = !autoResize">
diff --git a/components/input/demo/textarea.md b/components/input/demo/textarea.md
index a0fca1ce9..11182a5d6 100644
--- a/components/input/demo/textarea.md
+++ b/components/input/demo/textarea.md
@@ -8,7 +8,7 @@
 For multi-line input.
 </us>
 
-```html
+```tpl
 <template>
   <a-textarea placeholder="Basic usage" :rows="4" />
 </template>
diff --git a/components/input/demo/tooltip.md b/components/input/demo/tooltip.md
index fb8e2f8d0..fe3a4fad0 100644
--- a/components/input/demo/tooltip.md
+++ b/components/input/demo/tooltip.md
@@ -8,7 +8,7 @@
 You can use the Input in conjunction with [Tooltip](/components/tooltip/) component to create a Numeric Input, which can provide a good experience for extra-long content display.
 </us>
 
-```html
+```tpl
 <template>
   <a-tooltip :trigger="['focus']" placement="topLeft" overlayClassName="numeric-input">
     <span slot="title" v-if="value" class="numeric-input-title">
diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index 6ac16f4fe..f66d588ae 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -8,7 +8,7 @@
 Classic page layouts.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-layout-demo-basic">
     <a-layout>
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index f83720c76..0fb28905b 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -8,7 +8,7 @@
 If you want to use a customized trigger, you can hide the default one by setting `:trigger="null"`.
 </us>
 
-```html
+```tpl
 <template>
   <a-layout id="components-layout-demo-custom-trigger">
     <a-layout-sider :trigger="null" collapsible v-model="collapsed">
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index c15ecbfb5..a10558c9d 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -8,7 +8,7 @@
 When dealing with long content, a fixed sider can provide a better user experience.
 </us>
 
-```html
+```tpl
 <template>
   <a-layout id="components-layout-demo-fixed-sider">
     <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index cf173788b..9f05b3c18 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -8,7 +8,7 @@
 Fixed Header is generally used to fix the top navigation to facilitate page switching.
 </us>
 
-```html
+```tpl
 <template>
   <a-layout id="components-layout-demo-fixed">
     <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index 09ecf9775..658cef161 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -10,7 +10,7 @@ Layout.Sider supports responsive layout.
 > Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to `0`.
 </us>
 
-```html
+```tpl
 <template>
   <a-layout id="components-layout-demo-responsive">
     <a-layout-sider
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index ac89fd044..7d40d6caa 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -11,7 +11,7 @@ Generally, the mainnav is placed on the left side of the page, and the secondary
 The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents
 </us>
 
-```html
+```tpl
 <template>
   <a-layout id="components-layout-demo-side" style="min-height: 100vh">
     <a-layout-sider collapsible v-model="collapsed">
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index 9ea1c8815..8c8ba163c 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -8,7 +8,7 @@
 Both the top navigation and the sidebar, commonly used in application site.
 </us>
 
-```html
+```tpl
 <template>
   <a-layout id="components-layout-demo-top-side-2">
     <a-layout-header class="header">
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 96823b96f..935e7c90c 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -8,7 +8,7 @@
 Both the top navigation and the sidebar, commonly used in documentation site.
 </us>
 
-```html
+```tpl
 <template>
   <a-layout id="components-layout-demo-top-side">
     <a-layout-header class="header">
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index af5eb4c3b..db1bbb54e 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -12,7 +12,7 @@ We always put contents in a fixed size navigation (eg: `1200px`), the layout of
 Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links
 </us>
 
-```html
+```tpl
 <template>
   <a-layout id="components-layout-demo-top" class="layout">
     <a-layout-header>
diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md
index d4a2fa27c..7e9562838 100644
--- a/components/list/demo/basic.md
+++ b/components/list/demo/basic.md
@@ -8,7 +8,7 @@
 Basic list.
 </us>
 
-```html
+```tpl
 <template>
   <a-list itemLayout="horizontal" :dataSource="data">
     <a-list-item slot="renderItem" slot-scope="item, index">
diff --git a/components/list/demo/grid.md b/components/list/demo/grid.md
index 05056bef0..48d082f3f 100644
--- a/components/list/demo/grid.md
+++ b/components/list/demo/grid.md
@@ -8,7 +8,7 @@
 Creating a grid list by setting the `grid` property of List
 </us>
 
-```html
+```tpl
 <template>
   <a-list :grid="{ gutter: 16, column: 4 }" :dataSource="data">
     <a-list-item slot="renderItem" slot-scope="item, index">
diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md
index fee59aab1..76687652a 100644
--- a/components/list/demo/infinite-load.md
+++ b/components/list/demo/infinite-load.md
@@ -8,7 +8,7 @@
 The example of infinite load with [vue-infinite-scroll](https://github.com/ElemeFE/vue-infinite-scroll).
 </us>
 
-```html
+```tpl
 <template>
   <div
     class="demo-infinite-container"
diff --git a/components/list/demo/infinite-virtualized-load.md b/components/list/demo/infinite-virtualized-load.md
index a2149bb07..d36c1d30e 100644
--- a/components/list/demo/infinite-virtualized-load.md
+++ b/components/list/demo/infinite-virtualized-load.md
@@ -11,7 +11,7 @@ An example of infinite list & virtualized loading using [vue-virtual-scroller](h
 `Virtualized` rendering is a technique to mount big sets of data. It reduces the amount of rendered DOM nodes by tracking and hiding whatever isn't currently visible.
 </us>
 
-```html
+```tpl
 <template>
   <a-list>
     <virtual-scroller
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index f23753986..6606401d4 100644
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@@ -8,7 +8,7 @@
 Load more list with `loadMore` property.
 </us>
 
-```html
+```tpl
 <template>
   <a-list class="demo-loadmore-list" :loading="loading" itemLayout="horizontal" :dataSource="data">
     <div
diff --git a/components/list/demo/resposive.md b/components/list/demo/resposive.md
index ad8f2b820..206e95fdb 100644
--- a/components/list/demo/resposive.md
+++ b/components/list/demo/resposive.md
@@ -8,7 +8,7 @@
 Responsive grid list. The size property is as same as [Layout Grid](https://vue.ant.design/components/grid/#Col).
 </us>
 
-```html
+```tpl
 <template>
   <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :dataSource="data">
     <a-list-item slot="renderItem" slot-scope="item, index">
diff --git a/components/list/demo/simple.md b/components/list/demo/simple.md
index 9d4c799c0..0d3f1133a 100644
--- a/components/list/demo/simple.md
+++ b/components/list/demo/simple.md
@@ -12,7 +12,7 @@ If a large or small list is desired, set the size property to either large or sm
 Customizing the header and footer of list by setting `header` and `footer` property.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <h3 :style="{ marginBottom: '16px' }">Default Size</h3>
diff --git a/components/list/demo/vertical.md b/components/list/demo/vertical.md
index b59e969e3..8657058f5 100644
--- a/components/list/demo/vertical.md
+++ b/components/list/demo/vertical.md
@@ -8,7 +8,7 @@
 Setting `itemLayout` property with `vertical` to create a vertical list.
 </us>
 
-```html
+```tpl
 <template>
   <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
     <div slot="footer"><b>ant design vue</b> footer part</div>
diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md
index 3ee422d5c..836bad6d4 100644
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@@ -8,7 +8,7 @@
 Components which need localization support are listed here, you can toggle the language in the demo.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div class="change-locale">
diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md
index 526c6cf59..5dc4d1ee4 100644
--- a/components/locale-provider/demo/basic.md
+++ b/components/locale-provider/demo/basic.md
@@ -8,7 +8,7 @@
 Wrap your app with `LocaleProvider`, and apply the corresponding language package.
 </us>
 
-```html
+```tpl
 <template>
   <a-locale-provider :locale="zhCN">
     <a-pagination :defaultCurrent="1" :total="50" showSizeChanger />
diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md
index d80c58f0c..de7835c3a 100644
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -8,7 +8,7 @@
 Horizontal top navigation menu.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-menu v-model="current" mode="horizontal">
diff --git a/components/menu/demo/inline-collapsed.md b/components/menu/demo/inline-collapsed.md
index 825586dc7..3e3a6a9b3 100644
--- a/components/menu/demo/inline-collapsed.md
+++ b/components/menu/demo/inline-collapsed.md
@@ -8,7 +8,7 @@
 Inline menu could be collapsed.
 </us>
 
-```html
+```tpl
 <template>
   <div style="width: 256px">
     <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
diff --git a/components/menu/demo/inline.md b/components/menu/demo/inline.md
index 7f96f62bd..fedb2abd6 100644
--- a/components/menu/demo/inline.md
+++ b/components/menu/demo/inline.md
@@ -8,7 +8,7 @@
 Vertical menu with inline submenus.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-menu
diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index 5902c8bbb..214bd5581 100644
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -8,7 +8,7 @@
 Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-menu mode="inline" :openKeys="openKeys" @openChange="onOpenChange" style="width: 256px">
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
index 908717123..67105952f 100644
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -8,7 +8,7 @@
 Show the dynamic switching mode (between 'inline' and 'vertical').
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch :defaultChecked="false" @change="changeMode" /> Change Mode
diff --git a/components/menu/demo/template.md b/components/menu/demo/template.md
index 93ad633c6..c6972a770 100644
--- a/components/menu/demo/template.md
+++ b/components/menu/demo/template.md
@@ -10,7 +10,7 @@ Use the single file method to recursively generate menus.
 The properties of `a-sub-menu` are dynamically changed inside the component. If you split the file into a single file and you cannot mount the `props` to `a-sub-menu`, you need to declare the `props` and mount it yourself. For convenience, to avoid the declaration of attributes, we recommend using functional components.
 </us>
 
-```html
+```tpl
 <template>
   <div style="width: 256px">
     <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
diff --git a/components/menu/demo/theme.md b/components/menu/demo/theme.md
index 0ccbf410e..23f2d9fcb 100644
--- a/components/menu/demo/theme.md
+++ b/components/menu/demo/theme.md
@@ -8,7 +8,7 @@
 There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch
diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md
index 1085eb5ab..1318e4d27 100644
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@@ -8,7 +8,7 @@
 Submenus open as pop-ups.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-menu style="width: 256px" mode="vertical" @click="handleClick">
diff --git a/components/message/demo/duration.md b/components/message/demo/duration.md
index b5181b4db..1dfa51b5e 100644
--- a/components/message/demo/duration.md
+++ b/components/message/demo/duration.md
@@ -8,7 +8,7 @@
 Customize message display duration from default `3s` to `10s`.
 </us>
 
-```html
+```tpl
 <template>
   <a-button @click="success">Customized display duration</a-button>
 </template>
diff --git a/components/message/demo/info.md b/components/message/demo/info.md
index 4649e5073..bd726f77a 100644
--- a/components/message/demo/info.md
+++ b/components/message/demo/info.md
@@ -8,7 +8,7 @@
 Normal messages as feedbacks.
 </us>
 
-```html
+```tpl
 <template>
   <a-button type="primary" @click="info">Display normal message</a-button>
 </template>
diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md
index c520c58cb..103a1ad3a 100644
--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@@ -8,7 +8,7 @@
 Display a global loading indicator, which is dismissed by itself asynchronously.
 </us>
 
-```html
+```tpl
 <template>
   <a-button @click="success">Display a loading indicator</a-button>
 </template>
diff --git a/components/message/demo/other.md b/components/message/demo/other.md
index 032fba140..da8834ea5 100644
--- a/components/message/demo/other.md
+++ b/components/message/demo/other.md
@@ -8,7 +8,7 @@
 Messages of success, error and warning types.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button @click="success">Success</a-button>
diff --git a/components/message/demo/thenable.md b/components/message/demo/thenable.md
index 69bfe5284..c48e9ed95 100644
--- a/components/message/demo/thenable.md
+++ b/components/message/demo/thenable.md
@@ -8,7 +8,7 @@
 `message` provides promise interface for `onClose`. The above example will display a new message when old message is about to finish.
 </us>
 
-```html
+```tpl
 <template>
   <a-button @click="success">Display a sequence of message</a-button>
 </template>
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index f429fe697..b6d8f46d6 100644
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@@ -9,7 +9,7 @@ Asynchronously close a modal dialog when a user clicked OK button, for example,
 you can use this pattern when you submit a form.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index 50333ed0e..c7322e96c 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -8,7 +8,7 @@
 Basic modal.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" @click="showModal">Open Modal</a-button>
diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md
index 3d82e25c8..85ed2ca9b 100644
--- a/components/modal/demo/button-props.md
+++ b/components/modal/demo/button-props.md
@@ -8,7 +8,7 @@
 Passing `okButtonProps` and `cancelButtonProps` can customize the ok button and cancel button props.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" @click="showModal">Open Modal with customized button props</a-button>
diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md
index de915d0e7..ed1f7ef1b 100644
--- a/components/modal/demo/confirm-promise.md
+++ b/components/modal/demo/confirm-promise.md
@@ -9,7 +9,7 @@ To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk functio
 delay closing the dialog.
 </us>
 
-```html
+```tpl
 <template>
   <a-button @click="showConfirm">
     Confirm
diff --git a/components/modal/demo/confirm-router.md b/components/modal/demo/confirm-router.md
index 669829d15..d7d4313f5 100644
--- a/components/modal/demo/confirm-router.md
+++ b/components/modal/demo/confirm-router.md
@@ -8,7 +8,7 @@
 `Modal.destroyAll()` could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically
 </us>
 
-```html
+```tpl
 <template>
   <a-button @click="showConfirm">
     Confirm
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index 49797b9cb..b515d010d 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -8,7 +8,7 @@
 To use `confirm()` to popup a confirmation modal dialog.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button @click="showConfirm">
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index a49632b9d..61ce0da7d 100644
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -12,7 +12,7 @@ the modal dialog will be closed.
 You could set `footer` to `null` if you don't need default footer buttons.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" @click="showModal">
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
index d9da1981a..345069bf9 100644
--- a/components/modal/demo/info.md
+++ b/components/modal/demo/info.md
@@ -8,7 +8,7 @@
 In the various types of information modal dialog, only one button to close dialog is provided.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button @click="info">Info</a-button>
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
index 8f00e3da9..f221bbab7 100644
--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@@ -8,7 +8,7 @@
 To customize the text of the buttons, you need to set `okText` and `cancelText` props.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button type="primary" @click="showModal">Modal</a-button>
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
index 57083bf0e..5fab51243 100644
--- a/components/modal/demo/manual.md
+++ b/components/modal/demo/manual.md
@@ -8,7 +8,7 @@
 Manually updateing and destroying a modal from `Modal.method`.
 </us>
 
-```html
+```tpl
 <template>
   <a-button @click="countDown">Open modal to close in 5s</a-button>
 </template>
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index f638e035e..f866056e4 100644
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@@ -8,7 +8,7 @@
 You can use `centered`,`style.top` or other styles to set position of modal dialog.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-modal-demo-position">
     <a-button type="primary" @click="() => setModal1Visible(true)"
diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md
index a8a97cf42..658d824f3 100644
--- a/components/notification/demo/basic.md
+++ b/components/notification/demo/basic.md
@@ -8,7 +8,7 @@
 The simplest usage that close the notification box after 4.5s.
 </us>
 
-```html
+```tpl
 <template>
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
diff --git a/components/notification/demo/custom-icon.md b/components/notification/demo/custom-icon.md
index 24752702f..70b97dca2 100644
--- a/components/notification/demo/custom-icon.md
+++ b/components/notification/demo/custom-icon.md
@@ -8,7 +8,7 @@
 The icon can be customized to any vue node or (h) => vue node.
 </us>
 
-```html
+```tpl
 <template>
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
diff --git a/components/notification/demo/custom-style.md b/components/notification/demo/custom-style.md
index cca00facf..1132dacd5 100644
--- a/components/notification/demo/custom-style.md
+++ b/components/notification/demo/custom-style.md
@@ -8,7 +8,7 @@
 The style and className are available to customize Notification.
 </us>
 
-```html
+```tpl
 <template>
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md
index 55de4d77a..15d3eb8b6 100644
--- a/components/notification/demo/duration.md
+++ b/components/notification/demo/duration.md
@@ -10,7 +10,7 @@ the notification closes automatically. If not specified, default value is 4.5 se
 the notification box will never close automatically.
 </us>
 
-```html
+```tpl
 <template>
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index 77dd8d563..77ecefa2c 100644
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -8,7 +8,7 @@
 A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` or `topLeft`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-select v-model="selected" :style="{ width: '120px', marginRight: '10px' }">
diff --git a/components/notification/demo/update.md b/components/notification/demo/update.md
index 938e15cbc..8adde9581 100644
--- a/components/notification/demo/update.md
+++ b/components/notification/demo/update.md
@@ -8,7 +8,7 @@
 Update content with unique key.
 </us>
 
-```html
+```tpl
 <template>
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index b20207816..d65ed1fda 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -8,7 +8,7 @@
 To customize the style or font of the close button.
 </us>
 
-```html
+```tpl
 <template>
   <a-button type="primary" @click="openNotification">Open the notification box</a-button>
 </template>
diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md
index 7646639ef..3d254b051 100644
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -8,7 +8,7 @@
 A notification box with a icon at the left side.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button @click="() => openNotificationWithIcon('success')">Success</a-button>
diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md
index 85a5e3b36..41b038db8 100644
--- a/components/pagination/demo/basic.md
+++ b/components/pagination/demo/basic.md
@@ -8,7 +8,7 @@
 Basic pagination.
 </us>
 
-```html
+```tpl
 <template>
   <a-pagination v-model="current" :total="50" />
 </template>
diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md
index a7f4838dd..75961c6ba 100644
--- a/components/pagination/demo/changer.md
+++ b/components/pagination/demo/changer.md
@@ -8,7 +8,7 @@
 Change `pageSize`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-pagination
diff --git a/components/pagination/demo/controlled.md b/components/pagination/demo/controlled.md
index 4bea0e98b..84fdba22b 100644
--- a/components/pagination/demo/controlled.md
+++ b/components/pagination/demo/controlled.md
@@ -8,7 +8,7 @@
 Controlled page number.
 </us>
 
-```html
+```tpl
 <template>
   <a-pagination @change="onChange" :current="current" :total="50" />
 </template>
diff --git a/components/pagination/demo/custom-changer.md b/components/pagination/demo/custom-changer.md
index 4d7e3b057..0afbf63ee 100644
--- a/components/pagination/demo/custom-changer.md
+++ b/components/pagination/demo/custom-changer.md
@@ -8,7 +8,7 @@
 Customize dropdown options such as adding all options
 </us>
 
-```html
+```tpl
 <template>
   <a-pagination
     :pageSizeOptions="pageSizeOptions"
diff --git a/components/pagination/demo/itemRender.md b/components/pagination/demo/itemRender.md
index d05cd2d8d..6b8da5ebe 100644
--- a/components/pagination/demo/itemRender.md
+++ b/components/pagination/demo/itemRender.md
@@ -8,7 +8,7 @@
 Use text link for prev and next button.
 </us>
 
-```html
+```tpl
 <template>
   <a-pagination :total="500" :itemRender="itemRender" />
 </template>
diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md
index 15df0375f..b055c56a8 100644
--- a/components/pagination/demo/jump.md
+++ b/components/pagination/demo/jump.md
@@ -8,7 +8,7 @@
 Jump to a page directly.
 </us>
 
-```html
+```tpl
 <template>
   <a-pagination showQuickJumper :defaultCurrent="2" :total="500" @change="onChange" />
 </template>
diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md
index dead6696f..131078f8b 100644
--- a/components/pagination/demo/mini.md
+++ b/components/pagination/demo/mini.md
@@ -8,7 +8,7 @@
 Mini size pagination.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-pagination-demo-mini">
     <a-pagination size="small" :total="50" />
diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md
index 44b4fcaa1..2cb0b1e3e 100644
--- a/components/pagination/demo/more.md
+++ b/components/pagination/demo/more.md
@@ -8,7 +8,7 @@
 Mode pages.
 </us>
 
-```html
+```tpl
 <template>
   <a-pagination :defaultCurrent="6" :total="500" />
 </template>
diff --git a/components/pagination/demo/simple.md b/components/pagination/demo/simple.md
index 6b7c71dc0..3de4a3804 100644
--- a/components/pagination/demo/simple.md
+++ b/components/pagination/demo/simple.md
@@ -8,7 +8,7 @@
 Simple mode.
 </us>
 
-```html
+```tpl
 <template>
   <a-pagination simple :defaultCurrent="2" :total="50" />
 </template>
diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md
index 8d53ffb2a..2a53909a8 100644
--- a/components/pagination/demo/total.md
+++ b/components/pagination/demo/total.md
@@ -8,7 +8,7 @@
 You can show the total number of data by setting `showTotal`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-pagination
diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md
index 278b96a42..9a8855a58 100644
--- a/components/popconfirm/demo/basic.md
+++ b/components/popconfirm/demo/basic.md
@@ -8,7 +8,7 @@
 The basic example.
 </us>
 
-```html
+```tpl
 <template>
   <a-popconfirm
     title="Are you sure delete this task?"
diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md
index bfe50b009..fbe9f2d44 100644
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -8,7 +8,7 @@
 Make it pop up under some conditions.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-popconfirm
diff --git a/components/popconfirm/demo/icon.md b/components/popconfirm/demo/icon.md
index cedd91183..85c5e2fdb 100644
--- a/components/popconfirm/demo/icon.md
+++ b/components/popconfirm/demo/icon.md
@@ -8,7 +8,7 @@
 Set `icon` props to customize the icon.
 </us>
 
-```html
+```tpl
 <template>
   <a-popconfirm title="Are you sure？">
     <a-icon slot="icon" type="question-circle-o" style="color: red" />
diff --git a/components/popconfirm/demo/local.md b/components/popconfirm/demo/local.md
index a20937d61..e359ee489 100644
--- a/components/popconfirm/demo/local.md
+++ b/components/popconfirm/demo/local.md
@@ -8,7 +8,7 @@
 Set `okText` and `cancelText` props to customize the button's labels.
 </us>
 
-```html
+```tpl
 <template>
   <a-popconfirm title="Are you sure？" okText="Yes" cancelText="No">
     <a href="#">Delete</a>
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
index 337a2c257..74a39c43f 100644
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@@ -8,7 +8,7 @@
 There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-a-popconfirm-demo-placement">
     <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
diff --git a/components/popover/demo/arrow-point-at-center.md b/components/popover/demo/arrow-point-at-center.md
index c9adf17bf..22a6e2814 100644
--- a/components/popover/demo/arrow-point-at-center.md
+++ b/components/popover/demo/arrow-point-at-center.md
@@ -8,7 +8,7 @@
 The arrow points to the center of the target element, which set `arrowPointAtCenter`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-popover placement="topLeft">
diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md
index 3acb7485e..2df2cf743 100644
--- a/components/popover/demo/basic.md
+++ b/components/popover/demo/basic.md
@@ -8,7 +8,7 @@
 The most basic example. The size of the floating layer depends on the contents region.
 </us>
 
-```html
+```tpl
 <template>
   <a-popover title="Title">
     <template slot="content">
diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md
index 4f37cce0c..752deed6f 100644
--- a/components/popover/demo/control.md
+++ b/components/popover/demo/control.md
@@ -8,7 +8,7 @@
 Use `visible` prop to control the display of the card.
 </us>
 
-```html
+```tpl
 <template>
   <a-popover title="Title" trigger="click" v-model="visible">
     <a @click="hide" slot="content">Close</a>
diff --git a/components/popover/demo/hover-with-click.md b/components/popover/demo/hover-with-click.md
index fcaad6534..15c56ba83 100644
--- a/components/popover/demo/hover-with-click.md
+++ b/components/popover/demo/hover-with-click.md
@@ -8,7 +8,7 @@
 The following example shows how to create a popover which can be hovered and clicked.
 </us>
 
-```html
+```tpl
 <template>
   <a-popover
     style="width: 500px"
diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md
index 60bd45d21..90c28285e 100644
--- a/components/popover/demo/placement.md
+++ b/components/popover/demo/placement.md
@@ -8,7 +8,7 @@
 There are 12 `placement` options available.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-popover-demo-placement">
     <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
diff --git a/components/popover/demo/triggerType.md b/components/popover/demo/triggerType.md
index 39dd340fc..ca752149b 100644
--- a/components/popover/demo/triggerType.md
+++ b/components/popover/demo/triggerType.md
@@ -8,7 +8,7 @@
 Mouse to click, focus and move in.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-popover title="Title" trigger="hover">
diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md
index 35db93974..7b712c218 100644
--- a/components/progress/demo/circle-dynamic.md
+++ b/components/progress/demo/circle-dynamic.md
@@ -8,7 +8,7 @@
 A dynamic progress bar is better.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-progress type="circle" :percent="percent" />
diff --git a/components/progress/demo/circle-mini.md b/components/progress/demo/circle-mini.md
index a616d1aaf..496831695 100644
--- a/components/progress/demo/circle-mini.md
+++ b/components/progress/demo/circle-mini.md
@@ -8,7 +8,7 @@
 A smaller circular progress bar.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-progress type="circle" :percent="30" :width="80" />
diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md
index 38ee5eab2..875a1a50e 100644
--- a/components/progress/demo/circle.md
+++ b/components/progress/demo/circle.md
@@ -8,7 +8,7 @@
 A circular progress bar.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-progress type="circle" :percent="75" />
diff --git a/components/progress/demo/dashboard.md b/components/progress/demo/dashboard.md
index a8af3fe03..77ec08be7 100644
--- a/components/progress/demo/dashboard.md
+++ b/components/progress/demo/dashboard.md
@@ -8,7 +8,7 @@ By setting `type=dashboard`, you can get a dashboard style of progress easily.
 A standard progress bar.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-progress type="dashboard" :percent="75" />
diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md
index 56138c886..c62421bf7 100644
--- a/components/progress/demo/dynamic.md
+++ b/components/progress/demo/dynamic.md
@@ -8,7 +8,7 @@
 A dynamic progress bar is better.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-progress :percent="percent" />
diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md
index ecec7df60..be66a92bb 100644
--- a/components/progress/demo/format.md
+++ b/components/progress/demo/format.md
@@ -8,7 +8,7 @@
 You can set a custom text by setting the `format` prop.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-progress type="circle" :percent="75" :format="percent => `${percent} Days`" />
diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md
index be77d05cc..0ba81188f 100644
--- a/components/progress/demo/line-mini.md
+++ b/components/progress/demo/line-mini.md
@@ -8,7 +8,7 @@
 Appropriate for a narrow area.
 </us>
 
-```html
+```tpl
 <template>
   <div style="width: 170px">
     <a-progress :percent="30" size="small" />
diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md
index b5cfa6c87..7f4f572ea 100644
--- a/components/progress/demo/line.md
+++ b/components/progress/demo/line.md
@@ -8,7 +8,7 @@
 A standard progress bar.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-progress :percent="30" />
diff --git a/components/progress/demo/linecap.md b/components/progress/demo/linecap.md
index b79ee8c7d..458698531 100644
--- a/components/progress/demo/linecap.md
+++ b/components/progress/demo/linecap.md
@@ -8,7 +8,7 @@
 `strokeLinecap="square|round"` 可以调整进度条边缘的形状。
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-progress strokeLinecap="square" :percent="75" />
diff --git a/components/progress/demo/segment.md b/components/progress/demo/segment.md
index 514b6463d..d95ea9dee 100644
--- a/components/progress/demo/segment.md
+++ b/components/progress/demo/segment.md
@@ -8,7 +8,7 @@
 A standard progress bar.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-tooltip title="3 done / 3 in progress / 4 to do">
diff --git a/components/radio/demo/basic.md b/components/radio/demo/basic.md
index 7c75988d7..b03fa5076 100644
--- a/components/radio/demo/basic.md
+++ b/components/radio/demo/basic.md
@@ -8,7 +8,7 @@
 The simplest use.
 </us>
 
-```html
+```tpl
 <template>
   <a-radio>Radio</a-radio>
 </template>
diff --git a/components/radio/demo/disabled.md b/components/radio/demo/disabled.md
index 2fdeb3ffc..1439ba851 100644
--- a/components/radio/demo/disabled.md
+++ b/components/radio/demo/disabled.md
@@ -8,7 +8,7 @@ Radio 不可用。
 Radio unavailable.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-radio :defaultChecked="false" :disabled="disabled">Disabled</a-radio>
diff --git a/components/radio/demo/radioButton-solid.md b/components/radio/demo/radioButton-solid.md
index d3614674f..fc1e9c1cd 100644
--- a/components/radio/demo/radioButton-solid.md
+++ b/components/radio/demo/radioButton-solid.md
@@ -8,7 +8,7 @@
 Solid radio button style.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div>
diff --git a/components/radio/demo/radioButton.md b/components/radio/demo/radioButton.md
index 4ac5c68e8..82f2aa8ec 100644
--- a/components/radio/demo/radioButton.md
+++ b/components/radio/demo/radioButton.md
@@ -8,7 +8,7 @@
 The combination of radio button style.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div>
diff --git a/components/radio/demo/radioGroup-more.md b/components/radio/demo/radioGroup-more.md
index 908704634..7d091ffc1 100644
--- a/components/radio/demo/radioGroup-more.md
+++ b/components/radio/demo/radioGroup-more.md
@@ -8,7 +8,7 @@
 Vertical RadioGroup, with more radios.
 </us>
 
-```html
+```tpl
 <template>
   <a-radio-group @change="onChange" v-model="value">
     <a-radio :style="radioStyle" :value="1">Option A</a-radio>
diff --git a/components/radio/demo/radioGroup-options.md b/components/radio/demo/radioGroup-options.md
index 51a2fb9a3..ef690f931 100644
--- a/components/radio/demo/radioGroup-options.md
+++ b/components/radio/demo/radioGroup-options.md
@@ -8,7 +8,7 @@
 Render radios by configuring `options`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
diff --git a/components/radio/demo/radioGroup-with-name.md b/components/radio/demo/radioGroup-with-name.md
index a7decb0ac..4580ac7c5 100644
--- a/components/radio/demo/radioGroup-with-name.md
+++ b/components/radio/demo/radioGroup-with-name.md
@@ -8,7 +8,7 @@
 Passing the `name` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your RadioGroup as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same RadioGroup.
 </us>
 
-```html
+```tpl
 <template>
   <a-radio-group name="radioGroup" :defaultValue="1">
     <a-radio :value="1">A</a-radio>
diff --git a/components/radio/demo/radioGroup.md b/components/radio/demo/radioGroup.md
index 79d759eb5..303453f3c 100644
--- a/components/radio/demo/radioGroup.md
+++ b/components/radio/demo/radioGroup.md
@@ -8,7 +8,7 @@
 A group of radio components.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-radio-group @change="onChange" v-model="value">
diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md
index 68dd9a655..8e1f17346 100644
--- a/components/radio/demo/size.md
+++ b/components/radio/demo/size.md
@@ -8,7 +8,7 @@
 There are three sizes available: large, medium, and small. It can coordinate with input box.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div>
diff --git a/components/rate/demo/basic.md b/components/rate/demo/basic.md
index bb1ebf860..0e606b4f7 100644
--- a/components/rate/demo/basic.md
+++ b/components/rate/demo/basic.md
@@ -8,7 +8,7 @@
 The simplest usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-rate v-model="value" />
 </template>
diff --git a/components/rate/demo/character.md b/components/rate/demo/character.md
index a18865f85..d58972cb9 100644
--- a/components/rate/demo/character.md
+++ b/components/rate/demo/character.md
@@ -8,7 +8,7 @@
 Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-rate allowHalf>
diff --git a/components/rate/demo/clear.md b/components/rate/demo/clear.md
index a92c8a188..44a4a24b6 100644
--- a/components/rate/demo/clear.md
+++ b/components/rate/demo/clear.md
@@ -8,7 +8,7 @@
 Support set allow to clear star when click again.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-rate :defaultValue="3" /> allowClear: true
diff --git a/components/rate/demo/disabled.md b/components/rate/demo/disabled.md
index f2b1d7af1..20cd11f83 100644
--- a/components/rate/demo/disabled.md
+++ b/components/rate/demo/disabled.md
@@ -8,7 +8,7 @@
 Read only, can't use mouse to interact.
 </us>
 
-```html
+```tpl
 <template>
   <a-rate :defaultValue="2" disabled />
 </template>
diff --git a/components/rate/demo/half.md b/components/rate/demo/half.md
index 38631bacd..ae13172e6 100644
--- a/components/rate/demo/half.md
+++ b/components/rate/demo/half.md
@@ -8,7 +8,7 @@
 Support select half star.
 </us>
 
-```html
+```tpl
 <template>
   <a-rate :defaultValue="2.5" allowHalf />
 </template>
diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md
index 6930e261e..faabaad5b 100644
--- a/components/rate/demo/text.md
+++ b/components/rate/demo/text.md
@@ -8,7 +8,7 @@
 Add copywriting in rate components.
 </us>
 
-```html
+```tpl
 <template>
   <span>
     <a-rate :tooltips="desc" v-model="value" />
diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md
index 5e981ab7f..caa325e1e 100644
--- a/components/select/demo/automatic-tokenization.md
+++ b/components/select/demo/automatic-tokenization.md
@@ -8,7 +8,7 @@
 Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode.
 </us>
 
-```html
+```tpl
 <template>
   <a-select mode="tags" style="width: 100%" :tokenSeparators="[',']" @change="handleChange">
     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i"
diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index 6e7e00353..5fe9bdcdd 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -8,7 +8,7 @@
 Basic Usage
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-select defaultValue="lucy" style="width: 120px" @change="handleChange">
diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md
index 479379971..4327b711c 100644
--- a/components/select/demo/coordinate.md
+++ b/components/select/demo/coordinate.md
@@ -10,7 +10,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.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-select :defaultValue="provinceData[0]" style="width: 120px" @change="handleProvinceChange">
diff --git a/components/select/demo/custom-dropdown-menu.md b/components/select/demo/custom-dropdown-menu.md
index c2812bafe..b1957560f 100644
--- a/components/select/demo/custom-dropdown-menu.md
+++ b/components/select/demo/custom-dropdown-menu.md
@@ -8,7 +8,7 @@
 Customize the dropdown menu via `dropdownRender`.
 </us>
 
-```html
+```tpl
 <template>
   <a-select defaultValue="lucy" style="width: 120px">
     <div slot="dropdownRender" slot-scope="menu">
diff --git a/components/select/demo/hide-selected.md b/components/select/demo/hide-selected.md
index 33cedd584..fcda89e45 100644
--- a/components/select/demo/hide-selected.md
+++ b/components/select/demo/hide-selected.md
@@ -8,7 +8,7 @@
 Hide already selected options in the dropdown.
 </us>
 
-```html
+```tpl
 <template>
   <a-select
     mode="multiple"
diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md
index 15df3f882..29c8182e6 100644
--- a/components/select/demo/label-in-value.md
+++ b/components/select/demo/label-in-value.md
@@ -10,7 +10,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.
 </us>
 
-```html
+```tpl
 <template>
   <a-select
     labelInValue
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 8823d9609..dcb2f0894 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -8,7 +8,7 @@
 Multiple selection, selecting from existing items (scroll the menu).
 </us>
 
-```html
+```tpl
 <template>
   <a-select
     mode="multiple"
diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md
index 11bbd30a5..cf2535318 100644
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@@ -8,7 +8,7 @@
 Using `OptGroup` to group the options.
 </us>
 
-```html
+```tpl
 <template>
   <a-select defaultValue="lucy" style="width: 200px" @change="handleChange">
     <a-select-opt-group>
diff --git a/components/select/demo/options.md b/components/select/demo/options.md
index 5a120063b..1749730db 100644
--- a/components/select/demo/options.md
+++ b/components/select/demo/options.md
@@ -8,7 +8,7 @@
 The select list can be populated using `options` property. This is a quick and easy way to provide the select content.
 </us>
 
-```html
+```tpl
 <template>
   <a-select defaultValue="beijing" style="width: 120px" @change="handleChange" :options="options" />
 </template>
diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md
index c47b9b8be..2cc159fbd 100644
--- a/components/select/demo/search-box.md
+++ b/components/select/demo/search-box.md
@@ -8,7 +8,7 @@
 Search with remote data.
 </us>
 
-```html
+```tpl
 <template>
   <a-select
     showSearch
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
index d5aaa825f..adc2d2bec 100644
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -8,7 +8,7 @@
 Search the options while expanded.
 </us>
 
-```html
+```tpl
 <template>
   <a-select
     showSearch
diff --git a/components/select/demo/select-users.md b/components/select/demo/select-users.md
index 563f5dad2..2f65bb742 100644
--- a/components/select/demo/select-users.md
+++ b/components/select/demo/select-users.md
@@ -8,7 +8,7 @@
 A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
 </us>
 
-```html
+```tpl
 <template>
   <a-select
     mode="multiple"
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index 5b13a9d02..66b907fa9 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -8,7 +8,7 @@
 The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-radio-group v-model="size">
diff --git a/components/select/demo/suffix.md b/components/select/demo/suffix.md
index 08daa20c4..7173d5d22 100644
--- a/components/select/demo/suffix.md
+++ b/components/select/demo/suffix.md
@@ -8,7 +8,7 @@
 Basic Usage
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-select defaultValue="lucy" style="width: 120px" @change="handleChange">
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index 2e020ade3..030dec100 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -8,7 +8,7 @@ tags select，随意输入的内容（scroll the menu）
 Select with tags, transform input to tag (scroll the menu)
 </us>
 
-```html
+```tpl
 <template>
   <a-select mode="tags" style="width: 100%" @change="handleChange" placeholder="Tags Mode">
     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i"
diff --git a/components/skeleton/demo/active.md b/components/skeleton/demo/active.md
index b1c877be1..73fa94c1f 100644
--- a/components/skeleton/demo/active.md
+++ b/components/skeleton/demo/active.md
@@ -8,7 +8,7 @@
 Display active animation.
 </us>
 
-```html
+```tpl
 <template>
   <a-skeleton active />
 </template>
diff --git a/components/skeleton/demo/basic.md b/components/skeleton/demo/basic.md
index 3fdbf37ad..339eb1b45 100644
--- a/components/skeleton/demo/basic.md
+++ b/components/skeleton/demo/basic.md
@@ -8,7 +8,7 @@
 Simplest Skeleton usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-skeleton />
 </template>
diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md
index e6521e6e8..506b9dfe7 100644
--- a/components/skeleton/demo/children.md
+++ b/components/skeleton/demo/children.md
@@ -8,7 +8,7 @@
 Skeleton contains sub component.
 </us>
 
-```html
+```tpl
 <template>
   <div class="article">
     <a-skeleton :loading="loading">
diff --git a/components/skeleton/demo/complex.md b/components/skeleton/demo/complex.md
index b0e112e83..c04c73f17 100644
--- a/components/skeleton/demo/complex.md
+++ b/components/skeleton/demo/complex.md
@@ -8,7 +8,7 @@
 Complex combination with avatar and multiple paragraphs.
 </us>
 
-```html
+```tpl
 <template>
   <a-skeleton avatar :paragraph="{rows: 4}" />
 </template>
diff --git a/components/skeleton/demo/list.md b/components/skeleton/demo/list.md
index 345bf0412..4faf2a8a5 100644
--- a/components/skeleton/demo/list.md
+++ b/components/skeleton/demo/list.md
@@ -8,7 +8,7 @@
 Use skeleton in list component.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch :checked="!loading" @change="onChange" />
diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
index f8f0526d9..f3244e254 100644
--- a/components/slider/demo/basic.md
+++ b/components/slider/demo/basic.md
@@ -8,7 +8,7 @@
 Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-slider id="test" :defaultValue="30" :disabled="disabled" />
diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md
index 423c76560..c670d1e7c 100644
--- a/components/slider/demo/event.md
+++ b/components/slider/demo/event.md
@@ -9,7 +9,7 @@ The `onChange` callback function will fire when the user changes the slider's va
 The `onAfterChange` callback function will fire when `onmouseup` fired.
 </us>
 
-```html
+```tpl
 <template>
   <div class="code-box-demo">
     <a-slider :defaultValue="30" @change="onChange" @afterChange="onAfterChange" />
diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
index aab39bfe3..31a0474e3 100644
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@@ -8,7 +8,7 @@
 You can add an icon beside the slider to make it meaningful.
 </us>
 
-```html
+```tpl
 <template>
   <div class="icon-wrapper">
     <a-icon :style="{color: preColor}" type="frown-o" />
diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md
index 2bb5499af..70e22335d 100644
--- a/components/slider/demo/input-number.md
+++ b/components/slider/demo/input-number.md
@@ -8,7 +8,7 @@
 Synchronize with [InputNumber](/components/input-number/) component.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-row>
diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
index a3ee76d1f..e25f8d62c 100644
--- a/components/slider/demo/mark.md
+++ b/components/slider/demo/mark.md
@@ -10,7 +10,7 @@ When `included` is false, means that different thumbs are coordinative.
 when `step` is null, users can only slide the thumbs onto marks.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-slider-demo-mark">
     <h4>included=true</h4>
diff --git a/components/slider/demo/show-tooltip.md b/components/slider/demo/show-tooltip.md
index b008b6581..77a2687d8 100644
--- a/components/slider/demo/show-tooltip.md
+++ b/components/slider/demo/show-tooltip.md
@@ -8,7 +8,7 @@
 When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
 </us>
 
-```html
+```tpl
 <template>
   <a-slider :defaultValue="30" :tooltipVisible="true" />
 </template>
diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md
index a7b818cd5..0bd352ee2 100644
--- a/components/slider/demo/tip-formatter.md
+++ b/components/slider/demo/tip-formatter.md
@@ -8,7 +8,7 @@
 Use `tipFormatter` to format content of `Toolip`. If `tipFormatter` is null, hide it.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-slider :tipFormatter="formatter" />
diff --git a/components/slider/demo/vertical.md b/components/slider/demo/vertical.md
index 1734b9ba1..45766b67e 100644
--- a/components/slider/demo/vertical.md
+++ b/components/slider/demo/vertical.md
@@ -8,7 +8,7 @@
 The vertical Slider.
 </us>
 
-```html
+```tpl
 <template>
   <div style="height: 300px">
     <div style="float:left;height: 300px;marginLeft: 70px">
diff --git a/components/spin/demo/basic.md b/components/spin/demo/basic.md
index d29324538..2af8e298b 100644
--- a/components/spin/demo/basic.md
+++ b/components/spin/demo/basic.md
@@ -8,7 +8,7 @@
 A simple loading status.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-spin />
diff --git a/components/spin/demo/custom-indicator.md b/components/spin/demo/custom-indicator.md
index a2d1d739e..8445212c1 100644
--- a/components/spin/demo/custom-indicator.md
+++ b/components/spin/demo/custom-indicator.md
@@ -8,7 +8,7 @@
 Use custom loading indicator.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-spin>
diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
index 72c2cf004..1417e0f58 100644
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@@ -8,7 +8,7 @@
 Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
 </us>
 
-```html
+```tpl
 <style scoped>
   .spin-content {
     border: 1px solid #91d5ff;
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
index cd51041fc..ffd0fdf4d 100644
--- a/components/spin/demo/inside.md
+++ b/components/spin/demo/inside.md
@@ -8,7 +8,7 @@
 Spin in a container.
 </us>
 
-```html
+```tpl
 <style scoped>
   .example {
     text-align: center;
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index f99f79aa7..e33d23ff1 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -8,7 +8,7 @@
 Embedding content into `Spin` will alter it into loading state.
 </us>
 
-```html
+```tpl
 <style scoped>
   .spin-content {
     border: 1px solid #91d5ff;
diff --git a/components/spin/demo/size.md b/components/spin/demo/size.md
index c97ee4d64..9195c1f36 100644
--- a/components/spin/demo/size.md
+++ b/components/spin/demo/size.md
@@ -8,7 +8,7 @@
 A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-spin size="small" />
diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md
index da3c9a98c..a871f6220 100644
--- a/components/spin/demo/tip.md
+++ b/components/spin/demo/tip.md
@@ -8,7 +8,7 @@
 Customized description content.
 </us>
 
-```html
+```tpl
 <style scoped>
   .spin-content {
     border: 1px solid #91d5ff;
diff --git a/components/statistic/demo/basic.md b/components/statistic/demo/basic.md
index 037138b87..077361fd8 100644
--- a/components/statistic/demo/basic.md
+++ b/components/statistic/demo/basic.md
@@ -8,7 +8,7 @@
 Simplest Usage.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-statistic title="Active Users" :value="112893" style="margin-right: 50px" />
diff --git a/components/statistic/demo/card.md b/components/statistic/demo/card.md
index ff15a8367..e7c0be93f 100644
--- a/components/statistic/demo/card.md
+++ b/components/statistic/demo/card.md
@@ -8,7 +8,7 @@
 Display statistic data in Card.
 </us>
 
-```html
+```tpl
 <template>
   <div style="background: #ECECEC; padding: 30px">
     <a-row :gutter="16">
diff --git a/components/statistic/demo/countdown.md b/components/statistic/demo/countdown.md
index 6c6541ef6..51e875774 100644
--- a/components/statistic/demo/countdown.md
+++ b/components/statistic/demo/countdown.md
@@ -8,7 +8,7 @@
 Countdown component.
 </us>
 
-```html
+```tpl
 <template>
   <a-row :gutter="16">
     <a-col :span="12">
diff --git a/components/statistic/demo/unit.md b/components/statistic/demo/unit.md
index f3118cb91..4342386fb 100644
--- a/components/statistic/demo/unit.md
+++ b/components/statistic/demo/unit.md
@@ -8,7 +8,7 @@
 Add unit through `prefix` and `suffix`.
 </us>
 
-```html
+```tpl
 <template>
   <a-row :gutter="16">
     <a-col :span="12">
diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md
index 19d6d979a..e60d8cb67 100644
--- a/components/steps/demo/customized-progress-dot.md
+++ b/components/steps/demo/customized-progress-dot.md
@@ -8,7 +8,7 @@
 You can customize the display for Steps with progress dot style.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-steps :current="1">
diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md
index c34a9d54d..f661c2565 100644
--- a/components/steps/demo/error.md
+++ b/components/steps/demo/error.md
@@ -8,7 +8,7 @@
 By using `status` of `Steps`, you can specify the state for current step.
 </us>
 
-```html
+```tpl
 <template>
   <a-steps :current="1" status="error">
     <a-step title="Finished" description="This is a description." />
diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md
index 4cbb78b34..9c9686458 100644
--- a/components/steps/demo/icon.md
+++ b/components/steps/demo/icon.md
@@ -8,7 +8,7 @@
 You can use your own custom icons by setting the property `icon` for `Steps.Step`.
 </us>
 
-```html
+```tpl
 <template>
   <a-steps>
     <a-step status="finish" title="Login">
diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md
index 2b3713f53..412c9e1a0 100644
--- a/components/steps/demo/progress-dot.md
+++ b/components/steps/demo/progress-dot.md
@@ -8,7 +8,7 @@
 Steps with progress dot style.
 </us>
 
-```html
+```tpl
 <template>
   <a-steps progressDot :current="1">
     <a-step title="Finished" description="This is a description." />
diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md
index 4fac59c4a..57fd68992 100644
--- a/components/steps/demo/simple.md
+++ b/components/steps/demo/simple.md
@@ -8,7 +8,7 @@
 The most basic step bar.
 </us>
 
-```html
+```tpl
 <template>
   <a-steps :current="1">
     <a-step>
diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md
index 27ed8df67..c1b6ed25a 100644
--- a/components/steps/demo/small-size.md
+++ b/components/steps/demo/small-size.md
@@ -8,7 +8,7 @@
 By setting like this: `<Steps size="small">`, you can get a mini version.
 </us>
 
-```html
+```tpl
 <template>
   <a-steps :current="1" size="small">
     <a-step title="Finished" />
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index 7b6b45253..1d12b8a9f 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -8,7 +8,7 @@
 Cooperate with the content and buttons, to represent the progress of a process.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-steps :current="current">
diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md
index db8945ae3..3fc4bde85 100644
--- a/components/steps/demo/vertical-small.md
+++ b/components/steps/demo/vertical-small.md
@@ -8,7 +8,7 @@
 A simple mini version step bar in the vertical direction.
 </us>
 
-```html
+```tpl
 <template>
   <a-steps direction="vertical" size="small" :current="1">
     <a-step title="Finished" description="This is a description." />
diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md
index a9f738837..991e7a994 100644
--- a/components/steps/demo/vertical.md
+++ b/components/steps/demo/vertical.md
@@ -8,7 +8,7 @@
 A simple step bar in the vertical direction.
 </us>
 
-```html
+```tpl
 <template>
   <a-steps direction="vertical" :current="1">
     <a-step title="Finished" description="This is a description." />
diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md
index 28230e79d..7e73d3d9b 100644
--- a/components/switch/demo/basic.md
+++ b/components/switch/demo/basic.md
@@ -8,7 +8,7 @@
 The most basic usage.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch defaultChecked @change="onChange" />
diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md
index e670ac116..608cec34b 100644
--- a/components/switch/demo/disabled.md
+++ b/components/switch/demo/disabled.md
@@ -8,7 +8,7 @@ Switch 失效状态。
 Disabled state of `Switch`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch defaultChecked :disabled="disabled" style="margin-bottom:5px" />
diff --git a/components/switch/demo/loading.md b/components/switch/demo/loading.md
index 25480ed47..431b6212d 100644
--- a/components/switch/demo/loading.md
+++ b/components/switch/demo/loading.md
@@ -8,7 +8,7 @@
 Mark a pending state of switch.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch loading defaultChecked />
diff --git a/components/switch/demo/size.md b/components/switch/demo/size.md
index 91d37e0da..0df08fed9 100644
--- a/components/switch/demo/size.md
+++ b/components/switch/demo/size.md
@@ -8,7 +8,7 @@
 `size="small"` represents a small sized switch.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch defaultChecked />
diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md
index 79c1dcd55..1d92b6af3 100644
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@@ -8,7 +8,7 @@
 With text and icon.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
index 71343632c..69ffd2766 100644
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@@ -11,7 +11,7 @@ This example shows how to fetch and present data from a remote server, and how t
 **Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.**
 </us>
 
-```html
+```tpl
 <template>
   <a-table
     :columns="columns"
diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md
index 71155faab..18be12335 100644
--- a/components/table/demo/basic.md
+++ b/components/table/demo/basic.md
@@ -8,7 +8,7 @@
 Simple table with actions.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data">
     <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md
index d6c0f84ec..07e66cc57 100644
--- a/components/table/demo/bordered.md
+++ b/components/table/demo/bordered.md
@@ -8,7 +8,7 @@
 Add border, title and footer for table.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data" bordered>
     <template slot="name" slot-scope="text">
diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md
index aeeb9b729..fbcdf4015 100644
--- a/components/table/demo/colspan-rowspan.md
+++ b/components/table/demo/colspan-rowspan.md
@@ -10,7 +10,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.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data" bordered>
     <template slot="name" slot-scope="text">
diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
index d568de139..ddbc46c70 100644
--- a/components/table/demo/custom-filter-panel.md
+++ b/components/table/demo/custom-filter-panel.md
@@ -8,7 +8,7 @@
 Implement a customized column search example via `filterDropdown`.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :dataSource="data" :columns="columns">
     <div
diff --git a/components/table/demo/edit-cell.md b/components/table/demo/edit-cell.md
index a3ca6886c..bc0a01004 100644
--- a/components/table/demo/edit-cell.md
+++ b/components/table/demo/edit-cell.md
@@ -8,7 +8,7 @@
 Table with editable cells.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-button class="editable-add-btn" @click="handleAdd">Add</a-button>
diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md
index 084dceed1..dd7b1dbdb 100644
--- a/components/table/demo/edit-row.md
+++ b/components/table/demo/edit-row.md
@@ -8,7 +8,7 @@
 Table with editable rows.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data" bordered>
     <template
diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md
index 9db85a5ce..be2a1b9b3 100644
--- a/components/table/demo/expand-children.md
+++ b/components/table/demo/expand-children.md
@@ -12,7 +12,7 @@ You can control the indent width by setting `indentSize`.
 > Note, no support for recursive selection of tree structure data table yet.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" />
 </template>
diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md
index fc28f3872..cfb8ee962 100644
--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@@ -8,7 +8,7 @@
 When there's too much information to show and the table can't display all at once.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data">
     <a slot="action" slot-scope="text" href="javascript:;">Delete</a>
diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md
index 4e542a940..76410c112 100644
--- a/components/table/demo/fixed-columns-header.md
+++ b/components/table/demo/fixed-columns-header.md
@@ -12,7 +12,7 @@ A Solution for displaying large amounts of data with long columns.
 > A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data" :scroll="{ x: 1500, y: 300 }">
     <a slot="action" slot-scope="text" href="javascript:;">action</a>
diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md
index c967e1069..37245a0f1 100644
--- a/components/table/demo/fixed-columns.md
+++ b/components/table/demo/fixed-columns.md
@@ -12,7 +12,7 @@ To fix some columns and scroll inside other columns, and you must set `scroll.x`
 > A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data" :scroll="{ x: 1300 }">
     <a slot="action" slot-scope="text" href="javascript:;">action</a>
diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md
index a80d95aaa..f673cc069 100644
--- a/components/table/demo/fixed-header.md
+++ b/components/table/demo/fixed-header.md
@@ -10,7 +10,7 @@ Display large amounts of data in scrollable view.
 > Specify width of columns if header and cell do not align properly.(Leave one column at least without width to fit fluid layout)
 </us>
 
-```html
+```tpl
 <template>
   <a-table
     :columns="columns"
diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md
index 85784d024..4ef9a1650 100644
--- a/components/table/demo/grouping-columns.md
+++ b/components/table/demo/grouping-columns.md
@@ -8,7 +8,7 @@
 Group table head with `columns[n].children`.
 </us>
 
-```html
+```tpl
 <template>
   <a-table
     :columns="columns"
diff --git a/components/table/demo/head.md b/components/table/demo/head.md
index 5d127cddd..8825a50fa 100644
--- a/components/table/demo/head.md
+++ b/components/table/demo/head.md
@@ -15,7 +15,7 @@ Uses `defaultSortOrder` to make a column sorted by default.
 If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data" @change="onChange" />
 </template>
diff --git a/components/table/demo/nested-table.md b/components/table/demo/nested-table.md
index b62fd7e61..858b5331b 100644
--- a/components/table/demo/nested-table.md
+++ b/components/table/demo/nested-table.md
@@ -8,7 +8,7 @@
 Showing more detailed info of every row.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :columns="columns" :dataSource="data" class="components-table-demo-nested">
     <a slot="operation" slot-scope="text" href="javascript:;">Publish</a>
diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md
index 2dc6d9c92..aca6a756e 100644
--- a/components/table/demo/reset-filter.md
+++ b/components/table/demo/reset-filter.md
@@ -14,7 +14,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
 > 3. `column.key` is required.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div class="table-operations">
diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md
index ba4ff11a8..c5839b020 100644
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@@ -8,7 +8,7 @@
 To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div style="margin-bottom: 16px">
diff --git a/components/table/demo/row-selection-custom.md b/components/table/demo/row-selection-custom.md
index 52ff0a291..5b241ee92 100644
--- a/components/table/demo/row-selection-custom.md
+++ b/components/table/demo/row-selection-custom.md
@@ -8,7 +8,7 @@
 Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" />
 </template>
diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md
index 1399c3849..acd24fd91 100644
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@@ -10,7 +10,7 @@ Rows can be selectable by making first column as a selectable column.
 > selection happens when clicking checkbox defaultly.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data">
     <a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
diff --git a/components/table/demo/size.md b/components/table/demo/size.md
index dec544551..a21198211 100644
--- a/components/table/demo/size.md
+++ b/components/table/demo/size.md
@@ -8,7 +8,7 @@
 Two compacted table size: `middle` and `small`, `small` size is used in Modal only.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-table-demo-size">
     <h4>Middle size table</h4>
diff --git a/components/table/demo/template.md b/components/table/demo/template.md
index c00bd4221..9cf22eaef 100644
--- a/components/table/demo/template.md
+++ b/components/table/demo/template.md
@@ -10,7 +10,7 @@ Using template style API
 > Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.
 </us>
 
-```html
+```tpl
 <template>
   <a-table :dataSource="data">
     <a-table-column-group>
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md
index a3350c5ef..cbe19aaf2 100644
--- a/components/tabs/demo/basic.md
+++ b/components/tabs/demo/basic.md
@@ -8,7 +8,7 @@
 Default activate first tab.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-tabs defaultActiveKey="1" @change="callback">
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index a0c8682d5..6533588d0 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -8,7 +8,7 @@
 Should be used at the top of container, needs to override styles.
 </us>
 
-```html
+```tpl
 <template>
   <div class="card-container">
     <a-tabs type="card">
diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
index f92ab9a71..19a8f55af 100644
--- a/components/tabs/demo/card.md
+++ b/components/tabs/demo/card.md
@@ -8,7 +8,7 @@
 Another type Tabs, which doesn't support vertical mode.
 </us>
 
-```html
+```tpl
 <template>
   <a-tabs @change="callback" type="card">
     <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>
diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md
index deb37413e..084fff00a 100644
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@@ -8,7 +8,7 @@
 Hide default plus icon, and bind event for customized trigger.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <div :style="{ marginBottom: '16px' }">
diff --git a/components/tabs/demo/custom-tab-bar.md b/components/tabs/demo/custom-tab-bar.md
index 9a5c69984..a1998f71b 100644
--- a/components/tabs/demo/custom-tab-bar.md
+++ b/components/tabs/demo/custom-tab-bar.md
@@ -8,7 +8,7 @@
 Customized bar of tab.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-tabs defaultActiveKey="1">
diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md
index 91b767945..45b5b7e4c 100644
--- a/components/tabs/demo/disabled.md
+++ b/components/tabs/demo/disabled.md
@@ -8,7 +8,7 @@
 Disabled a tab.
 </us>
 
-```html
+```tpl
 <template>
   <a-tabs defaultActiveKey="1">
     <a-tab-pane tab="Tab 1" key="1">Tab 1</a-tab-pane>
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index db96b7b0c..17ca6adf8 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -10,7 +10,7 @@ Only card type Tabs support adding & closable.
 +Use `closable={false}` to disable close.
 </us>
 
-```html
+```tpl
 <template>
   <a-tabs v-model="activeKey" type="editable-card" @edit="onEdit">
     <a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
index 3b06ce3f1..694a8b41a 100644
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@@ -8,7 +8,7 @@
 You can add extra actions to the right of Tabs.
 </us>
 
-```html
+```tpl
 <template>
   <a-tabs>
     <a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md
index de684420f..181592131 100644
--- a/components/tabs/demo/icon.md
+++ b/components/tabs/demo/icon.md
@@ -8,7 +8,7 @@
 The Tab with Icon.
 </us>
 
-```html
+```tpl
 <template>
   <a-tabs defaultActiveKey="2">
     <a-tab-pane key="1">
diff --git a/components/tabs/demo/nest.md b/components/tabs/demo/nest.md
index f4276fe3b..97c7175b6 100644
--- a/components/tabs/demo/nest.md
+++ b/components/tabs/demo/nest.md
@@ -10,7 +10,7 @@
 Default activate first tab.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-select style="width: 200px" v-model="parentPos">
diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md
index 91dd862e3..f8e4b751c 100644
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@@ -8,7 +8,7 @@
 Tab's position: left, right, top or bottom.
 </us>
 
-```html
+```tpl
 <template>
   <div style="width: 500px">
     <a-radio-group v-model="tabPosition" style="margin:8px">
diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md
index 4b965320f..289404720 100644
--- a/components/tabs/demo/size.md
+++ b/components/tabs/demo/size.md
@@ -8,7 +8,7 @@
 Large size tabs are usally used in page header, and small size could be used in Modal.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-radio-group v-model="size" style="margin-bottom: 16px">
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index 0097fb3de..0fb24e99d 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -8,7 +8,7 @@
 In order to fit in more tabs, they can slide left and right (or up and down).
 </us>
 
-```html
+```tpl
 <template>
   <div style="width: 500px">
     <a-radio-group v-model="mode" :style="{ marginBottom: '8px' }">
diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md
index 4e4bc9b31..eeb0e32ac 100644
--- a/components/tag/demo/basic.md
+++ b/components/tag/demo/basic.md
@@ -8,7 +8,7 @@
 Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-tag>Tag 1</a-tag>
diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md
index c40607e74..d7c832454 100644
--- a/components/tag/demo/checkable.md
+++ b/components/tag/demo/checkable.md
@@ -10,7 +10,7 @@
 > it is an absolute controlled component and has no uncontrolled mode.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-checkable-tag v-model="checked1" @change="handleChange">Tag1</a-checkable-tag>
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
index 63f39e6a1..4d139a2cf 100644
--- a/components/tag/demo/colorful.md
+++ b/components/tag/demo/colorful.md
@@ -9,7 +9,7 @@ We preset a series of colorful tag style for different situation usage.
 And you can always set it to a hex color string for custom color.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <h4 style="margin-bottom: 16px">Presets:</h4>
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
index b561661df..7e003f2b5 100644
--- a/components/tag/demo/control.md
+++ b/components/tag/demo/control.md
@@ -9,7 +9,7 @@ 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.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <template v-for="(tag, index) in tags">
diff --git a/components/tag/demo/controlled.md b/components/tag/demo/controlled.md
index 70deb93b1..ed1942bbf 100644
--- a/components/tag/demo/controlled.md
+++ b/components/tag/demo/controlled.md
@@ -8,7 +8,7 @@
 By using the `visible` prop, you can control the close state of Tag.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-tag closable v-model="visible">
diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md
index 571efa6dc..0a252caa7 100644
--- a/components/tag/demo/hot-tags.md
+++ b/components/tag/demo/hot-tags.md
@@ -8,7 +8,7 @@
 Select your favourite topics.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <strong :style="{ marginRight: 8 }">Categories:</strong>
diff --git a/components/time-picker/demo/12hours.md b/components/time-picker/demo/12hours.md
index 3007b332a..c01a6bacf 100644
--- a/components/time-picker/demo/12hours.md
+++ b/components/time-picker/demo/12hours.md
@@ -8,7 +8,7 @@
 TimePicker of 12 hours format, with default format `h:mm:ss a`.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-time-picker use12Hours @change="onChange" />
diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md
index 3a262becd..7e2dffd47 100644
--- a/components/time-picker/demo/addon.md
+++ b/components/time-picker/demo/addon.md
@@ -8,7 +8,7 @@
 Render addon contents to timepicker panel's bottom.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-time-picker @openChange="handleOpenChange" :open="open">
diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md
index f4ba0de94..f1b2b037e 100644
--- a/components/time-picker/demo/basic.md
+++ b/components/time-picker/demo/basic.md
@@ -8,7 +8,7 @@
 Click `TimePicker`, and then we could select or input a time in panel.
 </us>
 
-```html
+```tpl
 <template>
   <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')" />
 </template>
diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md
index 02fe91011..6bdc8c568 100644
--- a/components/time-picker/demo/disabled.md
+++ b/components/time-picker/demo/disabled.md
@@ -8,7 +8,7 @@
 A disabled state of the `TimePicker`.
 </us>
 
-```html
+```tpl
 <template>
   <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" disabled />
 </template>
diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md
index a7e2644fb..7731aad6c 100644
--- a/components/time-picker/demo/hide-column.md
+++ b/components/time-picker/demo/hide-column.md
@@ -8,7 +8,7 @@ TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的
 While part of `format` is omitted, the corresponding column in panel will disappear, too.
 </us>
 
-```html
+```tpl
 <template>
   <a-time-picker :defaultValue="moment('12:08', 'HH:mm')" format="HH:mm" />
 </template>
diff --git a/components/time-picker/demo/interval-options.md b/components/time-picker/demo/interval-options.md
index 0add82dd7..bb66c46f8 100644
--- a/components/time-picker/demo/interval-options.md
+++ b/components/time-picker/demo/interval-options.md
@@ -8,7 +8,7 @@
 Show stepped options by `hourStep` `minuteStep` `secondStep`.
 </us>
 
-```html
+```tpl
 <template>
   <a-time-picker :minuteStep="15" :secondStep="10" />
 </template>
diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md
index d25e9ee23..64311a517 100644
--- a/components/time-picker/demo/size.md
+++ b/components/time-picker/demo/size.md
@@ -8,7 +8,7 @@
 The input box comes in three sizes. large is used in the form, while the medium size is the default.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-time-picker :defaultValue="moment('12:08:23', 'HH:mm:ss')" size="large" />
diff --git a/components/time-picker/demo/suffix.md b/components/time-picker/demo/suffix.md
index 9cdbae8d1..4d9e2fc6f 100644
--- a/components/time-picker/demo/suffix.md
+++ b/components/time-picker/demo/suffix.md
@@ -8,7 +8,7 @@
 Click `TimePicker`, and then we could select or input a time in panel.
 </us>
 
-```html
+```tpl
 <template>
   <a-time-picker @change="onChange" :defaultOpenValue="moment('00:00:00', 'HH:mm:ss')">
     <a-icon type="smile" slot="suffixIcon" />
diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md
index c3c605345..5b011145d 100644
--- a/components/time-picker/demo/value.md
+++ b/components/time-picker/demo/value.md
@@ -8,7 +8,7 @@ value 和 onChange 需要配合使用。也可以直接使用v-model。
 `value` and `@change` should be used together or use v-model.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <p>use value and @change</p>
diff --git a/components/timeline/demo/alternate.md b/components/timeline/demo/alternate.md
index b359e2acf..6ef6b0dc9 100644
--- a/components/timeline/demo/alternate.md
+++ b/components/timeline/demo/alternate.md
@@ -8,7 +8,7 @@
 Alternate timeline.
 </us>
 
-```html
+```tpl
 <template>
   <a-timeline mode="alternate">
     <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md
index b7bfe0383..77ebcb3d8 100644
--- a/components/timeline/demo/basic.md
+++ b/components/timeline/demo/basic.md
@@ -8,7 +8,7 @@
 Basic timeline.
 </us>
 
-```html
+```tpl
 <template>
   <a-timeline>
     <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index ddf6c6cd3..0ce2ef9a9 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -8,7 +8,7 @@
 Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
 </us>
 
-```html
+```tpl
 <template>
   <a-timeline>
     <a-timeline-item color="green">Create a services site 2015-09-01</a-timeline-item>
diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md
index fa6debed8..e17aafbf5 100644
--- a/components/timeline/demo/custom.md
+++ b/components/timeline/demo/custom.md
@@ -8,7 +8,7 @@
 Set a node as an icon or other custom element.
 </us>
 
-```html
+```tpl
 <template>
   <a-timeline>
     <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md
index fd9d8a4b5..a8b1778ed 100644
--- a/components/timeline/demo/pending.md
+++ b/components/timeline/demo/pending.md
@@ -9,7 +9,7 @@ When the timeline is incomplete and ongoing, put a ghost node at last. Set `pend
 `reverse={true}` is used for reversing nodes.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-timeline pending="Recording..." :reverse="reverse">
diff --git a/components/timeline/demo/right.md b/components/timeline/demo/right.md
index d86fdf43c..9c30db740 100644
--- a/components/timeline/demo/right.md
+++ b/components/timeline/demo/right.md
@@ -8,7 +8,7 @@
 Right alternate timeline.
 </us>
 
-```html
+```tpl
 <template>
   <a-timeline mode="right">
     <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md
index efa0e552b..884ef521e 100644
--- a/components/tooltip/demo/arrow-point-at-center.md
+++ b/components/tooltip/demo/arrow-point-at-center.md
@@ -8,7 +8,7 @@
 By specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-tooltip placement="topLeft" title="Prompt Text">
diff --git a/components/tooltip/demo/auto-adjust-overflow.md b/components/tooltip/demo/auto-adjust-overflow.md
index be24d3f5e..e1c6d804f 100644
--- a/components/tooltip/demo/auto-adjust-overflow.md
+++ b/components/tooltip/demo/auto-adjust-overflow.md
@@ -8,7 +8,7 @@
 Adjust popup placement automatically when popup is invisible
 </us>
 
-```html
+```tpl
 <template>
   <div :style="wrapStyles">
     <a-tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
diff --git a/components/tooltip/demo/basic.md b/components/tooltip/demo/basic.md
index 95cc21201..907e76373 100644
--- a/components/tooltip/demo/basic.md
+++ b/components/tooltip/demo/basic.md
@@ -8,7 +8,7 @@
 The simplest usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-tooltip>
     <template slot="title">
diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md
index 655c9fa01..2c09d4d0a 100644
--- a/components/tooltip/demo/placement.md
+++ b/components/tooltip/demo/placement.md
@@ -8,7 +8,7 @@
 The ToolTip has 12 placements choice.
 </us>
 
-```html
+```tpl
 <template>
   <div id="components-a-tooltip-demo-placement">
     <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md
index 9e03f48eb..c947be65c 100644
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@@ -8,7 +8,7 @@
 You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
 </us>
 
-```html
+```tpl
 <template>
   <a-transfer
     :dataSource="mockData"
diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
index db2bf537d..b0551524a 100644
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@@ -8,7 +8,7 @@
 The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-transfer
diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md
index 2b98dd771..35c042296 100644
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@@ -8,7 +8,7 @@
 Custom each Transfer Item, and in this way you can render a complex datasource.
 </us>
 
-```html
+```tpl
 <template>
   <a-transfer
     :dataSource="mockData"
diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md
index af7da7f39..8f7143ed7 100644
--- a/components/transfer/demo/large-data.md
+++ b/components/transfer/demo/large-data.md
@@ -8,7 +8,7 @@
 2000 items.
 </us>
 
-```html
+```tpl
 <template>
   <a-transfer
     :dataSource="mockData"
diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md
index 6b19e3360..ac81e27c8 100644
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@@ -8,7 +8,7 @@
 Transfer with a search box.
 </us>
 
-```html
+```tpl
 <template>
   <a-transfer
     :dataSource="mockData"
diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md
index b7c2c075b..a80eeabc7 100644
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@@ -8,7 +8,7 @@
 The most basic usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree-select
     showSearch
diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md
index 9b10044e0..579b3f21d 100644
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@@ -8,7 +8,7 @@
 Multiple and checkable.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree-select
     style="width: 300px"
diff --git a/components/tree-select/demo/multiple.md b/components/tree-select/demo/multiple.md
index acbad20fb..f4afcb9b7 100644
--- a/components/tree-select/demo/multiple.md
+++ b/components/tree-select/demo/multiple.md
@@ -8,7 +8,7 @@
 Multiple selection usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree-select
     showSearch
diff --git a/components/tree-select/demo/suffix.md b/components/tree-select/demo/suffix.md
index 508d81253..7c95fd2d1 100644
--- a/components/tree-select/demo/suffix.md
+++ b/components/tree-select/demo/suffix.md
@@ -8,7 +8,7 @@
 The most basic usage.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree-select
     showSearch
diff --git a/components/tree-select/demo/treeData.md b/components/tree-select/demo/treeData.md
index b550484a1..03d628b3d 100644
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@@ -8,7 +8,7 @@
 The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree-select
     style="width: 300px"
diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md
index 60343674f..eb8cda392 100644
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@@ -8,7 +8,7 @@
 basic controlled example
 </us>
 
-```html
+```tpl
 <template>
   <a-tree
     checkable
diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md
index 6de45933e..b41cdffd3 100644
--- a/components/tree/demo/basic.md
+++ b/components/tree/demo/basic.md
@@ -8,7 +8,7 @@
 The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree
     checkable
diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md
index 89c8a469a..25a64d984 100644
--- a/components/tree/demo/customized-icon.md
+++ b/components/tree/demo/customized-icon.md
@@ -8,7 +8,7 @@
 You can customize icons for different nodes.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree :treeData="treeData" showIcon defaultExpandAll :defaultSelectedKeys="['0-0-0']">
     <a-icon type="down" slot="switcherIcon" />
diff --git a/components/tree/demo/directory.md b/components/tree/demo/directory.md
index 01cfffd6d..1d7e91ce0 100644
--- a/components/tree/demo/directory.md
+++ b/components/tree/demo/directory.md
@@ -8,7 +8,7 @@
 Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` selection.
 </us>
 
-```html
+```tpl
 <template>
   <a-directory-tree multiple defaultExpandAll @select="onSelect" @expand="onExpand">
     <a-tree-node title="parent 0" key="0-0">
diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md
index 266e8492d..7920ceda1 100644
--- a/components/tree/demo/draggable.md
+++ b/components/tree/demo/draggable.md
@@ -8,7 +8,7 @@
 Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree
     class="draggable-tree"
diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md
index 4513468f6..e451f26ec 100644
--- a/components/tree/demo/dynamic.md
+++ b/components/tree/demo/dynamic.md
@@ -8,7 +8,7 @@
 To load data asynchronously when click to expand a treeNode.
 </us>
 
-```html
+```tpl
 <template>
   <a-tree :loadData="onLoadData" :treeData="treeData" />
 </template>
diff --git a/components/tree/demo/line.md b/components/tree/demo/line.md
index dfec1cbba..35fc2c91a 100644
--- a/components/tree/demo/line.md
+++ b/components/tree/demo/line.md
@@ -8,7 +8,7 @@
 Tree With Line
 </us>
 
-```html
+```tpl
 <template>
   <a-tree showLine :defaultExpandedKeys="['0-0-0']" @select="onSelect">
     <a-tree-node key="0-0">
diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md
index 62b7381a4..abfc51665 100644
--- a/components/tree/demo/search.md
+++ b/components/tree/demo/search.md
@@ -8,7 +8,7 @@
 Searchable Tree.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md
index 42715872b..423d0b17f 100644
--- a/components/upload/demo/avatar.md
+++ b/components/upload/demo/avatar.md
@@ -10,7 +10,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.
 </us>
 
-```html
+```tpl
 <template>
   <a-upload
     name="avatar"
diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md
index 45a519f38..9d6e62b36 100644
--- a/components/upload/demo/basic.md
+++ b/components/upload/demo/basic.md
@@ -8,7 +8,7 @@
 Classic mode. File selection dialog pops up when upload button is clicked.
 </us>
 
-```html
+```tpl
 <template>
   <a-upload
     name="file"
diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md
index 74e66cbe1..ad5e373b3 100644
--- a/components/upload/demo/defaultFileList.md
+++ b/components/upload/demo/defaultFileList.md
@@ -8,7 +8,7 @@
 Use `defaultFileList` for uploaded files when page init.
 </us>
 
-```html
+```tpl
 <template>
   <a-upload
     action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
diff --git a/components/upload/demo/directory.md b/components/upload/demo/directory.md
index c59bfc577..076b31f79 100644
--- a/components/upload/demo/directory.md
+++ b/components/upload/demo/directory.md
@@ -8,7 +8,7 @@
 You can select and upload a whole directory.
 </us>
 
-```html
+```tpl
 <template>
   <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
     <a-button> <a-icon type="upload" /> Upload Directory </a-button>
diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md
index d67df3ce0..45fad4c8b 100644
--- a/components/upload/demo/drag.md
+++ b/components/upload/demo/drag.md
@@ -9,7 +9,7 @@
 Classic mode. File selection dialog pops up when upload button is clicked.
 </us>
 
-```html
+```tpl
 <template>
   <a-upload-dragger
     name="file"
diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md
index b777b27e8..e6a46486f 100644
--- a/components/upload/demo/fileList.md
+++ b/components/upload/demo/fileList.md
@@ -14,7 +14,7 @@ You can gain full control over filelist by configuring `fileList`. You can accom
 3) filter successfully uploaded files according to response from server.
 </us>
 
-```html
+```tpl
 <template>
   <a-upload
     action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index b1d6b4279..be833544a 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -8,7 +8,7 @@
 After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
 </us>
 
-```html
+```tpl
 <template>
   <div class="clearfix">
     <a-upload
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index af4b8e5b7..f0f9b53ec 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -8,7 +8,7 @@
 If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
 </us>
 
-```html
+```tpl
 <template>
   <div>
     <a-upload
diff --git a/components/upload/demo/upload-manually.md b/components/upload/demo/upload-manually.md
index bb6fca0a2..f5e48a4f1 100644
--- a/components/upload/demo/upload-manually.md
+++ b/components/upload/demo/upload-manually.md
@@ -8,7 +8,7 @@
 Upload files manually after `beforeUpload` returns `false`.
 </us>
 
-```html
+```tpl
 <template>
   <div class="clearfix">
     <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">
diff --git a/webpack.base.config.js b/webpack.base.config.js
index 0ef3eb21f..fbbe605cb 100644
--- a/webpack.base.config.js
+++ b/webpack.base.config.js
@@ -92,7 +92,7 @@ md.core.ruler.push('update_template', function replace({ tokens }) {
         token.content = '';
       }
     }
-    if (token.type === 'fence' && token.info === 'html' && token.markup === '```') {
+    if (token.type === 'fence' && token.info === 'tpl' && token.markup === '```') {
       sourceCode = token.content;
       code = '````html\n' + token.content + '````';
       template = fetch(token.content, 'template');
@@ -201,6 +201,8 @@ module.exports = {
       vue$: 'vue/dist/vue.esm.js',
       antd: path.join(__dirname, 'components'),
       'ant-design-vue': path.join(__dirname, 'components'),
+      'ant-design-vue/es': path.join(__dirname, 'components'),
+      'ant-design-vue/lib': path.join(__dirname, 'components'),
       '@': path.join(__dirname, ''),
     },
   },