diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 706b541..32aff46 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,8 +9,10 @@
       "version": "0.9.0",
       "dependencies": {
         "highlight.js": "^11.7.0",
+        "prismjs": "^1.29.0",
         "uuid": "^9.0.0",
-        "vue": "^3.2.37"
+        "vue": "^3.2.37",
+        "vue-prism-editor": "^2.0.0-alpha.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.0.3",
@@ -773,6 +775,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmmirror.com/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -938,6 +948,17 @@
         "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/vue-prism-editor": {
+      "version": "2.0.0-alpha.2",
+      "resolved": "https://registry.npmmirror.com/vue-prism-editor/-/vue-prism-editor-2.0.0-alpha.2.tgz",
+      "integrity": "sha512-Gu42ba9nosrE+gJpnAEuEkDMqG9zSUysIR8SdXUw8MQKDjBnnNR9lHC18uOr/ICz7yrA/5c7jHJr9lpElODC7w==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vueuc": {
       "version": "0.4.51",
       "resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.51.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1dfce8e..eaecd4c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "highlight.js": "^11.7.0",
+    "prismjs": "^1.29.0",
     "uuid": "^9.0.0",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-prism-editor": "^2.0.0-alpha.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.3",
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index f292581..b9e1afe 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-bfe8b93da5c003bedd08ff0a7b4755c0
\ No newline at end of file
+3cc55d7b2b686675736348594fe285eb
\ No newline at end of file
diff --git a/frontend/src/components/burpsuite/repeater/Repeater.vue b/frontend/src/components/burpsuite/repeater/Repeater.vue
index bb442e6..c284000 100644
--- a/frontend/src/components/burpsuite/repeater/Repeater.vue
+++ b/frontend/src/components/burpsuite/repeater/Repeater.vue
@@ -58,7 +58,9 @@ EventsOn("RepeaterBody", result => {
 const request = ref('');
 
 function send(panel) {
-    request.value = document.getElementById("myCodeR").textContent;
+    // console.log(document.getElementById("myCodeR"))
+    // request.value = document.getElementById("myCodeR").textContent;
+    console.log(request.value)
     if (request.value === "") {
         request.value = panel.req;
     }
@@ -70,6 +72,22 @@ function send(panel) {
     })
 }
 
+// import Prism Editor
+import { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere
+
+// import highlighting library (you can use any library you want just return html string)
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/themes/prism.css'; // import syntax highlighting styles
+
+
+function highlighter(code) {
+    request.value = code.toString()
+    return highlight(code, Prism.languages.http,'http'); // languages.<insert language> to return html with markup
+}
+
 </script>
 
 <template>
@@ -93,8 +111,7 @@ function send(panel) {
                     <n-gi>
                         <n-tabs type="line" animated >
                             <n-tab-pane name="Request" style="width: 100%; overflow-x: auto;">
-                                <!-- contenteditable 设置为可修改, 这样通过 id 获取值 不能再使用 show-line-numbers 显示行号，不然会将行号带到请求中 -->
-                                <n-code id="myCodeR" contenteditable language="http" :code="panel.req" style="white-space: pre-wrap; text-align: left;" />
+                                <prism-editor class="my-editor" id="myCodeR" v-model="panel.req" :highlight="highlighter" line-numbers></prism-editor>
                             </n-tab-pane>
                         </n-tabs>
                     </n-gi>
@@ -111,3 +128,15 @@ function send(panel) {
         </n-tab-pane>
     </n-tabs>
 </template>
+
+<style scoped>
+.my-editor {
+    line-height: 1.8;
+    padding: 5px;
+    white-space: nowrap;
+}
+/* optional class for removing the outline */
+.prism-editor__textarea:focus {
+    outline: none;
+}
+</style>
\ No newline at end of file