diff --git a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
index ee4985b077a850d20f5ce1cb2ef441643afb9a94..bed0ef4e7477d279f345db2a80e0bf23cf38bca2 100644
--- a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
+++ b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
@@ -24,7 +24,7 @@
    ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png)
 
 2. 食物图片展示。
-   创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用“$rawfile('filename')”的形式，filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。
+   创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用```“$rawfile('filename')”```的形式，filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。
    ```
    @Entry
    @Component
@@ -51,7 +51,7 @@
 
    ![zh-cn_image_0000001214330169](figures/zh-cn_image_0000001214330169.png)
 
-   就可以通过“$r('app.type.name')”的形式引用应用资源，即$r('app.media.Tomato')。
+   就可以通过```“$r('app.type.name')”```的形式引用应用资源，即$r('app.media.Tomato')。
 
    ```
    @Entry
@@ -73,7 +73,7 @@
 4. 设置Image宽高，并且将image的objectFit属性设置为ImageFit.Contain，即保持图片长宽比的情况下，使得图片完整地显示在边界内。
    如果Image填满了整个屏幕，原因如下：
    1. Image没有设置宽高。
-   
+
    2. Image的objectFit默认属性是ImageFit.Cover，即在保持长宽比的情况下放大或缩小，使其填满整个显示边界。
 
    ```
@@ -183,7 +183,7 @@
        .backgroundColor('#FFedf2f5')
      }
    }
-   
+
    @Entry
    @Component
    struct FoodDetail {
@@ -218,12 +218,12 @@
        .backgroundColor('#FFedf2f5')
      }
    }
-   
+
    @Component
    struct ContentTable {
      build() {}
    }
-   
+
    @Entry
    @Component
    struct FoodDetail {
@@ -261,7 +261,7 @@
        .padding({ top: 30, right: 30, left: 30 })
      }
    }
-   
+
    @Entry
    @Component
    struct FoodDetail {
@@ -294,7 +294,7 @@
        .backgroundColor('#FFedf2f5')
      }
    }
-   
+
    @Component
    struct ContentTable {
      build() {
@@ -316,7 +316,7 @@
        .padding({ top: 30, right: 30, left: 30 })
      }
    }
-   
+
    @Entry
    @Component
    struct FoodDetail {
@@ -415,7 +415,7 @@
        .padding({ top: 30, right: 30, left: 30 })
      }
    }
-   
+
    @Entry
    @Component
    struct FoodDetail {
@@ -502,7 +502,7 @@
          .layoutWeight(2)
        }
      }
-   
+
      build() {
        Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
          this.IngredientItem('Calories', 'Calories', '17kcal')
@@ -515,7 +515,7 @@
        .padding({ top: 30, right: 30, left: 30 })
      }
    }
-   
+
    @Entry
    @Component
    struct FoodDetail {