diff --git a/frontend/package.json b/frontend/package.json
index 922b31edc..0d71f68b8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     },
     "dependencies": {
         "@codemirror/lang-html": "^6.4.9",
+        "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/lang-php": "^6.0.1",
         "@codemirror/language": "^6.10.2",
diff --git a/frontend/src/views/app-store/detail/install/index.vue b/frontend/src/views/app-store/detail/install/index.vue
index e3f7d3f7c..62ae3a4f0 100644
--- a/frontend/src/views/app-store/detail/install/index.vue
+++ b/frontend/src/views/app-store/detail/install/index.vue
@@ -153,14 +153,14 @@ import { useRouter } from 'vue-router';
 import Params from '../params/index.vue';
 import Header from '@/components/drawer-header/index.vue';
 import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
 import i18n from '@/lang';
 import { MsgError } from '@/utils/message';
 import { Container } from '@/api/interface/container';
 import { loadResourceLimit } from '@/api/modules/container';
 
-const extensions = [javascript(), oneDark];
+const extensions = [yaml(), oneDark];
 const router = useRouter();
 
 interface InstallRrops {
diff --git a/frontend/src/views/app-store/installed/detail/index.vue b/frontend/src/views/app-store/installed/detail/index.vue
index 31622e51e..279e8a557 100644
--- a/frontend/src/views/app-store/installed/detail/index.vue
+++ b/frontend/src/views/app-store/installed/detail/index.vue
@@ -151,13 +151,13 @@ import { Rules, checkNumberRange } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { getLanguage } from '@/utils/util';
 import { Container } from '@/api/interface/container';
 import { loadResourceLimit } from '@/api/modules/container';
 
-const extensions = [javascript(), oneDark];
+const extensions = [yaml(), oneDark];
 
 interface ParamProps {
     id: Number;
diff --git a/frontend/src/views/container/compose/create/index.vue b/frontend/src/views/container/compose/create/index.vue
index 4265bf7a3..2dac450ad 100644
--- a/frontend/src/views/container/compose/create/index.vue
+++ b/frontend/src/views/container/compose/create/index.vue
@@ -135,10 +135,10 @@ import DrawerHeader from '@/components/drawer-header/index.vue';
 import { listComposeTemplate, testCompose, upCompose } from '@/api/modules/container';
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgError } from '@/utils/message';
-import { javascript } from '@codemirror/lang-javascript';
+import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
 
-const extensions = [javascript(), oneDark];
+const extensions = [yaml(), oneDark];
 
 const showLog = ref(false);
 const loading = ref();
diff --git a/frontend/src/views/container/compose/edit/index.vue b/frontend/src/views/container/compose/edit/index.vue
index 650b1556a..9473c047e 100644
--- a/frontend/src/views/container/compose/edit/index.vue
+++ b/frontend/src/views/container/compose/edit/index.vue
@@ -75,7 +75,7 @@
 </template>
 <script lang="ts" setup>
 import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { ref } from 'vue';
 import { composeUpdate } from '@/api/modules/container';
@@ -87,7 +87,7 @@ import { ElForm } from 'element-plus';
 const emit = defineEmits<{ (e: 'search'): void }>();
 const loading = ref(false);
 const composeVisible = ref(false);
-const extensions = [javascript(), oneDark];
+const extensions = [yaml(), oneDark];
 const path = ref();
 const content = ref();
 const name = ref();