!5156 3.1Release分支：hml/ets文件示例代码标记语言：无需翻译

Merge pull request !5156 from 葛亚芳/cherry-pick-1654688988

en/application-dev/quick-start/start-with-ets-low-code.md

@@ -94,7 +94,8 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
 4. Add a **Text** component.
    - In the **second.ets** file, set the message text content to **Hi there**. The sample code is as follows:
      
-      ```
+      ```ts
+      // second.ets
       @Entry
       @Component
       struct Second {
@@ -130,7 +131,8 @@ You can implement page redirection through the page router, which finds the targ
    
    - In the **index.ets** file:
      
-     ```
+     ```ts
+     // index.ets
      import router from '@ohos.router';
      
      @Entry
@@ -163,7 +165,8 @@ You can implement page redirection through the page router, which finds the targ
 
    - In the **second.ets** file:
      
-      ```
+      ```ts
+      // second.ets
       import router from '@ohos.router';
       
       @Entry

en/application-dev/quick-start/start-with-ets.md

@@ -40,7 +40,8 @@
    After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **<Text>** component. The sample code in the **index.ets** file is shown below:
 
 
-   ```
+   ```ts
+   // index.ets
    @Entry
    @Component
    struct Index {
@@ -65,7 +66,8 @@
    On the default page, add a **<Button>** component to accept user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
 
 
-   ```
+   ```ts
+   // index.ets
    @Entry
    @Component
    struct Index {
@@ -118,7 +120,8 @@
    Add **<Text>** and **<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
 
 
-   ```
+   ```ts
+   // second.ets
    @Entry
    @Component
    struct Second {
@@ -160,7 +163,8 @@ You can implement page redirection through the page router, which finds the targ
    In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
 
 
-   ```
+   ```ts
+   // index.ets
    import router from '@ohos.router';
    
    @Entry
@@ -204,7 +208,8 @@ You can implement page redirection through the page router, which finds the targ
    In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below:
 
 
-   ```
+   ```ts
+   // second.ets
    import router from '@ohos.router';
    
    @Entry

en/application-dev/quick-start/start-with-js.md

@@ -40,7 +40,8 @@
    After the project synchronization is complete, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **<Text>** component. The sample code in the **index.hml** file is shown below:
 
 
-   ```
+   ```html
+   <!--index.hml-->
    <div class="container">
        <text class="title">
            Hello World
@@ -53,7 +54,8 @@
    On the default page, add an **&lt;input&gt;** component of the button type to accept user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
 
 
-   ```
+   ```html
+   <!--index.hml-->
    <div class="container">
        <text class="title">
            Hello World
@@ -69,7 +71,7 @@
    From the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility** &gt; **pages** &gt; **index**, open the **index.css** file, and set the page styles, such as the width, height, font size, and spacing. The sample code in the **index.css** file is shown below:
 
 
-   ```
+   ```css
    .container {
        display: flex;
        flex-direction: column;
@@ -119,7 +121,8 @@
    Add **&lt;Text&gt;** and **&lt;Button&gt;** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below:
 
 
-   ```
+   ```html
+   <!--second.hml-->
    <div class="container">
        <text class="title">
            Hi there
@@ -132,7 +135,7 @@
 
 3. Set the page style in the **second.css** file. The sample code in the **second.css** file is shown below:
 
-   ```
+   ```css
    .container {
        display: flex;
        flex-direction: column;
@@ -172,7 +175,8 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
    In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
 
 
-   ```
+   ```js
+   // index.js
    import router from '@ohos.router';
    
    export default {
@@ -189,7 +193,8 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
    In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below:
 
 
-   ```
+   ```js
+   // second.js
    import router from '@ohos.router';
    
    export default {

en/application-dev/reference/apis/js-apis-webgl.md

@@ -13,7 +13,8 @@ This module provides WebGL APIs that correspond to the OpenGL ES 2.0 feature set
 Create a **<canvas\>** component in the HML file. The following is an example:
 
 
-```
+```html
+<!--xxx.hml-->
 <div class="container">
     <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
     <button class="btn-button" onclick="BtnDraw2D">BtnDraw2D</button>

en/application-dev/reference/apis/js-apis-webgl2.md

@@ -13,7 +13,8 @@ This module provides WebGL APIs that correspond to the OpenGL ES 3.0 feature set
 Create a **<canvas\>** component in the HML file. The following is an example:
 
 
-```
+```html
+<!--xxx.hml-->
 <div class="container">
     <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
     <button class="btn-button" onclick="BtnDraw2D">BtnDraw2D</button>

zh-cn/application-dev/quick-start/start-with-ets-low-code.md

@@ -90,7 +90,8 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
    
    - 在second.ets文件中，将本页面的message文本内容设置为“Hi there”，示例如下：
      
-      ```
+      ```ts
+      // second.ets
       @Entry
       @Component
       struct Second {
@@ -123,7 +124,8 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
      在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。需同时处理ets文件及visual文件。
    - “**index.ets**”示例如下：
      
-     ```
+     ```ts
+     // index.ets
      import router from '@ohos.router';
      
      @Entry
@@ -155,7 +157,8 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可
 
    - “**second.ets**”示例如下：
      
-      ```
+      ```ts
+      // second.ets
       import router from '@ohos.router';
       
       @Entry

zh-cn/application-dev/quick-start/start-with-ets.md

@@ -43,7 +43,8 @@
 工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > ets > MainAbility > pages**”，打开“**index.ets**”文件，可以看到页面由Text组件组成。“**index.ets**”文件的示例如下：
 
    
-   ```
+   ```ts
+   // index.ets
    @Entry
    @Component
    struct Index {
@@ -67,7 +68,8 @@
    在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“**index.ets**”文件的示例如下：
 
    
-   ```
+   ```ts
+   // index.ets
    @Entry
    @Component
    struct Index {
@@ -116,7 +118,8 @@
    参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“**second.ets**”文件的示例如下：
 
 
-   ```
+   ```ts
+   // second.ets
    @Entry
    @Component
    struct Second {
@@ -157,7 +160,8 @@
    在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“**index.ets**”文件的示例如下：
 
    
-   ```
+   ```ts
+   // index.ets
    import router from '@ohos.router';
    
    @Entry
@@ -200,7 +204,8 @@
    在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“**second.ets**”文件的示例如下：
 
    
-   ```
+   ```ts
+   // second.ets
    import router from '@ohos.router';
    
    @Entry

zh-cn/application-dev/quick-start/start-with-js.md

@@ -43,7 +43,8 @@
    工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > js > MainAbility > pages> index**”，打开“**index.hml**”文件，设置Text组件内容。“**index.hml**”文件的示例如下：
 
    
-   ```
+   ```html
+   <!--index.hml-->
    <div class="container">
        <text class="title">
            Hello World
@@ -55,7 +56,8 @@
    在默认页面基础上，我们添加一个button类型的input组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“**index.hml**”文件的示例代码如下：
 
    
-   ```
+   ```html
+   <!--index.hml-->
    <div class="container">
        <text class="title">
            Hello World
@@ -70,7 +72,7 @@
    在“**Project**”窗口，点击“**entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages&gt; index**”，打开“**index.css**”文件，可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“**index.css**”文件的示例如下：
 
    
-   ```
+   ```css
    .container {
        display: flex;
        flex-direction: column;
@@ -117,7 +119,8 @@
    参照第一个页面，在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“**second.hml**”文件的示例如下：
 
    
-   ```
+   ```html
+   <!--second.hml-->
    <div class="container">
        <text class="title">
            Hi there
@@ -130,7 +133,7 @@
 
 3. 设置页面样式。“**second.css**”文件的示例如下：
    
-   ```
+   ```css
    .container {
        display: flex;
        flex-direction: column;
@@ -169,7 +172,8 @@
    在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。“**index.js**”示例如下：
 
    
-   ```
+   ```js
+   // index.js
    import router from '@ohos.router';
    
    export default {
@@ -185,7 +189,8 @@
    在第二个页面中，返回按钮绑定back方法，点击按钮时返回到第一页。“**second.js**”示例如下：
 
    
-   ```
+   ```js
+   // second.js
    import router from '@ohos.router';
    
    export default {

zh-cn/application-dev/reference/apis/js-apis-webgl.md

@@ -12,7 +12,8 @@ WebGL标准图形API，对应OpenGL ES 2.0特性集。更多信息请参考[WebG
 hml内创建canvas，示例如下：
 
 
-```
+```html
+<!--xxx.hml-->
 <div class="container">
     <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
     <button class="btn-button" onclick="BtnDraw2D">BtnDraw2D</button>

zh-cn/application-dev/reference/apis/js-apis-webgl2.md

@@ -12,7 +12,8 @@ WebGL标准图形API，对应OpenGL ES 3.0特性集。更多信息请参考[WebG
 hml内创建canvas，示例如下：
 
 
-```
+```html
+<!--xxx.hml-->
 <div class="container">
     <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
     <button class="btn-button" onclick="BtnDraw2D">BtnDraw2D</button>