diff --git a/docs/en-US/component/checkbox.md b/docs/en-US/component/checkbox.md
index 44c6cd6cec..3cc34c2abd 100644
--- a/docs/en-US/component/checkbox.md
+++ b/docs/en-US/component/checkbox.md
@@ -20,13 +20,15 @@ If you are using a version **less than** ^(2.6.0) and using `checkbox-group`, pl
 
 :::
 
-``` vue
-<el-checkbox-group v-model="checkList">
-  <!-- works when >=2.6.0, recommended ✔️ value not work when <2.6.0 ❌ -->
-  <el-checkbox label="Option 1" value="Value 1" />
-  <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
-  <el-checkbox label="Option 2 & Value 2" />
-</el-checkbox-group>
+```vue
+<template>
+  <el-checkbox-group v-model="checkList">
+    <!-- works when >=2.6.0, recommended ✔️ value not work when <2.6.0 ❌ -->
+    <el-checkbox label="Option 1" value="Value 1" />
+    <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
+    <el-checkbox label="Option 2 & Value 2" />
+  </el-checkbox-group>
+</template>
 ```
 
 ## Basic usage
diff --git a/docs/en-US/component/radio.md b/docs/en-US/component/radio.md
index d4fbe8ed1f..130e757c40 100644
--- a/docs/en-US/component/radio.md
+++ b/docs/en-US/component/radio.md
@@ -20,13 +20,15 @@ If you are using a version **less than** ^(2.6.0), please refer to:
 
 :::
 
-``` vue
-<el-radio-group v-model="radio1">
-  <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
-  <el-radio value="Value 1">Option 1</el-radio>
-  <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
-  <el-radio label="Label 2 & Value 2">Option 2</el-radio>
-</el-radio-group>
+```vue
+<template>
+  <el-radio-group v-model="radio1">
+    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
+    <el-radio value="Value 1">Option 1</el-radio>
+    <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
+    <el-radio label="Label 2 & Value 2">Option 2</el-radio>
+  </el-radio-group>
+</template>
 ```
 
 ## Basic usage
diff --git a/docs/en-US/guide/i18n.md b/docs/en-US/guide/i18n.md
index 33a330859b..f1deae6d15 100644
--- a/docs/en-US/guide/i18n.md
+++ b/docs/en-US/guide/i18n.md
@@ -12,7 +12,7 @@ languages, you can get you answer by keep reading.
 
 Element Plus provides global configurations
 
-```typescript
+```ts
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
@@ -26,29 +26,16 @@ app.use(ElementPlus, {
 Element Plus also provides a Vue component [ConfigProvider](/en-US/component/config-provider)
 for globally configuring locale and other settings.
 
-```html
+```vue
 <template>
-  <el-config-provider :locale="locale">
+  <el-config-provider :locale="zhCn">
     <app />
   </el-config-provider>
 </template>
 
-<script>
-  import { defineComponent } from 'vue'
-  import { ElConfigProvider } from 'element-plus'
-
-  import zhCn from 'element-plus/es/locale/lang/zh-cn'
-
-  export default defineComponent({
-    components: {
-      ElConfigProvider,
-    },
-    setup() {
-      return {
-        locale: zhCn,
-      }
-    },
-  })
+<script setup lang="ts">
+import { ElConfigProvider } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 </script>
 ```
 
@@ -56,7 +43,7 @@ for globally configuring locale and other settings.
 
 We use [Day.js](https://day.js.org/docs/en/i18n/i18n) library to manage date and time in components like `DatePicker`. It is important to set a proper locale in Day.js to make the internationalization fully works. You have to import Day.js's locale config separately.
 
-```
+```ts
 import 'dayjs/locale/zh-cn'
 ```
 
diff --git a/docs/en-US/guide/quickstart.md b/docs/en-US/guide/quickstart.md
index 4fe46f2202..3f262af0c2 100644
--- a/docs/en-US/guide/quickstart.md
+++ b/docs/en-US/guide/quickstart.md
@@ -13,7 +13,7 @@ This section describes how to use Element Plus in your project.
 
 If you don’t care about the bundle size so much, it’s more convenient to use full import.
 
-```typescript
+```ts
 // main.ts
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'