geshi

Signed-off-by: NHelloCrease <lian15@huawei.com>

zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md

@@ -8,7 +8,7 @@
 
 
 | 名称         | 参数类型                                     | 默认值             | 描述                      |
-| -------- | -------- | -------- | -------- |
+| ---------- | ---------------------------------------- | --------------- | ----------------------- |
 | duration   | number                                   | 1000            | 单位为毫秒，默认动画时长为1000毫秒。    |
 | curve      | Curve                                    | Curve.Linear    | 默认曲线为线性。                |
 | delay      | number                                   | 0               | 单位为毫秒，默认不延时播放。          |
@@ -18,7 +18,7 @@
 
 - Curve枚举说明
   | 名称                  | 描述                                       |
-  | -------- | -------- |
+  | ------------------- | ---------------------------------------- |
   | Linear              | 表示动画从头到尾的速度都是相同的。                        |
   | Ease                | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。 |
   | EaseIn              | 表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。 |
@@ -36,7 +36,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AttrAnimationExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md

@@ -39,7 +39,8 @@ Blank(min?:  Length)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BlankExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md

@@ -64,7 +64,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ButtonExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md

@@ -41,7 +41,8 @@ Checkbox( name?: string,  group?: string )
  
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CheckboxExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md

@@ -48,7 +48,8 @@ CheckboxGroup( group?: string )
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CheckboxExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md

@@ -34,7 +34,8 @@ DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DataPanelExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md

@@ -57,7 +57,8 @@ DatePicker(options?: DatePickerOptions)
 
 ### 日期选择器（显示农历）
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerExample01 {
@@ -84,7 +85,8 @@ struct DatePickerExample01 {
 
 ### 日期选择器（不显示农历）
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerExample02 {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md

@@ -39,7 +39,8 @@ Divider()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DividerExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md

@@ -44,7 +44,8 @@ Gauge(value:{value: number, min?: number, max?: number})
 ## 示例
 
   
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GaugeExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md

@@ -63,7 +63,8 @@ ImageAnimator()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageAnimatorExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md

@@ -34,7 +34,8 @@ LoadingProgress()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LoadingProgressExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md

@@ -44,7 +44,8 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
 ## 示例
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MarqueeExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md

@@ -27,7 +27,7 @@ Navigation()
 ## 属性
 
 | 名称             | 参数类型                                     | 默认值                      | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
 | title          | string \| [CustomBuilder](../../ui/ts-types.md) | -                        | 页面标题。                                    |
 | subtitle       | string                                   | -                        | 页面副标题。                                   |
 | menus          | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md) | -                        | 页面右上角菜单。                                 |
@@ -39,21 +39,21 @@ Navigation()
 
 - NavigationMenuItem类型接口说明
   | 名称     | 类型                      | 必填   | 默认值  | 描述              |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ----------------------- | ---- | ---- | --------------- |
   | value  | string                  | 是    | -    | 菜单栏单个选项的显示文本。   |
   | icon   | string                  | 否    | -    | 菜单栏单个选项的图标资源路径。 |
   | action | ()&nbsp;=&gt;&nbsp;void | 否    | -    | 当前选项被选中的事件回调。   |
 
 - Object类型接口说明
   | 名称     | 类型                      | 必填   | 默认值  | 描述              |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ----------------------- | ---- | ---- | --------------- |
   | value  | string                  | 是    | -    | 工具栏单个选项的显示文本。   |
   | icon   | string                  | 否    | -    | 工具栏单个选项的图标资源路径。 |
   | action | ()&nbsp;=&gt;&nbsp;void | 否    | -    | 当前选项被选中的事件回调。   |
 
 - NavigationTitleMode枚举说明
   | 名称   | 描述                                       |
-  | -------- | -------- |
+  | ---- | ---------------------------------------- |
   | Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
   | Mini | 固定为小标题模式（图标+主副标题）。                       |
   | Full | 固定为大标题模式（主副标题）。                          |
@@ -65,14 +65,14 @@ Navigation()
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
 
 
 ## 示例
 
-```
-// Example 01
+```ts
+// xxx.ets
 @Entry
 @Component
 struct NavigationExample {
@@ -159,8 +159,8 @@ struct NavigationExample {
 
 ![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif)
 
-```
-// Example 02
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ToolbarBuilderExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md

@@ -19,7 +19,7 @@ PatternLock(controller?: PatternLockController)
 - 参数
 
   | 参数名        | 参数类型                                     | 必填   | 默认值  | 描述                     |
-  | ---------- | ----------------------------------------------- | ---- | ------ | -------------------------------------------- |
+  | ---------- | ---------------------------------------- | ---- | ---- | ---------------------- |
   | controller | [PatternLockController](#patternlockcontroller) | 否    | null | 给组件绑定一个控制器，用来控制组件状态重置。 |
 
 ## 属性
@@ -27,7 +27,7 @@ PatternLock(controller?: PatternLockController)
 不支持`backgroundColor`以外的通用属性设置。
 
 | 名称              | 参数类型                                  | 默认值         | 描述                                       |
-| --------------- | --------------------------------------------------- | ----------- | ------------------------------------------------------------ |
+| --------------- | ------------------------------------- | ----------- | ---------------------------------------- |
 | sideLength      | Length                                | 300vp       | 设置组件的宽度和高度（相同值）。最小可以设置为0。                |
 | circleRadius    | Length                                | 14vp        | 设置宫格圆点的半径。                               |
 | regularColor    | [ResourceColor](../../ui/ts-types.md) | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。                     |
@@ -40,7 +40,7 @@ PatternLock(controller?: PatternLockController)
 ## 事件
 
 | 名称                                       | 描述                                       |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| ---------------------------------------- | ---------------------------------------- |
 | onPatternComplete(callback: (input: Array\<number\>) => void) | 密码输入结束时被调用的回调函数。<br />input: 与选中宫格圆点顺序一致的数字数组，数字为选中宫格的索引（0到8）。 |
 
 ## PatternLockController
@@ -61,7 +61,8 @@ reset(): void
 
 ##  示例
 
-```typescript
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PatternLockExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md

@@ -28,20 +28,20 @@ PluginComponent(value: { template: PluginComponentTemplate, data: any })
 
 - 参数
     | 参数名   | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
-  | -------- | -------- | -------- | -------- | -------- |
+    | ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
     | value | {<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject<br/>} | 是    | -    | template:&nbsp;&nbsp;组件模板，用于跟提供者定义的组件绑定。<br/>data:&nbsp;传给插件组件提供者使用的数据。 |
 
 - PluginComponentTemplate类型说明
     | 参数      | 类型     | 描述                      |
-  | -------- | -------- | -------- |
+    | ------- | ------ | ----------------------- |
     | source  | string | 组件模板名。                  |
     | ability | string | 提供者Ability的abilityname。 |
 
 
 ## 事件
 
-  | 名称 | 功能描述 | 
-| -------- | -------- |
+| 名称                                       | 功能描述                                     |
+| ---------------------------------------- | ---------------------------------------- |
 | onComplete(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 组件加载完成回调。                                |
 | onError(callback:&nbsp;(info:&nbsp;{&nbsp;errcode:&nbsp;number,&nbsp;msg:&nbsp;string&nbsp;})&nbsp;=&gt;&nbsp;void) | 组件加载错误回调。<br/>errcode:&nbsp;错误码。<br/>msg:&nbsp;错误信息。 |
 
@@ -68,13 +68,13 @@ push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
 
 - 参数
     | 参数名      | 类型                        | 必填   | 说明                               |
-  | -------- | -------- | -------- | -------- |
+    | -------- | ------------------------- | ---- | -------------------------------- |
     | param    | PushParameters            | 是    | 组件使用者的详细信息，详见PushParameters参数说明。 |
     | callback | AsyncCallback&lt;void&gt; | 是    | 此次接口调用的异步回调。                     |
 
 - PushParameters参数说明
     | 参数名       | 类型       | 必填   | 说明              |
-  | -------- | -------- | -------- | -------- |
+    | --------- | -------- | ---- | --------------- |
     | want      | Want     | 是    | 组件使用者Ability信息。 |
     | name      | string   | 是    | 组件名称。           |
     | data      | KVObject | 否    | 组件数据值。          |
@@ -92,27 +92,27 @@ request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackPara
 
 - 参数
     | 参数名      | 类型                                       | 必填   | 说明                                   |
-  | -------- | -------- | -------- | -------- |
+    | -------- | ---------------------------------------- | ---- | ------------------------------------ |
     | param    | RequestParameters                        | 是    | 组件模板的详细请求信息，详见RequestParameters参数说明。 |
     | callback | AsyncCallback<RequestCallbackParameters&nbsp;\|&nbsp;void&gt; | 是    | 此次请求的异步回调，&nbsp;通过回调接口的参数返回接受请求的数据。  |
 
 - RequestParameters参数说明
     | 参数名  | 类型       | 必填   | 说明              |
-  | -------- | -------- | -------- | -------- |
+    | ---- | -------- | ---- | --------------- |
     | want | Want     | 是    | 组件提供者Ability信息。 |
     | name | string   | 是    | 请求组件名称。         |
     | data | KVObject | 是    | 附加数据。           |
 
 - RequestCallbackParameters说明
     | 名称                | 类型                      | 说明    |
-  | -------- | -------- | -------- |
+    | ----------------- | ----------------------- | ----- |
     | componentTemplate | PluginComponentTemplate | 组件模板。 |
     | data              | KVObject                | 组件数据。 |
     | extraData         | KVObject                | 附加数据。 |
 
 - KVObject类型说明
     | 参数   | 类型                                       | 说明                                       |
-  | -------- | -------- | -------- |
+    | ---- | ---------------------------------------- | ---------------------------------------- |
     | key  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;boolean&nbsp;\|&nbsp;Array&nbsp;\|&nbsp;KVObject | KVObject用[key，value]来存储数据，key是string类型的，value可以是number，string，boolean，数组或者另外的一个KVObject。 |
 
 
@@ -128,19 +128,19 @@ on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): v
 
 - 参数
     | 参数名       | 类型                                       | 必填   | 说明                                       |
-  | -------- | -------- | -------- | -------- |
+    | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
     | eventType | string                                   | 是    | 监听的事件类型，&nbsp;可选值为："push"&nbsp;、"request"。<br/>"push”：指组件提供者向使用者主动推送数据。<br/>"request”：指组件使用者向提供者主动请求数据。 |
     | callback  | OnPushEventCallback&nbsp;\|&nbsp;OnRequestEventCallback | 是    | 见callback事件说明。                           |
 
 - callback事件说明
     | 参数名                    | 类型                                       | 说明                                       |
-  | -------- | -------- | -------- |
+    | ---------------------- | ---------------------------------------- | ---------------------------------------- |
     | OnRequestEventCallback | (source:&nbsp;Want,<br/>name:&nbsp;string,<br/>data:&nbsp;KVObject&nbsp;)&nbsp;=>RequestEventResult | 数据请求事件的回调。<br/>source:&nbsp;组件请求方Ability信息。<br/>name:&nbsp;请求组件名称。<br/>data:&nbsp;附加数据。<br/>返回值：&nbsp;请求数据结果。 |
     | OnPushEventCallback    | (source:&nbsp;Want,<br/>template:&nbsp;PluginComponentTemplate,<br/>data:&nbsp;KVObject,<br/>extraData:&nbsp;KVObject<br/>)&nbsp;=&gt;&nbsp;void | 接收提供者主动推送的数据。<br/>source:&nbsp;组件提供者Ability信息。<br/>template:&nbsp;组件模板。<br/>data:&nbsp;组件更新数据。<br/>extraData:&nbsp;附加数据。 |
 
 - RequestEventResult类型说明
     | 参数        | 类型       | 说明    |
-  | -------- | -------- | -------- |
+    | --------- | -------- | ----- |
     | template  | string   | 组件名称。 |
     | data      | KVObject | 组件数据。 |
     | extraData | KVObjec  | 附加数据。 |

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md

@@ -52,7 +52,8 @@ Progress(value: {value: number, total?: number, type?: ProgressType})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ProgressExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md

@@ -41,7 +41,8 @@ QRCode(value: string)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct QRCodeExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md

@@ -44,7 +44,8 @@ Radio(options: {value: string, group: string})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RadioExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md

@@ -46,7 +46,8 @@ Rating(options?: { rating: number, indicator?: boolean })
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RatingExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md

@@ -49,7 +49,8 @@ RichText\(content:string\)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RichTextExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md

@@ -49,7 +49,8 @@ ScrollBar(value: ScrollBarOptions)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ScrollBarExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md

@@ -69,7 +69,8 @@ creatPosition(value: number): void
 
 ##  示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SearchExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md

@@ -46,7 +46,8 @@ Select(options: Array\<SelectOption\>)
 
 ##  示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SelectExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md

@@ -70,7 +70,8 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SliderExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md

@@ -47,7 +47,8 @@ Span(content: string)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SpanExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md

@@ -45,7 +45,8 @@ Stepper(value?: { index?: number })
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StepperExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md

@@ -84,7 +84,8 @@ Text(content?: string)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextExample1 {
@@ -122,7 +123,8 @@ struct TextExample1 {
 
 ![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextExample2 {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md

@@ -85,7 +85,8 @@ caretPosition(value: number): void
 
 ### 多行文本输入
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextAreaExample1 {
@@ -120,7 +121,8 @@ struct TextAreaExample1 {
 
 ### 设置光标
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextAreaExample2 {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md

@@ -97,7 +97,8 @@ caretPosition(value: number): void
 
 ### 单行文本输入
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextInputExample1 {
@@ -131,7 +132,8 @@ struct TextInputExample1 {
 
 ### 设置光标
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextInputExample2 {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md

@@ -46,7 +46,8 @@ TextPicker(value: {range: string[], selected?: number})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextPickerExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md

@@ -74,7 +74,8 @@ reset()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextTimerExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md

@@ -54,7 +54,8 @@ TimePicker(options?: TimePickerOptions)
 
 ### 时间选择器
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md

@@ -50,7 +50,8 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ToggleExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md

@@ -32,7 +32,7 @@
 
 ## 属性
 | 名称                 | 参数类型                                     | 默认值               | 描述                                       |
-| ----------------- | ---------------------------------------- | -------------- | ---------------------------------------- |
+| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
 | domStorageAccess   | boolean                                  | false             | 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 |
 | fileAccess         | boolean                                  | false             | 设置是否开启通过[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)访问应用中rawfile路径的文件， 默认启用。 |
 | fileFromUrlAccess  | boolean                                  | true              | 设置是否允许通过网页中的JavaScript脚本访问[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)的内容，默认未启用。 |
@@ -41,10 +41,10 @@
 | javaScriptAccess   | boolean                                  | true              | 设置是否允许执行JavaScript脚本，默认允许执行。             |
 | mixedMode          | [MixedMode](#mixedmode枚举说明)              | MixedMode.None    | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 |
 | onlineImageAccess  | boolean                                  | true              | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 |
-| zoomAccess        | boolean                                  | true           | 设置是否支持手势进行缩放，默认允许执行缩放。|
-| overviewModeAccess | boolean                                  | true           | 设置是否使用概览模式加载网页，默认使用该方式。|
-| databaseAccess| boolean                                  | false           | 设置是否开启数据库存储API权限，默认不开启。|
-| cacheMode |  [CacheMode](#cachemode枚举说明) | CacheMode.Default| 设置缓存模式。|
+| zoomAccess         | boolean                                  | true              | 设置是否支持手势进行缩放，默认允许执行缩放。                   |
+| overviewModeAccess | boolean                                  | true              | 设置是否使用概览模式加载网页，默认使用该方式。                  |
+| databaseAccess     | boolean                                  | false             | 设置是否开启数据库存储API权限，默认不开启。                  |
+| cacheMode          | [CacheMode](#cachemode枚举说明)              | CacheMode.Default | 设置缓存模式。                                  |
 | textZoomAtio       | number                                   | 100               | 设置页面的文本缩放百分比，默认为100%。                    |
 | userAgent          | string                                   | -                 | 设置用户代理。                                  |
 
@@ -57,7 +57,7 @@
 不支持通用事件。
 
 | 名称                                       | 功能描述                                     |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| ---------------------------------------- | ---------------------------------------- |
 | onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页触发alert()告警弹窗时触发回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> |
 | onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>刷新或关闭场景下，在即将离开当前页面时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> |
 | onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页调用confirm()告警时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。<br />url：当前显示弹窗所在网页的URL。<br />message：弹窗中显示的信息。<br />JsResult：通知Web组件用户操作行为。</p> |
@@ -157,7 +157,7 @@ Web组件返回的请求/响应头对象。
 onRenderExited接口返回的渲染进程退出的具体原因。
 
 | 名称                         | 描述                |
-| ---------------------------- | ------------------------------ |
+| -------------------------- | ----------------- |
 | ProcessAbnormalTermination | 渲染进程异常退出。         |
 | ProcessWasKilled           | 收到SIGKILL，或被手动终止。 |
 | ProcessCrashed             | 渲染进程崩溃退出，如段错误。    |
@@ -166,19 +166,19 @@ onRenderExited接口返回的渲染进程退出的具体原因。
 
 ### MixedMode枚举说明
 
-  | 名称         | 描述                                 |
-  | ---------- | ---------------------------------- |
-  | All        | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 |
-  | Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。           |
-  | None       | 不允许加载HTTP和HTTPS混合内容。               |
+| 名称         | 描述                                 |
+| ---------- | ---------------------------------- |
+| All        | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 |
+| Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。           |
+| None       | 不允许加载HTTP和HTTPS混合内容。               |
 
 ### CacheMode枚举说明
-  | 名称         | 描述                                 |
-  | ---------- | ---------------------------------- |
-  | Default    | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
-  | None | 加载资源使用cache，如果cache中无该资源则从网络中获取。         |
-  | Online       | 加载资源不使用cache，全部从网络中获取。  |
-  | Only       | 只从cache中加载资源。               |
+| 名称      | 描述                                   |
+| ------- | ------------------------------------ |
+| Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
+| None    | 加载资源使用cache，如果cache中无该资源则从网络中获取。     |
+| Online  | 加载资源不使用cache，全部从网络中获取。               |
+| Only    | 只从cache中加载资源。                        |
 
 ### FileSelectorResult对象说明
 通知Web组件的文件选择结果。
@@ -186,14 +186,14 @@ onRenderExited接口返回的渲染进程退出的具体原因。
 - 接口
 
   | 接口名称                                     | 功能描述                                   |
-  | ---------------------------------------------- | ------------------------------------------------------------ |
+  | ---------------------------------------- | -------------------------------------- |
   | handleFileList(fileList: Array\<string>): void | 通知Web组件进行文件选择操作。fileList: 需要进行操作的文件列表。 |
 
 ### FileSelectorParam对象说明
 - 接口
 
   | 接口名称                             | 功能描述         |
-  | ---------------------------------------- | ------------------ |
+  | -------------------------------- | ------------ |
   | getTitle(): string               | 获取文件选择器标题。   |
   | getMode(): FileSelectorMode      | 获取文件选择器的模式。  |
   | getAcceptType(): Array\<string\> | 获取文件过滤类型。    |
@@ -201,7 +201,7 @@ onRenderExited接口返回的渲染进程退出的具体原因。
 
 ### FileSelectorMode枚举说明
 | 名称                   | 描述         |
-| ---------------------------- | ------------------------------ |
+| -------------------- | ---------- |
 | FileOpenMode         | 打开上传单个文件。  |
 | FileOpenMultipleMode | 打开上传多个文件。  |
 | FileOpenFolderMode   | 打开上传文件夹模式。 |
@@ -390,7 +390,7 @@ getCookieManager(): WebCookie
 获取web组件cookie管理对象。
 - 返回值
   | 参数类型      | 说明                                       |
-  | ------- | --------- |
+  | --------- | ---------------------------------------- |
   | WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 |
 ## WebCookie
 通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。
@@ -402,12 +402,12 @@ setCookie(url: string, value: string): boolean
 - 参数说明
 
   | 参数名   | 参数类型   | 必填   | 默认值  | 参数描述              |
-  | -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
+  | ----- | ------ | ---- | ---- | ----------------- |
   | url   | string | 是    | -    | 要设置的cookie所属的url。 |
   | value | string | 是    | -    | cookie的值。         |
 - 返回值 
   | 参数类型    | 说明            |
-  | ------- | --------- |
+  | ------- | ------------- |
   | boolean | 设置cookie是否成功。 |
 
 ### saveCookieSync
@@ -416,11 +416,11 @@ saveCookieSync(): boolean
 将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
 - 返回值
   | 参数类型    | 说明                   |
-  | ------- | --------- |
+  | ------- | -------------------- |
   | boolean | 同步内存cookie到磁盘操作是否成功。 |
 ## 示例
 
-```
+```ts
 // webComponent.ets
 @Entry
 @Component
@@ -442,7 +442,7 @@ struct WebComponent {
   }
 }
 ```
-```
+```html
 <!-- index.html -->
 <!DOCTYPE html>
 <html>

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md

@@ -20,9 +20,9 @@
   - 参数
 
     | 名称          | 参数类型                                     | 必填   | 描述                                       |
-    | ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
+    | ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
     | id          | string                                   | 是    | 组件的唯一标识，支持最大的字符串长度128。                   |
-    | type        | string                                        | 是   | 用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。|
+    | type        | string                                   | 是    | 用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。 |
     | libraryname | string                                   | 否    | 应用Native层编译输出动态库名称。                      |
     | controller  | [XComponentController](#XComponentController) | 否    | 给组件绑定一个控制器，通过控制器调用组件方法。                  |
 
@@ -30,7 +30,7 @@
 ## 事件
 
 | 名称                               | 功能描述         |
-| ------------------------------- | ------------------------ |
+| -------------------------------- | ------------ |
 | onLoad(context?: object) => void | 插件加载完成时回调事件。 |
 | onDestroy() => void              | 插件卸载完成时回调事件。 |
 
@@ -53,7 +53,7 @@ getXComponentSurfaceId(): string
   - 返回值
 
     | 类型     | 描述                      |
-    | ------ | --------------------------- |
+    | ------ | ----------------------- |
     | string | XComponent持有Surface的ID。 |
 
 ### setXComponentSurfaceSize
@@ -65,7 +65,7 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
 - 参数
 
   | 参数名           | 参数类型   | 必填   | 默认值  | 描述                      |
-  | ------------- | -------- | ---- | ------ | ----------------------------- |
+  | ------------- | ------ | ---- | ---- | ----------------------- |
   | surfaceWidth  | number | 是    | -    | XComponent持有Surface的宽度。 |
   | surfaceHeight | number | 是    | -    | XComponent持有Surface的高度。 |
 
@@ -78,14 +78,15 @@ getXComponentContext(): Object
 - 返回值
 
   | 类型     | 描述                                       |
-  | ------ | ------------------------------------------------------------ |
+  | ------ | ---------------------------------------- |
   | Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
 
 ## 示例
 
 提供surface类型XComponent，支持相机预览等能力。
 
-```
+```ts
+// xxx.ets
 import camera from '@ohos.multimedia.camera';
 @Entry
 @Component

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md

@@ -37,7 +37,8 @@ LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: numb
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LongPressGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md

@@ -68,7 +68,8 @@ PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distan
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PanGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md

@@ -39,7 +39,8 @@ PinchGesture(options?: { fingers?: number, distance?: number })
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PinchGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md

@@ -37,7 +37,8 @@ RotationGesture(options?: { fingers?: number, angle?: number })
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RotationGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md

@@ -44,7 +44,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
 ![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png)
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SwipeGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md

@@ -29,7 +29,8 @@ TapGesture(options?: { count?: number, fingers?: number })
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TapGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -13,7 +13,7 @@ CanvasRenderingContext2D(setting: RenderingContextSetting)
 
 - 参数
   | 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
   | setting | [RenderingContextSettings](#renderingcontextsettings) | 是    | -    | 见[RenderingContextSettings](#renderingcontextsettings)。 |
 
 
@@ -25,14 +25,14 @@ RenderingContextSettings(antialias?: bool)
 
 - 参数
   | 参数名       | 参数类型 | 必填   | 默认值   | 参数描述             |
-  | -------- | -------- | -------- | -------- | -------- |
+  | --------- | ---- | ---- | ----- | ---------------- |
   | antialias | bool | 否    | false | 表明canvas是否开启抗锯齿。 |
 
 
 ## 属性
 
 | 名称                                       | 类型                                       | 默认值                                      | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
 | [fillStyle](#fillstyle)                  | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | -                                        | 指定绘制的填充色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
 | [lineWidth](#linewidth)                  | number                                   | -                                        | 设置绘制线条的宽度。                               |
 | [strokeStyle](#strokestyle)              | &lt;color&gt;&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | -                                        | 设置描边的颜色。<br/>-&nbsp;类型为&lt;color&gt;时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 |
@@ -58,7 +58,8 @@ RenderingContextSettings(antialias?: bool)
 
 ### fillStyle
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FillStyleExample {
@@ -87,7 +88,8 @@ struct FillStyleExample {
 
 ### lineWidth
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineWidthExample {
@@ -116,7 +118,8 @@ struct LineWidthExample {
 
 ### strokeStyle
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StrokeStyleExample {
@@ -147,7 +150,8 @@ struct StrokeStyleExample {
 
 ### lineCap
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineCapExample {
@@ -180,7 +184,8 @@ struct LineCapExample {
 
 ### lineJoin
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineJoinExample {
@@ -214,7 +219,8 @@ struct LineJoinExample {
 
 ### miterLimit
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MiterLimit {
@@ -248,7 +254,8 @@ struct MiterLimit {
 
 ### font
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct Font {
@@ -277,7 +284,8 @@ struct Font {
 
 ### textAlign
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CanvasExample {
@@ -321,7 +329,8 @@ struct CanvasExample {
 
 ### textBaseline
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextBaseline {
@@ -365,7 +374,8 @@ struct TextBaseline {
 
 ### globalAlpha
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GlobalAlpha {
@@ -397,7 +407,8 @@ struct GlobalAlpha {
 
 ### lineDashOffset
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineDashOffset {
@@ -428,7 +439,7 @@ struct LineDashOffset {
 ### globalCompositeOperation
 
 | 名称               | 描述                       |
-| -------- | -------- |
+| ---------------- | ------------------------ |
 | source-over      | 在现有绘制内容上显示新绘制内容，属于默认值。   |
 | source-atop      | 在现有绘制内容顶部显示新绘制内容。        |
 | source-in        | 在现有绘制内容中显示新绘制内容。         |
@@ -441,7 +452,8 @@ struct LineDashOffset {
 | copy             | 显示新绘制内容而忽略现有绘制内容。        |
 | xor              | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GlobalCompositeOperation {
@@ -478,7 +490,8 @@ struct GlobalCompositeOperation {
 
 ### shadowBlur
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowBlur {
@@ -509,7 +522,8 @@ struct ShadowBlur {
 
 ### shadowColor
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowColor {
@@ -540,7 +554,8 @@ struct ShadowColor {
 
 ### shadowOffsetX
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowOffsetX {
@@ -572,7 +587,8 @@ struct ShadowOffsetX {
 
 ### shadowOffsetY
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowOffsetY {
@@ -603,7 +619,8 @@ struct ShadowOffsetY {
 
 ### imageSmoothingEnabled
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageSmoothingEnabled {
@@ -642,14 +659,15 @@ fillRect(x: number, y: number, w: number, h: number): void
 
 - 参数
   | 参数     | 类型     | 必填   | 默认值  | 说明            |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | ------------- |
   | x      | number | 是    | 0    | 指定矩形左上角点的x坐标。 |
   | y      | number | 是    | 0    | 指定矩形左上角点的y坐标。 |
   | width  | number | 是    | 0    | 指定矩形的宽度。      |
   | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct FillRect {
@@ -683,14 +701,15 @@ strokeRect(x: number, y: number, w: number, h: number): void
 
 - 参数
   | 参数     | 类型     | 必填   | 默认值  | 说明           |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | ------------ |
   | x      | number | 是    | 0    | 指定矩形的左上角x坐标。 |
   | y      | number | 是    | 0    | 指定矩形的左上角y坐标。 |
   | width  | number | 是    | 0    | 指定矩形的宽度。     |
   | height | number | 是    | 0    | 指定矩形的高度。     |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct StrokeRect {
@@ -723,14 +742,15 @@ clearRect(x: number, y: number, w: number, h: number): void
 
 - 参数
   | 参数     | 类型     | 必填   | 默认值  | 描述            |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | ------------- |
   | x      | number | 是    | 0    | 指定矩形上的左上角x坐标。 |
   | y      | number | 是    | 0    | 指定矩形上的左上角y坐标。 |
   | width  | number | 是    | 0    | 指定矩形的宽度。      |
   | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct ClearRect {
@@ -765,13 +785,14 @@ fillText(text: string, x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 说明              |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | --------------- |
   | text | string | 是    | “”   | 需要绘制的文本内容。      |
   | x    | number | 是    | 0    | 需要绘制的文本的左下角x坐标。 |
   | y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct FillText {
@@ -805,13 +826,14 @@ strokeText(text: string, x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述              |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | --------------- |
   | text | string | 是    | “”   | 需要绘制的文本内容。      |
   | x    | number | 是    | 0    | 需要绘制的文本的左下角x坐标。 |
   | y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct StrokeText {
@@ -845,21 +867,22 @@ measureText(text: string): TextMetrics
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 说明         |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | ---------- |
   | text | string | 是    | ""   | 需要进行测量的文本。 |
 
 - 返回值
   | 类型          | 说明      |
-  | -------- | -------- |
+  | ----------- | ------- |
   | TextMetrics | 文本的尺寸信息 |
 
 - TextMetrics类型描述
   | 属性    | 类型     | 描述      |
-  | -------- | -------- | -------- |
+  | ----- | ------ | ------- |
   | width | number | 字符串的宽度。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct MeasureText {
@@ -894,11 +917,12 @@ stroke(path?: Path2D): void
 
 - 参数
   | 参数   | 类型                                       | 必填   | 默认值  | 描述           |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ---------------------------------------- | ---- | ---- | ------------ |
   | path | [Path2D](ts-components-canvas-path2d.md) | 否    | null | 需要绘制的Path2D。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Stroke {
@@ -934,7 +958,8 @@ beginPath(): void
 创建一个新的绘制路径。
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct BeginPath {
@@ -973,12 +998,13 @@ moveTo(x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 说明        |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | --------- |
   | x    | number | 是    | 0    | 指定位置的x坐标。 |
   | y    | number | 是    | 0    | 指定位置的y坐标。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct MoveTo {
@@ -1015,12 +1041,13 @@ lineTo(x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述        |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | --------- |
   | x    | number | 是    | 0    | 指定位置的x坐标。 |
   | y    | number | 是    | 0    | 指定位置的y坐标。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct LineTo {
@@ -1056,7 +1083,8 @@ closePath(): void
 结束当前路径形成一个封闭路径。
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct ClosePath {
@@ -1095,12 +1123,13 @@ createPattern(image: ImageBitmap, repetition: string): void
 
 - 参数
   | 参数         | 类型                                       | 必填   | 默认值  | 描述                                       |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
   | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是    | null | 图源对象，具体参考ImageBitmap对象。                  |
   | repetition | string                                   | 是    | “”   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CreatePattern {
@@ -1137,7 +1166,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述             |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | -------------- |
   | cp1x | number | 是    | 0    | 第一个贝塞尔参数的x坐标值。 |
   | cp1y | number | 是    | 0    | 第一个贝塞尔参数的y坐标值。 |
   | cp2x | number | 是    | 0    | 第二个贝塞尔参数的x坐标值。 |
@@ -1146,7 +1175,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   | y    | number | 是    | 0    | 路径结束时的y坐标值。    |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct BezierCurveTo {
@@ -1183,14 +1213,15 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述          |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | ----------- |
   | cpx  | number | 是    | 0    | 贝塞尔参数的x坐标值。 |
   | cpy  | number | 是    | 0    | 贝塞尔参数的y坐标值。 |
   | x    | number | 是    | 0    | 路径结束时的x坐标值。 |
   | y    | number | 是    | 0    | 路径结束时的y坐标值。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct QuadraticCurveTo {
@@ -1226,7 +1257,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
 
 - 参数
   | 参数            | 类型      | 必填   | 默认值   | 描述         |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------------- | ------- | ---- | ----- | ---------- |
   | x             | number  | 是    | 0     | 弧线圆心的x坐标值。 |
   | y             | number  | 是    | 0     | 弧线圆心的y坐标值。 |
   | radius        | number  | 是    | 0     | 弧线的圆半径。    |
@@ -1235,7 +1266,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   | anticlockwise | boolean | 否    | false | 是否逆时针绘制圆弧。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Arc {
@@ -1271,7 +1303,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 - 参数
   | 参数     | 类型     | 必填   | 默认值  | 描述              |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | --------------- |
   | x1     | number | 是    | 0    | 圆弧经过的第一个点的x坐标值。 |
   | y1     | number | 是    | 0    | 圆弧经过的第一个点的y坐标值。 |
   | x2     | number | 是    | 0    | 圆弧经过的第二个点的x坐标值。 |
@@ -1279,7 +1311,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   | radius | number | 是    | 0    | 圆弧的圆半径值。        |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct ArcTo {
@@ -1315,7 +1348,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 - 参数
   | 参数            | 类型      | 必填   | 默认值   | 说明                |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------------- | ------- | ---- | ----- | ----------------- |
   | x             | number  | 是    | 0     | 椭圆圆心的x轴坐标。        |
   | y             | number  | 是    | 0     | 椭圆圆心的y轴坐标。        |
   | radiusX       | number  | 是    | 0     | 椭圆x轴的半径长度。        |
@@ -1327,7 +1360,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 - 示例
 
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
@@ -1363,14 +1397,15 @@ rect(x: number, y: number, width: number, height: number): void
 
 - 参数
   | 参数     | 类型     | 必填   | 默认值  | 描述            |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | ------------- |
   | x      | number | 是    | 0    | 指定矩形的左上角x坐标值。 |
   | y      | number | 是    | 0    | 指定矩形的左上角y坐标值。 |
   | width  | number | 是    | 0    | 指定矩形的宽度。      |
   | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
@@ -1404,7 +1439,8 @@ fill(): void
 对封闭路径进行填充。
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Fill {
@@ -1438,7 +1474,8 @@ clip(): void
 设置当前路径为剪切路径。
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Clip {
@@ -1476,11 +1513,12 @@ rotate(rotate: number): void
 
 - 参数
   | 参数     | 类型     | 必填   | 默认值  | 描述                                       |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | ---------------------------------------- |
   | rotate | number | 是    | 0    | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Rotate {
@@ -1515,12 +1553,13 @@ scale(x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述          |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | ----------- |
   | x    | number | 是    | 0    | 设置水平方向的缩放值。 |
   | y    | number | 是    | 0    | 设置垂直方向的缩放值。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Scale {
@@ -1563,7 +1602,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
 
 - 参数
   | 参数         | 类型     | 必填   | 默认值  | 描述       |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---------- | ------ | ---- | ---- | -------- |
   | scaleX     | number | 是    | 0    | 指定水平缩放值。 |
   | skewX      | number | 是    | 0    | 指定水平倾斜值。 |
   | skewY      | number | 是    | 0    | 指定垂直倾斜值。 |
@@ -1572,7 +1611,8 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
   | translateY | number | 是    | 0    | 指定垂直移动值。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Transform {
@@ -1613,7 +1653,7 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
 
 - 参数
   | 参数         | 类型     | 必填   | 默认值  | 描述       |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---------- | ------ | ---- | ---- | -------- |
   | scaleX     | number | 是    | 0    | 指定水平缩放值。 |
   | skewX      | number | 是    | 0    | 指定水平倾斜值。 |
   | skewY      | number | 是    | 0    | 指定垂直倾斜值。 |
@@ -1622,7 +1662,8 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
   | translateY | number | 是    | 0    | 指定垂直移动值。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct SetTransform {
@@ -1660,12 +1701,13 @@ translate(x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述       |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | -------- |
   | x    | number | 是    | 0    | 设置水平平移量。 |
   | y    | number | 是    | 0    | 设置竖直平移量。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Translate {
@@ -1705,7 +1747,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
 
 - 参数
   | 参数      | 类型                                       | 必填   | 默认值  | 描述                            |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------- | ---------------------------------------- | ---- | ---- | ----------------------------- |
   | image   | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是    | null | 图片资源，请参考ImageBitmap或PixelMap。 |
   | sx      | number                                   | 否    | 0    | 裁切源图像时距离源图像左上角的x坐标值。          |
   | sy      | number                                   | 否    | 0    | 裁切源图像时距离源图像左上角的y坐标值。          |
@@ -1718,7 +1760,8 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
 
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct ImageExample {
@@ -1752,7 +1795,7 @@ createImageData(width: number, height: number): Object
 
 - 参数
   | 参数     | 类型     | 必填   | 默认   | 描述            |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | ------------- |
   | width  | number | 是    | 0    | ImageData的宽度。 |
   | height | number | 是    | 0    | ImageData的高度。 |
 
@@ -1765,7 +1808,7 @@ createImageData(imageData: Object): Object
 
 - 参数
   | 参数        | 类型     | 必填   | 默认   | 描述                |
-  | -------- | -------- | -------- | -------- | -------- |
+  | --------- | ------ | ---- | ---- | ----------------- |
   | imagedata | Object | 是    | null | 复制现有的ImageData对象。 |
 
 ### getPixelMap
@@ -1775,7 +1818,7 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述              |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | --------------- |
   | sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
   | sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
   | sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
@@ -1788,7 +1831,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述              |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | --------------- |
   | sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
   | sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
   | sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
@@ -1803,7 +1846,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
 
 - 参数
   | 参数          | 类型     | 必填   | 默认值          | 描述                            |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ----------- | ------ | ---- | ------------ | ----------------------------- |
   | imagedata   | Object | 是    | null         | 包含像素值的ImageData对象。            |
   | dx          | number | 是    | 0            | 填充区域在x轴方向的偏移量。                |
   | dy          | number | 是    | 0            | 填充区域在y轴方向的偏移量。                |
@@ -1813,7 +1856,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
   | dirtyHeight | number | 否    | imagedata的高度 | 源图像数据矩形裁切范围的高度。               |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct PutImageData {
@@ -1853,7 +1897,8 @@ restore(): void
 对保存的绘图上下文进行恢复。
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
@@ -1884,7 +1929,8 @@ save(): void
 对当前的绘图上下文进行保存。
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
@@ -1916,14 +1962,15 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述       |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | -------- |
   | x0   | number | 是    | 0    | 起点的x轴坐标。 |
   | y0   | number | 是    | 0    | 起点的y轴坐标。 |
   | x1   | number | 是    | 0    | 终点的x轴坐标。 |
   | y1   | number | 是    | 0    | 终点的y轴坐标。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CreateLinearGradient {
@@ -1962,7 +2009,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述                |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | ----------------- |
   | x0   | number | 是    | 0    | 起始圆的x轴坐标。         |
   | y0   | number | 是    | 0    | 起始圆的y轴坐标。         |
   | r0   | number | 是    | 0    | 起始圆的半径。必须是非负且有限的。 |
@@ -1971,7 +2018,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
   | r1   | number | 是    | 0    | 终点圆的半径。必须为非负且有限的。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CreateRadialGradient {

zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md

@@ -36,7 +36,8 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GestureGroupExample {

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md

@@ -36,7 +36,8 @@ Canvas(context: CanvasRenderingContext2D)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CanvasExample {

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

@@ -20,8 +20,9 @@ addColorStop(offset: number, color: string): void
   | color | string | 是 | 'ffffff' | 设置渐变的颜色。 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Page45 {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md

@@ -51,7 +51,8 @@ destroy(name: string): void
   | name | string | 是    | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   import lottie from '@ohos/lottieETS'
 
   @Entry
@@ -130,7 +131,7 @@ play(name: string): void
   | name | string | 是    | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 |
 
 - 示例
-  ```
+  ```ts
   lottie.play(this.animateName)
   ```
 
@@ -147,7 +148,7 @@ pause(name: string): void
   | name | string | 是    | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 |
 
 - 示例
-  ```
+  ```ts
   lottie.pause(this.animateName)
   ```
 
@@ -164,7 +165,7 @@ togglePause(name: string): void
   | name | string | 是    | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
 
 - 示例
-  ```
+  ```ts
   lottie.togglePause(this.animateName)
   ```
 
@@ -181,7 +182,7 @@ stop(name: string): void
   | name | string | 是    | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
 
 - 示例
-  ```
+  ```ts
   lottie.stop(this.animateName)
   ```
 
@@ -199,7 +200,7 @@ setSpeed(speed: number, name: string): void
   | name  | string | 是    | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 |
 
 - 示例
-  ```
+  ```ts
   lottie.setSpeed(5, this.animateName)
   ```
 
@@ -217,7 +218,7 @@ setDirection(direction: AnimationDirection, name: string): void
   | name      | string             | 是    | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 |
 
 - 示例
-  ```
+  ```ts
   lottie.setDirection(-1, this.animateName)
   ```
 
@@ -262,7 +263,7 @@ play(name?: string): void
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.play()
   ```
 
@@ -279,7 +280,7 @@ destroy(name?: string): void
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.destroy()
   ```
 
@@ -296,7 +297,7 @@ pause(name?: string): void
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.pause()
   ```
 
@@ -313,7 +314,7 @@ togglePause(name?: string): void
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.togglePause()
   ```
 
@@ -330,7 +331,7 @@ stop(name?: string): void
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.stop()
   ```
 
@@ -347,7 +348,7 @@ setSpeed(speed: number): void
   | speed | number | 是    | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0 \| -1.0正常速度播放。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.setSpeed(5);
   ```
 
@@ -364,7 +365,7 @@ setDirection(direction: AnimationDirection): void
   | direction | AnimationDirection | 是    | 1为正向，-1为反向;&nbsp;当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed&lt;0叠加时也是倒放。<br/>AnimationDirection：1&nbsp;\|&nbsp;-1。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.setDirection(-1)
   ```
 
@@ -383,7 +384,7 @@ goToAndStop(value: number, isFrame?: boolean): void
   | name    | string  | 否    | 被指定的动画名，缺省默认为空。                          |
 
 - 示例
-  ```
+  ```ts
   // 按帧号控制
   this.animateItem.goToAndStop(25, true)
   // 按时间进度控制
@@ -405,7 +406,7 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
   | name    | string  | 否    | 被指定的动画名，缺省默认为空。                          |
 
 - 示例
-  ```
+  ```ts
   // 按帧号控制
   this.animateItem.goToAndPlay(25, true)
   // 按时间进度控制
@@ -426,7 +427,7 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
   | forceFlag | boolean                                  | 是    | true：即时生效播放，false：延迟到下轮循环播放再生效           |
 
 - 示例
-  ```
+  ```ts
   // 指定播放片段
   this.animateItem.playSegments([10, 20], false)
   // 指定播放片段列表
@@ -446,7 +447,7 @@ resetSegments(forceFlag: boolean): void
   | forceFlag | boolean | 是    | true：即时生效播放，false：延迟到下轮循环播放再生效 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.resetSegments(true)
   ```
 
@@ -458,7 +459,7 @@ resize(): void
 刷新动画布局。
 
 - 示例
-  ```
+  ```ts
   this.animateItem.resize()
   ```
 
@@ -475,7 +476,7 @@ setSubframe(useSubFrame: boolean): void
   | useSubFrames | boolean | 是    | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。<br/>true：属性currentFrame显示浮点。<br/>false：属性currentFrame去浮点数显示整数。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.setSubframe(false)
   ```
 
@@ -492,7 +493,7 @@ getDuration(inFrames?: boolean): void
   | inFrames | boolean | 否    | true：获取帧数，&nbsp;false：获取时间(单位ms)，缺省默认false。 |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.getDuration(true)
   ```
 
@@ -510,7 +511,7 @@ addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEve
   | callback | AnimationEventCallback&lt;T&gt; | 是    | 用户自定义回调函数                                |
 
 - 示例
-  ```
+  ```ts
   private callbackItem: any = function() {
       console.log("grunt loopComplete")
   }
@@ -534,7 +535,7 @@ removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: Animatio
   | callback | AnimationEventCallback&lt;T&gt; | 否    | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。            |
 
 - 示例
-  ```
+  ```ts
   this.animateItem.removeEventListener('loopComplete', this.animateName)
   ```
 
@@ -552,7 +553,7 @@ triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
   | args | any                | 是    | 用户自定义回调参数 |
 
 - 示例
-  ```
+  ```ts
   private triggerCallBack: any = function(item) {
       console.log("trigger loopComplete, name:" + item.name)
   }

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md

@@ -19,8 +19,9 @@ addPath(path: Object): void
   | path | Object | 是 | null | 需要添加到当前路径的路径对象 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct AddPath {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -56,8 +57,9 @@ closePath(): void
 将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct ClosePath {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -100,8 +102,9 @@ moveTo(x: number, y: number): void
   | y | number | 是 | 0 | 目标点Y轴坐标 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct MoveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -144,8 +147,9 @@ lineTo(x: number, y: number): void
   | y | number | 是 | 0 | 目标点Y轴坐标 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct LineTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -193,8 +197,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   | y | number | 是 | 0 | 路径结束时的y坐标值。 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct BezierCurveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -236,8 +241,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
   | y | number | 是 | 0 | 路径结束时的y坐标值。 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct QuadraticCurveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -282,8 +288,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   | anticlockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Arc {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -325,8 +332,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   | radius | number | 是 | 0 | 圆弧的圆半径值。 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct ArcTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -372,8 +380,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
   | anticlockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -415,8 +424,9 @@ rect(x: number, y: number, width: number, height: number): void
   | height | number | 是 | 0 | 指定矩形的高度。 | 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)

zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md

@@ -63,7 +63,8 @@ AlphabetIndexer(value: {arrayValue : Array<string>, selected : number})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AlphabetIndexerSample {

zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md

@@ -58,7 +58,8 @@ Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BadgeExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-column.md

@@ -46,7 +46,8 @@ Column(value:{space?: Length})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColumnExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md

@@ -34,7 +34,8 @@ ColumnSplit()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColumnSplitExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md

@@ -34,7 +34,8 @@ Counter()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CounterExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md

@@ -25,7 +25,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 
 - 参数
   | 参数名            | 参数类型                                     | 必填   | 默认值               | 参数描述                                     |
-  | -------- | -------- | -------- | -------- | -------- |
+  | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
   | direction      | FlexDirection                            | 否    | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。                 |
   | wrap           | FlexWrap                                 | 否    | FlexWrap.NoWrap   | Flex容器是单行/列还是多行/列排列。                     |
   | justifyContent | FlexAlign                                | 否    | FlexAlign.Start   | 子组件在Flex容器主轴上的对齐格式。                      |
@@ -34,7 +34,7 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 
 - FlexDirection枚举说明
   | 名称            | 描述               |
-  | -------- | -------- |
+  | ------------- | ---------------- |
   | Row           | 主轴与行方向一致作为布局模式。  |
   | RowReverse    | 与Row方向相反方向进行布局。  |
   | Column        | 主轴与列方向一致作为布局模式。  |
@@ -42,14 +42,14 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 
 - FlexWrap枚举说明
   | 名称          | 描述                          |
-  | -------- | -------- |
+  | ----------- | --------------------------- |
   | NoWrap      | Flex容器的元素单行/列布局，子项允许超出容器。   |
   | Wrap        | Flex容器的元素多行/列排布，子项允许超出容器。   |
   | WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
 
 - FlexAlign枚举说明
   | 名称           | 描述                                       |
-  | -------- | -------- |
+  | ------------ | ---------------------------------------- |
   | Start        | 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
   | Center       | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。   |
   | End          | 元素在主轴方向尾部对齐,  最后一个元素与行尾对齐，其他元素与后一个对齐。 |
@@ -60,8 +60,8 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 
 ## 示例
 
-```
-// Example 01
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FlexExample1 {
@@ -123,8 +123,8 @@ struct FlexExample1 {
 
 ![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif)
 
-```
-// Example 02
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FlexExample2 {
@@ -169,8 +169,8 @@ struct FlexExample2 {
 
 ![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png)
 
-```
-// Example 03
+```ts
+// xxx.ets
 @Component
 struct JustifyContentFlex {
   @Prop justifyContent : number
@@ -218,8 +218,8 @@ struct FlexExample3 {
 
 ![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif)
 
-```
-// Example 04
+```ts
+// xxx.ets
 @Component
 struct AlignItemsFlex {
   @Prop alignItems : number
@@ -269,8 +269,8 @@ struct FlexExample4 {
 
 ![zh-cn_image_0000001219662653](figures/zh-cn_image_0000001219662653.gif)
 
-```
-// Example 05
+```ts
+// xxx.ets
 @Component
 struct AlignContentFlex {
   @Prop alignContent: number

zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md

@@ -56,7 +56,8 @@ Grid()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md

@@ -51,7 +51,8 @@ GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridContainerExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md

@@ -43,7 +43,8 @@ GridItem()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridItemExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-list.md

@@ -72,7 +72,8 @@ List(value:{space?: number, initialIndex?: number})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ListExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md

@@ -46,7 +46,8 @@ ListItem()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ListItemExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md

@@ -25,13 +25,13 @@ Navigator(value?: {target: string, type?: NavigationType})
 
 - 参数
   | 参数名    | 参数类型           | 必填   | 默认值                 | 参数描述         |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | -------------- | ---- | ------------------- | ------------ |
   | target | string         | 是    | -                   | 指定跳转目标页面的路径。 |
   | type   | NavigationType | 否    | NavigationType.Push | 指定路由方式。      |
 
 - NavigationType枚举说明
   | 名称      | 描述                         |
-  | -------- | -------- |
+  | ------- | -------------------------- |
   | Push    | 跳转到应用内的指定页面。               |
   | Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 |
   | Back    | 返回上一页面或指定的页面。              |
@@ -40,15 +40,15 @@ Navigator(value?: {target: string, type?: NavigationType})
 ## 属性
 
 | 名称     | 参数      | 默认值       | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ------ | ------- | --------- | ---------------------------------------- |
 | active | boolean | -         | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。       |
 | params | Object  | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
 
 
 ## 示例
 
-```
-// Navigator Page
+```ts
+// Navigator.ets
 @Entry
 @Component
 struct NavigatorExample {
@@ -72,8 +72,8 @@ struct NavigatorExample {
 }
 ```
 
-```
-// Detail Page
+```ts
+// Detail.ets
 import router from '@system.router'
 
 @Entry
@@ -95,8 +95,8 @@ struct DetailExample {
 
 ```
 
-```
-// Back Page
+```ts
+// Back.ets
 @Entry
 @Component
 struct BackExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md

@@ -62,7 +62,8 @@ Panel(value:{show：boolean})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PanelExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md

@@ -48,7 +48,8 @@ Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number\}\)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RefreshExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-row.md

@@ -44,7 +44,8 @@ Row(value:{space?: Length})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RowExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md

@@ -34,7 +34,8 @@ RowSplit()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RowSplitExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md

@@ -135,7 +135,8 @@ scroller.scrollToIndex(value: number): void
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ScrollExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md

@@ -65,7 +65,8 @@ SideBarContainer( type?: SideBarContainerType )
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SideBarContainerExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md

@@ -29,7 +29,8 @@ Stack(value:{alignContent?: Alignment})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StackExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md

@@ -23,14 +23,14 @@ Swiper(value:{controller?: SwiperController})
 
 - 参数
   | 参数名        | 参数类型                                  | 必填   | 默认值  | 参数描述                 |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---------- | ------------------------------------- | ---- | ---- | -------------------- |
   | controller | [SwiperController](#swipercontroller) | 否    | null | 给组件绑定一个控制器，用来控制组件翻页。 |
 
 
 ## 属性
 
 | 名称                          | 参数类型                                     | 默认值        | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
 | index                       | number                                   | 0          | 设置当前在容器中显示的子组件的索引值。                      |
 | autoPlay                    | boolean                                  | false      | 子组件是否自动播放，自动播放状态下，导航点不可操作。               |
 | interval                    | number                                   | 3000       | 使用自动播放时播放的时间间隔，单位为毫秒。                    |
@@ -42,7 +42,7 @@ Swiper(value:{controller?: SwiperController})
 | cachedCount<sup>8+</sup>    | number                                   | 1          | 设置预加载子组件个数。                              |
 | disableSwipe<sup>8+</sup>   | boolean                                  | false      | 禁用组件滑动切换功能。                              |
 | curve<sup>8+</sup>          | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
-| indicatorStyle<sup>8+</sup>| {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - |设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
+| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | -          | 设置indicator样式：<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
 
 
 ### SwiperController
@@ -50,7 +50,7 @@ Swiper(value:{controller?: SwiperController})
 Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。
 
 | 接口名称                | 功能描述   |
-| -------- | -------- |
+| ------------------- | ------ |
 | showNext():void     | 翻至下一页。 |
 | showPrevious():void | 翻至上一页。 |
 
@@ -58,13 +58,14 @@ Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然
 ## 事件
 
 | 名称                                       | 功能描述               |
-| -------- | -------- |
+| ---------------------------------------- | ------------------ |
 | onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前显示的组件索引变化时触发该事件。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 class MyDataSource implements IDataSource {
   private list: number[] = []
   private listener: DataChangeListener

zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md

@@ -38,7 +38,8 @@ TabContent()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TabContentExample  {

zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md

@@ -86,7 +86,8 @@ changeIndex(value: number): void
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TabsExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md

@@ -43,7 +43,8 @@ Circle(options?: {width: Length, height: Length})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CircleExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md

@@ -43,7 +43,8 @@ ellipse(options?: {width: Length, height: Length})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct EllipseExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md

@@ -45,7 +45,8 @@ Line(options?: {width: Length, height: Length})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md

@@ -20,7 +20,7 @@
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
 | 参数名称     | 参数类型                                | 默认值  | 必填   | 参数描述                                     |
-| -------- | --------------------------------------- | ------ | ---- | ------------------------------------------------------------ |
+| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
 | width    | [Length](../../ui/ts-types.md#长度类型) | 0    | 否    | 路径所在矩形画布的宽度。                             |
 | height   | [Length](../../ui/ts-types.md#长度类型) | 0    | 否    | 路径所在矩形画布的高度。                             |
 | commands | string                              | ''   | 是    | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
@@ -28,7 +28,7 @@
 commands支持的绘制命令如下：
 
 | 命令   | 名称                               | 参数                                       | 说明                                       |
-| ---- | -------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------ |
+| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
 | M    | moveto                           | （x y）                                    | 在给定的 (x, y) 坐标处开始一个新的子路径。例如，`M 0 0` 表示将（0, 0）点作为新子路径的起始点。 |
 | L    | lineto                           | （x y）                                    | 从当前点到给定的 (x, y) 坐标画一条线，该坐标成为新的当前点。例如，`L 50 50` 表示绘制当前点到（50, 50）点的直线，并将（50, 50）点作为新子路径的起始点。 |
 | H    | horizontal lineto                | x                                        | 从当前点绘制一条水平线，等效于将y坐标指定为0的L命令。例如，`H 50 ` 表示绘制当前点到（50, 0）点的直线，并将（50, 0）点作为新子路径的起始点。 |
@@ -45,6 +45,7 @@ commands支持的绘制命令如下：
 ## 示例
 
 ```ts
+// xxx.ets
 @Entry
 @Component
 struct PathExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md

@@ -44,7 +44,8 @@ Polygon(value:{options?: {width: Length, height: Length}})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PolygonExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md

@@ -44,7 +44,8 @@ Polyline(options?: {width: Length, height: Length})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PolylineExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md

@@ -49,7 +49,8 @@ Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<L
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RectExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md

@@ -59,7 +59,8 @@ Shape(value:{target?: PixelMap})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShapeExample {

zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md

@@ -30,7 +30,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AnimateToExample {

zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md

@@ -58,7 +58,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GestureSettingsExample {

zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md

@@ -26,7 +26,7 @@ init(curve?: Curve): Object
 
 - 参数
   | 参数名   | 类型    | 必填   | 默认值    | 说明    |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ----- | ----- | ---- | ------ | ----- |
   | curve | Curve | 否    | Linear | 曲线对象。 |
 
 - 返回值<br>
@@ -43,7 +43,7 @@ steps(count: number, end: boolean): Object
 
 - 参数
   | 参数名   | 类型      | 必填   | 默认值  | 说明                                       |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ----- | ------- | ---- | ---- | ---------------------------------------- |
   | count | number  | 是    | -    | 阶梯的数量，需要为正整数。                            |
   | end   | boolean | 否    | true | 在每个间隔的起点或是终点发生阶跃变化&nbsp;，默认值为true，即在终点发生阶跃变化。 |
 
@@ -61,7 +61,7 @@ cubicBezier(x1: number, y1: number, x2: number, y2: number): Object
 
 - 参数
   | 参数名  | 类型     | 必填   | 说明             |
-  | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | -------------- |
   | x1   | number | 是    | 确定贝塞尔曲线第一点横坐标。 |
   | y1   | number | 是    | 确定贝塞尔曲线第一点纵坐标。 |
   | x2   | number | 是    | 确定贝塞尔曲线第二点横坐标。 |
@@ -81,7 +81,7 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje
 
 - 参数
   | 参数名       | 类型     | 必填   | 说明    |
-  | -------- | -------- | -------- | -------- |
+  | --------- | ------ | ---- | ----- |
   | velocity  | number | 是    | 初始速度。 |
   | mass      | number | 是    | 质量。   |
   | stiffness | number | 是    | 刚度。   |
@@ -93,7 +93,7 @@ spring(velocity: number, mass: number, stiffness: number, damping: number): Obje
 
 ## 示例
 
-```
+```ts
 import Curves from '@ohos.curves'
 let curve1 = Curves.init() // 创建一个默认线性插值曲线
 let curve2 = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
@@ -104,12 +104,12 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞
 
 曲线对象只能通过上面的接口创建。
 | 接口名称                                     | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | interpolate(time:&nbsp;number):&nbsp;number | 插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。<br/>time:&nbsp;当前的归一化时间参数，有效值范围0到1。<br/>返回归一化time时间点对应的曲线插值。 |
 
 
 - 示例
-  ```
+  ```ts
   import Curves from '@ohos.curves'
   let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线
   let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值
@@ -118,7 +118,8 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞
 
 ## 整体示例
 
-```
+```ts
+// xxx.ets
 import Curves from '@ohos.curves'
 @Entry
 @Component

zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md

@@ -26,17 +26,17 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，
 
 - 参数
   | 参数名   | 类型                  | 必填   | 默认值                                      | 说明                                     |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ----- | ------------------- | ---- | ---------------------------------------- | -------------------------------------- |
   | array | Array&lt;number&gt; | 是    | [1,&nbsp;0,&nbsp;0,&nbsp;0,<br/>0,&nbsp;1,&nbsp;0,&nbsp;0,<br/>0,&nbsp;0,&nbsp;1,&nbsp;0,<br/>0,&nbsp;0,&nbsp;0,&nbsp;1] | 参数为长度为16（4\*4）的number数组,&nbsp;详情见参数描述。 |
 
 - 返回值
   | 类型     | 说明             |
-  | -------- | -------- |
+  | ------ | -------------- |
   | Object | 根据入参创建的四阶矩阵对象。 |
 
 - 参数描述
   | 参数名  | 类型     | 必填   | 说明                   |
-  | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | -------------------- |
   | m00  | number | 是    | x轴缩放值，单位矩阵默认为1。      |
   | m01  | number | 是    | 第2个值，xyz轴旋转会影响这个值。   |
   | m02  | number | 是    | 第3个值，xyz轴旋转会影响这个值。   |
@@ -55,7 +55,7 @@ Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，
   | m33  | number | 是    | 齐次坐标下生效，产生透视投影效果。    |
 
 - 示例
-  ```
+  ```ts
   import Matrix4 from '@ohos.matrix4'
   // 创建一个四阶矩阵
   let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
@@ -75,11 +75,11 @@ Matrix的初始化函数，可以返回一个单位矩阵对象。
 
 - 返回值
   | 类型     | 说明      |
-  | -------- | -------- |
+  | ------ | ------- |
   | Object | 单位矩阵对象。 |
 
 - 示例
-  ```
+  ```ts
   // matrix1 和 matrix2 效果一致
   import Matrix4 from '@ohos.matrix4'
   let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0,
@@ -100,11 +100,12 @@ Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。
 
 - 返回值
   | 类型     | 说明         |
-  | -------- | -------- |
+  | ------ | ---------- |
   | Object | 当前矩阵的拷贝对象。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   import Matrix4 from '@ohos.matrix4'
   @Entry
   @Component
@@ -143,16 +144,17 @@ Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个
 
 - 参数
   | 参数名    | 类型      | 必填   | 默认值  | 说明        |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------- | ---- | ---- | --------- |
   | matrix | Matrix4 | 是    | -    | 待叠加的矩阵对象。 |
 
 - 返回值
   | 类型     | 说明        |
-  | -------- | -------- |
+  | ------ | --------- |
   | Object | 矩阵叠加后的对象。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   import Matrix4 from '@ohos.matrix4'
   @Entry
   @Component
@@ -184,11 +186,11 @@ Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效
 
 - 返回值
   | 类型     | 说明          |
-  | -------- | -------- |
+  | ------ | ----------- |
   | Object | 当前矩阵的逆矩阵对象。 |
 
 - 示例
-  ```
+  ```ts
   import Matrix4 from '@ohos.matrix4'
   // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反
   let matrix1 = Matrix4.identity().scale({x:2})
@@ -206,7 +208,7 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。
 
 - 参数
   | 参数名  | 类型     | 必填   | 默认值  | 说明            |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | ------------- |
   | x    | number | 否    | 0    | x轴的平移距离，单位px。 |
   | y    | number | 否    | 0    | y轴的平移距离，单位px。 |
   | z    | number | 否    | 0    | z轴的平移距离，单位px。 |
@@ -214,11 +216,12 @@ Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。
 
 - 返回值
   | 类型     | 说明             |
-  | -------- | -------- |
+  | ------ | -------------- |
   | Object | 增加好平移效果后的矩阵对象。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   import Matrix4 from '@ohos.matrix4'
   @Entry
   @Component
@@ -247,7 +250,7 @@ Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。
 
 - 参数
   | 参数名     | 类型     | 必填   | 默认值  | 说明         |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------- | ------ | ---- | ---- | ---------- |
   | x       | number | 否    | 1    | x轴的缩放倍数。   |
   | y       | number | 否    | 1    | y轴的缩放倍数。   |
   | z       | number | 否    | 1    | z轴的缩放倍数。   |
@@ -257,11 +260,12 @@ Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。
 
 - 返回值
   | 类型     | 说明             |
-  | -------- | -------- |
+  | ------ | -------------- |
   | Object | 增加好缩放效果后的矩阵对象。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   import Matrix4 from '@ohos.matrix4'
   @Entry
   @Component
@@ -290,7 +294,7 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。
 
 - 参数
   | 参数名     | 类型     | 必填   | 默认值  | 说明         |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------- | ------ | ---- | ---- | ---------- |
   | x       | number | 否    | 1    | 旋转轴向量x坐标。  |
   | y       | number | 否    | 1    | 旋转轴向量y坐标。  |
   | z       | number | 否    | 1    | 旋转轴向量z坐标。  |
@@ -301,11 +305,12 @@ Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。
 
 - 返回值
   | 类型     | 说明             |
-  | -------- | -------- |
+  | ------ | -------------- |
   | Object | 增加好旋转效果后的矩阵对象。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   import Matrix4 from '@ohos.matrix4'
   @Entry
   @Component
@@ -334,17 +339,18 @@ Matrix的坐标点转换函数，可以将当前的变换效果作用到一个
 
 - 参数
   | 参数名   | 类型    | 必填   | 默认值  | 说明        |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ----- | ----- | ---- | ---- | --------- |
   | point | Point | 是    | -    | 需要转换的坐标点。 |
 
 
 - 返回值
   | 类型    | 说明               |
-  | -------- | -------- |
+  | ----- | ---------------- |
   | Point | 返回矩阵变换后的Point对象。 |
 
 - 示例
-  ```
+  ```ts
+  // xxx.ets
   import Matrix4 from '@ohos.matrix4'
   import prompt from '@system.prompt'
 

zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md

@@ -155,7 +155,8 @@ setCurrentTime(value: number, seekMode: SeekMode)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct VideoCreateComponent {

zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md

@@ -42,7 +42,8 @@ show(options: { paramObject1})
 ## 示例
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ActionSheetExapmle {

zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md

@@ -41,7 +41,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AlertDialogExample {

zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md

@@ -14,7 +14,7 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut
 
 - 参数
   | 参数名                    | 参数类型                                     | 必填   | 默认值                     | 参数描述                   |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---------------------- | ---------------------------------------- | ---- | ----------------------- | ---------------------- |
   | builder                | [CustomDialog](../../ui/ts-component-based-customdialog.md) | 是    | -                       | 自定义弹窗内容构造器。            |
   | cancel                 | () => void                  | 否    | -                       | 点击遮障层退出时的回调。           |
   | autoCancel             | boolean                                  | 否    | true                    | 是否允许点击遮障层退出。           |
@@ -25,7 +25,7 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut
 
 - DialogAlignment枚举说明
   | 名称                       | 描述      |
-  | -------- | -------- |
+  | ------------------------ | ------- |
   | Top                      | 垂直顶部对齐。 |
   | Center                   | 垂直居中对齐。 |
   | Bottom                   | 垂直底部对齐。 |
@@ -62,7 +62,8 @@ close(): void
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @CustomDialog
 struct CustomDialogExample {
   controller: CustomDialogController

zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md

@@ -29,7 +29,8 @@ show(options?: DatePickerDialogOptions)
 ## 示例
 
 ### 日期滑动选择器（显示农历）示例
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerDialogExample01 {
@@ -62,7 +63,8 @@ struct DatePickerDialogExample01 {
 }
 ```
 ### 日期滑动选择器（不显示农历）示例
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerDialogExample02 {

zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md

@@ -10,8 +10,9 @@ close(): void
 可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#属性)给组件绑定的菜单。
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Index {
     @Builder MenuBuilder(){

zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md

@@ -33,7 +33,8 @@ show(options: TextPickerDialogOptions)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextPickerDialogExample {

zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md

@@ -27,7 +27,8 @@ show(options?: TimePickerDialogOptions)
 ## 示例
 
 ### 时间滑动选择器（24小时制）示例
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerDialogExample01 {
@@ -55,7 +56,8 @@ struct TimePickerDialogExample01 {
 }
 ```
 ### 时间滑动选择器（12小时制）示例
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerDialogExample02 {

zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md

@@ -16,7 +16,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MotionPathExample {

zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

@@ -48,7 +48,8 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
 
 ### fillStyle
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FillStyleExample {
@@ -80,7 +81,8 @@ struct FillStyleExample {
 
 ### lineWidth
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineWidthExample {
@@ -112,7 +114,8 @@ struct LineWidthExample {
 
 ### strokeStyle
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StrokeStyleExample {
@@ -146,7 +149,8 @@ struct StrokeStyleExample {
 
 ### lineCap
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineCapExample {
@@ -182,7 +186,8 @@ struct LineCapExample {
 
 ### lineJoin
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineJoinExample {
@@ -219,7 +224,8 @@ struct LineJoinExample {
 
 ### miterLimit
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MiterLimit {
@@ -256,7 +262,8 @@ struct MiterLimit {
 
 ### font
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct Font {
@@ -288,7 +295,8 @@ struct Font {
 
 ### textAlign
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CanvasExample {
@@ -335,7 +343,8 @@ struct CanvasExample {
 
 ### textBaseline
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextBaseline {
@@ -382,7 +391,8 @@ struct TextBaseline {
 
 ### globalAlpha
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GlobalAlpha {
@@ -417,7 +427,8 @@ struct GlobalAlpha {
 
 ### lineDashOffset
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineDashOffset {
@@ -464,7 +475,8 @@ struct LineDashOffset {
 | copy             | 显示新绘制内容而忽略现有绘制内容。        |
 | xor              | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GlobalCompositeOperation {
@@ -504,7 +516,8 @@ struct GlobalCompositeOperation {
 
 ### shadowBlur
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowBlur {
@@ -538,7 +551,8 @@ struct ShadowBlur {
 
 ### shadowColor
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowColor {
@@ -573,7 +587,8 @@ struct ShadowColor {
 
 ### shadowOffsetX
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowOffsetX {
@@ -608,7 +623,8 @@ struct ShadowOffsetX {
 
 ### shadowOffsetY
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowOffsetY {
@@ -643,7 +659,8 @@ struct ShadowOffsetY {
 
 ### imageSmoothingEnabled
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageSmoothingEnabled {
@@ -692,8 +709,9 @@ fillRect(x: number, y: number, w: number, h: number): void
   | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct FillRect {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -736,8 +754,9 @@ strokeRect(x: number, y: number, w: number, h: number): void
   | height | number | 是    | 0    | 指定矩形的高度。     |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct StrokeRect {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -779,8 +798,9 @@ clearRect(x: number, y: number, w: number, h: number): void
   | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct ClearRect {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -823,8 +843,9 @@ fillText(text: string, x: number, y: number): void
   | y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct FillText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -866,8 +887,9 @@ strokeText(text: string, x: number, y: number): void
   | y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct StrokeText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -917,8 +939,9 @@ measureText(text: string): TextMetrics
   | width | number | 字符串的宽度。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct MeasureText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -959,8 +982,9 @@ stroke(path?: Path2D): void
   | path | [Path2D](ts-components-canvas-path2d.md) | 否    | null | 需要绘制的Path2D。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Stroke {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -997,8 +1021,9 @@ beginPath(): void
 创建一个新的绘制路径。
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct BeginPath {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1043,8 +1068,9 @@ moveTo(x: number, y: number): void
   | y    | number | 是    | 0    | 指定位置的y坐标。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct MoveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1087,8 +1113,9 @@ lineTo(x: number, y: number): void
   | y    | number | 是    | 0    | 指定位置的y坐标。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct LineTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1125,8 +1152,9 @@ closePath(): void
 结束当前路径形成一个封闭路径。
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct ClosePath {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1171,8 +1199,9 @@ createPattern(image: ImageBitmap, repetition: string): CanvasPattern
   | repetition | string                                   | 是    | “”   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CreatePattern {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1219,8 +1248,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   | y    | number | 是    | 0    | 路径结束时的y坐标值。    |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct BezierCurveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1265,8 +1295,9 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
   | y    | number | 是    | 0    | 路径结束时的y坐标值。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct QuadraticCurveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1313,8 +1344,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   | anticlockwise | boolean | 否    | false | 是否逆时针绘制圆弧。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Arc {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1359,8 +1391,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   | radius | number | 是    | 0    | 圆弧的圆半径值。        |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct ArcTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1409,8 +1442,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 - 示例
 
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1454,8 +1488,9 @@ rect(x: number, y: number, width: number, height: number): void
   | height | number | 是    | 0    | 指定矩形的高度。      |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1490,8 +1525,9 @@ fill(): void
 对封闭路径进行填充。
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Fill {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1526,8 +1562,9 @@ clip(): void
 设置当前路径为剪切路径。
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Clip {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1570,8 +1607,9 @@ rotate(rotate: number): void
   | rotate | number | 是    | 0    | 设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Rotate {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1612,8 +1650,9 @@ scale(x: number, y: number): void
   | y    | number | 是    | 0    | 设置垂直方向的缩放值。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Scale {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1666,8 +1705,9 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
   | translateY | number | 是    | 0    | 指定垂直移动值。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Transform {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1718,8 +1758,9 @@ setTransfrom方法使用的参数和transform()方法相同，但setTransform()
   | translateY | number | 是    | 0    | 指定垂直移动值。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct SetTransform {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1763,8 +1804,9 @@ translate(x: number, y: number): void
   | y    | number | 是    | 0    | 设置竖直平移量。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Translate {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1818,8 +1860,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
 
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct Index {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1917,8 +1960,9 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
   | dirtyHeight | number | 否    | imagedata的高度 | 源图像数据矩形裁切范围的高度。               |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct PutImageData {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1959,8 +2003,9 @@ restore(): void
 对保存的绘图上下文进行恢复。
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -1992,8 +2037,9 @@ save(): void
 对当前的绘图上下文进行保存。
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -2033,8 +2079,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
   | y1   | number | 是    | 0    | 终点的y轴坐标。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CreateLinearGradient {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
@@ -2084,8 +2131,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
   | r1   | number | 是    | 0    | 终点圆的半径。必须为非负且有限的。 |
 
 - 示例
-  ```
-  @Entry
+  ```ts
+// xxx.ets
+@Entry
   @Component
   struct CreateRadialGradient {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)

zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md

@@ -8,14 +8,14 @@
 
 
 | 名称                  | 参数     | 参数描述                            |
-| -------- | -------- | -------- |
+| ------------------- | ------ | ------------------------------- |
 | PageTransitionEnter | Object | 页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。 |
 | PageTransitionExit  | Object | 页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。 |
 
 
 - 动效参数说明
   | 参数名称     | 参数类型                      | 默认值    | 必填   | 参数描述                                     |
-  | -------- | -------- | -------- | -------- | -------- |
+  | -------- | ------------------------- | ------ | ---- | ---------------------------------------- |
   | type     | RouteType                 | -      | 否    | 不配置时表明pop为push时效果的逆播。                    |
   | duration | number                    | 1000   | 否    | 动画时长，单位为毫秒。                              |
   | curve    | Curve \| Curves | Linear | 否    | 动画曲线，有效值参见[Curve](ts-animatorproperty.md) 说明。 |
@@ -24,7 +24,7 @@
 
 - RouteType枚举说明
   | 名称   | 描述                                       |
-  | -------- | -------- |
+  | ---- | ---------------------------------------- |
   | Pop  | PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。 |
   | Push | PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。 |
 
@@ -34,7 +34,7 @@
 PageTransitionEnter和PageTransitionExit组件支持的属性：
 
 | 参数名称      | 参数类型                                     | 默认值               | 必填   | 参数描述                                     |
-| -------- | -------- | -------- | -------- | -------- |
+| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
 | slide     | SlideEffect                              | SlideEffect.Right | 否    | 设置转场的滑入效果，有效值参见SlideEffect枚举说明。          |
 | translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | -                 | 否    | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。 |
 | scale     | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | -                 | 否    | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。             |
@@ -42,7 +42,7 @@ PageTransitionEnter和PageTransitionExit组件支持的属性：
 
 - SlideEffect枚举说明
   | 名称     | 描述                        |
-  | -------- | -------- |
+  | ------ | ------------------------- |
   | Left   | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 |
   | Right  | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 |
   | Top    | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 |
@@ -54,7 +54,7 @@ PageTransitionEnter和PageTransitionExit组件支持的属性：
 PageTransitionEnter和PageTransitionExit组件支持的事件：
 
 | 事件                                       | 功能描述                                |
-| -------- | -------- |
+| ---------------------------------------- | ----------------------------------- |
 | onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
 | onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
 
@@ -63,7 +63,7 @@ PageTransitionEnter和PageTransitionExit组件支持的事件：
 
 自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。
 
-```
+```ts
 // index.ets
 @Entry
 @Component
@@ -97,7 +97,7 @@ struct PageTransitionExample1 {
 }
 ```
 
-```
+```ts
 // page1.ets
 @Entry
 @Component
@@ -132,7 +132,7 @@ struct AExample {
 
 自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。
 
-```
+```ts
 // index.ets 
 @Entry
 @Component
@@ -163,7 +163,7 @@ struct PageTransitionExample {
 }
 ```
 
-```
+```ts
 // page1.ets
 @Entry
 @Component

zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md

@@ -34,7 +34,8 @@
 
 示例功能通过一个Button控制第二个Button的出现和消失，并通过transition配置第二个Button出现和消失的过场动画。
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TransitionExample {

zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md

@@ -10,12 +10,12 @@
 ## 属性
 
 | 名称               | 参数                                       | 默认值  | 参数描述                                     |
-| -------- | -------- | -------- | -------- |
+| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- |
 | sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | -    | 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 |
 
 - options参数说明
   | 参数名称     | 参数类型                      | 默认值    | 必填   | 参数描述                  |
-  | -------- | -------- | -------- | -------- | -------- |
+  | -------- | ------------------------- | ------ | ---- | --------------------- |
   | duration | number                    | 1000   | 否    | 单位为毫秒，默认动画时长为1000毫秒。  |
   | curve    | Curve&nbsp;\|&nbsp;Curves | Linear | 否    | 默认曲线为线性，有效值参见Curve说明。 |
   | delay    | number                    | 0      | 否    | 单位为毫秒，默认不延时播放。        |
@@ -25,7 +25,8 @@
 
 示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SharedTransitionExample {
@@ -53,8 +54,8 @@ struct SharedTransitionExample {
 }
 ```
 
-```
-// PageB
+```ts
+// PageB.ets
 @Entry
 @Component
 struct BExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md

@@ -33,7 +33,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BackgroundExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md

@@ -34,7 +34,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BorderExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md

@@ -19,7 +19,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TouchAbleExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md

@@ -57,7 +57,8 @@ sendEventByKey(id: string, action: number, params: string): boolean
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct IdExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md

@@ -19,7 +19,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct EnabledExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md

@@ -24,7 +24,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FlexExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md

@@ -21,7 +21,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FocusableExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md

@@ -37,7 +37,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColorGradientExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md

@@ -23,7 +23,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridContainerExample1 {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md

@@ -26,7 +26,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct HoverExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md

@@ -29,7 +29,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageEffectsExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md

@@ -20,7 +20,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AspectRatioExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md

@@ -31,7 +31,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PositionExample {
@@ -64,7 +65,8 @@ struct PositionExample {
 
 ![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PositionExample2 {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md

@@ -13,20 +13,20 @@
 
 
 | 名称                           | 参数类型                                     | 默认值  | 描述                                 |
-| -------- | -------- | -------- | -------- |
+| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
 | bindMenu                     | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -    | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
 | bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<br>responseType:&nbsp;ResponseType | -    | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。  |
 
 
 - MenuItem
   | 名称     | 类型                      | 描述          |
-  | -------- | -------- | -------- |
+  | ------ | ----------------------- | ----------- |
   | value  | string                  | 菜单项文本。      |
   | action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
 
 - ResponseType<sup>8+</sup>
   | 参数值        | 描述            |
-  | -------- | -------- |
+  | ---------- | ------------- |
   | LongPress  | 通过长按触发菜单弹出。   |
   | RightClick | 通过鼠标右键触发菜单弹出。 |
 
@@ -34,7 +34,8 @@
 
 #### 普通菜单
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MenuExample {
@@ -66,7 +67,8 @@ struct MenuExample {
 
 #### 自定义内容菜单
 
-```
+```ts
+// xxx.ets
 import router from '@system.router';
 
 @Entry
@@ -116,7 +118,8 @@ struct MenuExample {
 
 #### 菜单(右键触发显示)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ContextMenuExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md

@@ -22,7 +22,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct OpacityExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md

@@ -19,7 +19,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct OverlayExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md

@@ -28,7 +28,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StyleExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md

@@ -52,7 +52,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PopupExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md

@@ -20,7 +20,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ClipAndMaskExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md

@@ -25,7 +25,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SizeExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md

@@ -44,7 +44,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextStyleExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md

@@ -34,7 +34,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ResponseRegionExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md

@@ -13,7 +13,7 @@
 
 
 | 名称        | 参数类型                                     | 默认值                                      | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| --------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
 | rotate    | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。 |
 | translate | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length,<br/>z?&nbsp;:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。  |
 | scale     | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。 |
@@ -22,7 +22,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 import Matrix4 from '@ohos.matrix4'
 
 @Entry

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md

@@ -27,7 +27,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct VisibilityExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md

@@ -19,7 +19,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ZIndexExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md

@@ -18,7 +18,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AreaExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md

@@ -47,7 +47,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ClickExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md

@@ -31,7 +31,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DragExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md

@@ -62,7 +62,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct KeyEventExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md

@@ -12,14 +12,15 @@
 ## 事件
 
 | 名称                                       | 支持冒泡 | 功能描述          |
-| -------- | -------- | -------- | 
+| ---------------------------------------- | ---- | ------------- |
 | onAppear(callback: () => void) | 否    | 组件挂载显示时触发此回调。 |
 | onDisappear(callback: () => void) | 否    | 组件卸载消失时触发此回调。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 import prompt from '@system.prompt'
 
 @Entry

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md

@@ -12,31 +12,31 @@
 ## 事件
 
 | 名称                                       | 是否冒泡 | 功能描述                                     |
-| -------- | -------- | -------- |
-| onTouch(callback: (event?: TouchEvent) => void) | 是 | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 
+| ---------------------------------------- | ---- | ---------------------------------------- |
+| onTouch(callback: (event?: TouchEvent) => void) | 是    | 触摸动作触发该方法调用，event参数见[TouchEvent](#touchevent对象说明)介绍。 |
 
 
 ### TouchEvent对象说明
 
 - 属性
   | 属性名称                | 类型                                       | 描述           |
-  | -------- | -------- | -------- |
+  | ------------------- | ---------------------------------------- | ------------ |
   | type                | TouchType                                | 触摸事件的类型。     |
   | touches             | ArrayTouchObject>                     | 全部手指信息。      |
   | changedTouches      | ArrayTouchObject>                     | 当前发生变化的手指信息。 |
   | timestamp           | number                                   | 事件时间戳。       |
-  | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md)| 被触摸元素对象。 |
+  | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 被触摸元素对象。     |
 
 
 - 接口
   | 接口名称                   | 功能描述    |
-  | -------- | -------- |
+  | ---------------------- | ------- |
   | stopPropagation()：void | 阻塞事件冒泡。 |
 
 
 - TouchObject对象说明
   | 属性名称    | 类型        | 描述                  |
-  | -------- | -------- | -------- |
+  | ------- | --------- | ------------------- |
   | type    | TouchType | 触摸事件的类型。            |
   | id      | number    | 手指唯一标识符。            |
   | screenX | number    | 触摸点相对于设备屏幕左边沿的X坐标。  |
@@ -47,7 +47,7 @@
 
 - TouchType枚举说明
   | 名称     | 描述              |
-  | -------- | -------- |
+  | ------ | --------------- |
   | Down   | 手指按下时触发。        |
   | Up     | 手指抬起时触发。        |
   | Move   | 手指按压态在屏幕上移动时触发。 |
@@ -56,7 +56,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TouchExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md

@@ -22,7 +22,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FocusEventExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md

@@ -49,7 +49,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MouseEventExample {