diff --git a/web/public/js/components/common/download-link.js b/web/public/js/components/common/download-link.js
index b7be5eb8..346165e0 100644
--- a/web/public/js/components/common/download-link.js
+++ b/web/public/js/components/common/download-link.js
@@ -1,5 +1,5 @@
 Vue.component("download-link", {
-	props: ["v-element", "v-file"],
+	props: ["v-element", "v-file", "v-value"],
 	created: function () {
 		let that = this
 		setTimeout(function () {
@@ -18,14 +18,19 @@ Vue.component("download-link", {
 	},
 	methods: {
 		composeURL: function () {
-			let e = document.getElementById(this.vElement)
-			if (e == null) {
-				teaweb.warn("找不到要下载的内容")
-				return
-			}
-			let text = e.innerText
-			if (text == null) {
-				text = e.textContent
+			let text = ""
+			if (this.vValue != null) {
+				text = this.vValue
+			} else {
+				let e = document.getElementById(this.vElement)
+				if (e == null) {
+					teaweb.warn("找不到要下载的内容")
+					return
+				}
+				text = e.innerText
+				if (text == null) {
+					text = e.textContent
+				}
 			}
 			return Tea.url("/ui/download", {
 				file: this.file,
diff --git a/web/public/js/components/common/source-code-box.js b/web/public/js/components/common/source-code-box.js
new file mode 100644
index 00000000..4253a464
--- /dev/null
+++ b/web/public/js/components/common/source-code-box.js
@@ -0,0 +1,54 @@
+let sourceCodeBoxIndex = 0
+
+Vue.component("source-code-box", {
+	props: ["type", "id"],
+	mounted: function () {
+		let box = document.getElementById("source-code-box-" + this.index)
+		let valueBox = document.getElementById(this.valueBoxId)
+		let value = ""
+		if (valueBox.textContent != null) {
+			value = valueBox.textContent
+		} else if (valueBox.innerText != null) {
+			value = valueBox.innerText
+		}
+		let boxEditor = CodeMirror.fromTextArea(box, {
+			theme: "idea",
+			lineNumbers: true,
+			value: "",
+			readOnly: true,
+			showCursorWhenSelecting: true,
+			height: "auto",
+			//scrollbarStyle: null,
+			viewportMargin: Infinity,
+			lineWrapping: true,
+			highlightFormatting: false,
+			indentUnit: 4,
+			indentWithTabs: true
+		})
+		boxEditor.setValue(value)
+
+		let info = CodeMirror.findModeByMIME(this.type)
+		if (info != null) {
+			boxEditor.setOption("mode", info.mode)
+			CodeMirror.modeURL = "/codemirror/mode/%N/%N.js"
+			CodeMirror.autoLoadMode(boxEditor, info.mode)
+		}
+	},
+	data: function () {
+		let index = sourceCodeBoxIndex++
+
+		let valueBoxId = 'source-code-box-value-' + sourceCodeBoxIndex
+		if (this.id != null) {
+			valueBoxId = this.id
+		}
+
+		return {
+			index: index,
+			valueBoxId: valueBoxId
+		}
+	},
+	template: `<div class="source-code-box">
+	<div style="display: none" :id="valueBoxId"><slot></slot></div>
+	<textarea :id="'source-code-box-' + index"></textarea>
+</div>`
+})
\ No newline at end of file
diff --git a/web/views/@default/@layout.css b/web/views/@default/@layout.css
index 407f6540..818feaf3 100644
--- a/web/views/@default/@layout.css
+++ b/web/views/@default/@layout.css
@@ -643,4 +643,15 @@ td .label.small {
 td {
   word-break: break-all;
 }
+.source-code-box .CodeMirror {
+  border: 1px solid #eee;
+  height: auto !important;
+}
+.source-code-box .CodeMirror-vscrollbar {
+  width: 6px;
+  border-radius: 3px !important;
+}
+.source-code-box .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+}
 /*# sourceMappingURL=@layout.css.map */
\ No newline at end of file
diff --git a/web/views/@default/@layout.css.map b/web/views/@default/@layout.css.map
index 601b8a0a..988e96f9 100644
--- a/web/views/@default/@layout.css.map
+++ b/web/views/@default/@layout.css.map
@@ -1 +1 @@
-{"version":3,"sources":["@left_menu.less","@layout.less"],"names":[],"mappings":"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","file":"@layout.css"}
\ No newline at end of file
+{"version":3,"sources":["@left_menu.less","@layout.less"],"names":[],"mappings":"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","file":"@layout.css"}
\ No newline at end of file
diff --git a/web/views/@default/@layout.less b/web/views/@default/@layout.less
index 72d152eb..22d4ed90 100644
--- a/web/views/@default/@layout.less
+++ b/web/views/@default/@layout.less
@@ -705,4 +705,21 @@ td .label.small {
 // td
 td {
 	word-break: break-all;
+}
+
+// codemirror
+.source-code-box {
+	.CodeMirror {
+		border: 1px solid #eee;
+		height: auto !important;
+	}
+
+	.CodeMirror-vscrollbar {
+		width: 6px;
+		border-radius: 3px !important;
+	}
+
+	.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+		border-radius: 2px;
+	}
 }
\ No newline at end of file
diff --git a/web/views/@default/api/node/install.html b/web/views/@default/api/node/install.html
index 06788747..8a735783 100644
--- a/web/views/@default/api/node/install.html
+++ b/web/views/@default/api/node/install.html
@@ -1,5 +1,6 @@
 {$layout}
 {$template "menu"}
+{$template "/code_editor"}
 
 <h3>安装步骤</h3>
 <ol class="ui list">
@@ -15,8 +16,8 @@
 	<tr>
 		<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
 		<td>
-			<pre id="api-code">nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+			<source-code-box id="api-code" type="text/yaml">nodeId: "{{node.uniqueId}}"
+secret: "{{node.secret}}"</source-code-box>
 		</td>
 	</tr>
 	<tr>
@@ -27,7 +28,7 @@ secret: "{{node.secret}}"</pre>
 				<span v-else class="red">无法生成配置内容，错误原因：</span>
 				{{dbConfig.error}}
 			</span>
-			<pre v-show="dbConfig.config.length > 0" id="db-code">{{dbConfig.config}}</pre>
+            <source-code-box id="db-code" type="text/yaml">{{dbConfig.config}}</source-code-box>
 		</td>
 	</tr>
-</table>
+</table>
\ No newline at end of file
diff --git a/web/views/@default/clusters/cluster/installNodes.html b/web/views/@default/clusters/cluster/installNodes.html
index da1b900b..885bb0e1 100644
--- a/web/views/@default/clusters/cluster/installNodes.html
+++ b/web/views/@default/clusters/cluster/installNodes.html
@@ -1,6 +1,7 @@
 {$layout}
 {$template "menu"}
 {$template "/left_menu"}
+{$template "/code_editor"}
 
 <div class="right-box">
 	<p>在官网下载节点安装包，然后通过修改节点安装包中的<code-label>configs/cluster.yaml</code-label>，启动后会自动注册节点。</p>
@@ -10,10 +11,10 @@
 				<em><download-link :v-element="'cluster-config-box'" :v-file="'cluster.yaml'">[下载]</download-link></em>
 			</td>
 			<td>
-				<pre id="cluster-config-box">rpc:
+				<source-code-box id="cluster-config-box" type="text/yaml">rpc:
 	endpoints: [ {{cluster.endpoints}} ]
-	clusterId: "{{cluster.uniqueId}}"
-	secret: "{{cluster.secret}}"</pre>
+clusterId: "{{cluster.uniqueId}}"
+secret: "{{cluster.secret}}"</source-code-box>
 			</td>
 		</tr>
 	</table>
diff --git a/web/views/@default/clusters/cluster/node/install.html b/web/views/@default/clusters/cluster/node/install.html
index c078a87b..bb1d24a7 100644
--- a/web/views/@default/clusters/cluster/node/install.html
+++ b/web/views/@default/clusters/cluster/node/install.html
@@ -1,54 +1,54 @@
 {$layout}
+{$template "node_menu"}
+{$template "/code_editor"}
 
-	{$template "node_menu"}
+<!-- 已安装 -->
+<div v-if="node.isInstalled">
+    <div class="ui message green">当前节点为已安装状态。</div>
+    <a href="" @click.prevent="updateNodeIsInstalled(false)">[修改为未安装状态]</a>
+</div>
 
-	<!-- 已安装 -->
-	<div v-if="node.isInstalled">
-		<div class="ui message green">当前节点为已安装状态。</div>
-		<a href="" @click.prevent="updateNodeIsInstalled(false)">[修改为未安装状态]</a>
-	</div>
+<!-- 未安装 -->
+<div v-if="!node.isInstalled">
+    <h3>方法1：通过SSH自动安装</h3>
 
-	<!-- 未安装 -->
-	<div v-if="!node.isInstalled">
-		<h3>方法1：通过SSH自动安装</h3>
+    <div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
+         class="ui segment installing-box">
+        <div v-if="installStatus.isRunning" class="blue">安装中...</div>
+        <div v-if="installStatus.isFinished">
+            <span v-if="installStatus.isOk" class="green">已安装成功</span>
+            <span v-if="!installStatus.isOk" class="red">安装过程中发生错误：{{installStatus.error}}</span>
+        </div>
+    </div>
+    <div v-if="installStatus != null && installStatus.isFinished">
+        <button class="ui button small" type="button" @click.prevent="install()">重新安装</button>
+    </div>
+    <div v-if="installStatus == null || (!installStatus.isFinished && !installStatus.isRunning)">
+        <button class="ui button small" type="button" @click.prevent="install()">开始安装</button>
+    </div>
 
-		<div v-if="installStatus != null && (installStatus.isRunning || installStatus.isFinished)"
-			 class="ui segment installing-box">
-			<div v-if="installStatus.isRunning" class="blue">安装中...</div>
-			<div v-if="installStatus.isFinished">
-				<span v-if="installStatus.isOk" class="green">已安装成功</span>
-				<span v-if="!installStatus.isOk" class="red">安装过程中发生错误：{{installStatus.error}}</span>
-			</div>
-		</div>
-		<div v-if="installStatus != null && installStatus.isFinished">
-			<button class="ui button small" type="button" @click.prevent="install()">重新安装</button>
-		</div>
-		<div v-if="installStatus == null || (!installStatus.isFinished && !installStatus.isRunning)">
-			<button class="ui button small" type="button" @click.prevent="install()">开始安装</button>
-		</div>
-
-		<h3>方法2：手动安装</h3>
-		<table class="ui table definition selectable">
-			<tr>
-				<td>配置文件<em>（configs/api.yaml）</em><br/>
-				<em><download-link :v-element="'rpc-code'" :v-file="'api.yaml'">[下载]</download-link ></em></td>
-				<td>
-					<pre id="rpc-code">rpc:
+    <h3>方法2：手动安装</h3>
+    <table class="ui table definition selectable">
+        <tr>
+            <td>配置文件<em>（configs/api.yaml）</em><br/>
+            <em><download-link :v-element="'rpc-code'" :v-file="'api.yaml'">[下载]</download-link ></em></td>
+            <td>
+					<source-code-box id="rpc-code" type="text/yaml">rpc:
   endpoints: [ {{apiEndpoints}} ]
 nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
-				</td>
-			</tr>
-			<tr>
-				<td class="title">安装目录</td>
-				<td>
-					<div v-if="node.installDir.length == 0">使用集群设置<span
-								v-if="node.cluster != null && node.cluster.installDir.length > 0">（{{node.cluster.installDir}}）</span>
-					</div>
-					<span v-else>{{node.installDir}}</span>
-				</td>
-			</tr>
-		</table>
+secret: "{{node.secret}}"</source-code-box>
+            </td>
+        </tr>
+        <tr>
+            <td class="title">安装目录</td>
+            <td>
+                <div v-if="node.installDir.length == 0">使用集群设置<span
+                            v-if="node.cluster != null && node.cluster.installDir.length > 0">（{{node.cluster.installDir}}）</span>
+                </div>
+                <span v-else>{{node.installDir}}</span>
+            </td>
+        </tr>
+    </table>
 
-		<a href="" @click.prevent="updateNodeIsInstalled(true)">[修改为已安装状态]</a>
-	</div>
\ No newline at end of file
+    <a href="" @click.prevent="updateNodeIsInstalled(true)">[修改为已安装状态]</a>
+</div>
\ No newline at end of file
diff --git a/web/views/@default/settings/authority/nodes/node/install.html b/web/views/@default/settings/authority/nodes/node/install.html
index 7846cfd7..4d2d2196 100644
--- a/web/views/@default/settings/authority/nodes/node/install.html
+++ b/web/views/@default/settings/authority/nodes/node/install.html
@@ -1,5 +1,6 @@
 {$layout}
 {$template "menu"}
+{$template "/code_editor"}
 
 <h3>安装步骤</h3>
 <ol class="ui list">
@@ -14,10 +15,10 @@
 	<tr>
 		<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
 		<td>
-			<pre id="api-code">rpc:
+			<source-code-box id="api-code" type="text/yaml">rpc:
   endpoints: [ {{apiEndpoints}} ]
 nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+secret: "{{node.secret}}"</source-code-box>
 		</td>
 	</tr>
 </table>
diff --git a/web/views/@default/settings/monitor-nodes/node/install.html b/web/views/@default/settings/monitor-nodes/node/install.html
index 2073f44d..9b793846 100644
--- a/web/views/@default/settings/monitor-nodes/node/install.html
+++ b/web/views/@default/settings/monitor-nodes/node/install.html
@@ -1,5 +1,6 @@
 {$layout}
 {$template "menu"}
+{$template "/code_editor"}
 
 <h3>安装步骤</h3>
 <ol class="ui list">
@@ -14,10 +15,10 @@
 	<tr>
 		<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
 		<td>
-			<pre id="api-code">rpc:
+			<source-code-box id="api-code" type="text/yaml">rpc:
   endpoints: [ {{apiEndpoints}} ]
 nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+secret: "{{node.secret}}"</source-code-box>
 		</td>
 	</tr>
 </table>
diff --git a/web/views/@default/settings/user-nodes/node/install.html b/web/views/@default/settings/user-nodes/node/install.html
index 01322272..e03738e7 100644
--- a/web/views/@default/settings/user-nodes/node/install.html
+++ b/web/views/@default/settings/user-nodes/node/install.html
@@ -1,5 +1,6 @@
 {$layout}
 {$template "menu"}
+{$template "/code_editor"}
 
 <h3>安装步骤</h3>
 <ol class="ui list">
@@ -14,10 +15,10 @@
 	<tr>
 		<td class="title">configs/api.yaml<em><br/><download-link :v-element="'api-code'" :v-file="'api.yaml'">[下载]</download-link></em></td>
 		<td>
-			<pre id="api-code">rpc:
+			<source-code-box id="api-code" type="text/yaml">rpc:
   endpoints: [ {{apiEndpoints}} ]
 nodeId: "{{node.uniqueId}}"
-secret: "{{node.secret}}"</pre>
+secret: "{{node.secret}}"</source-code-box>
 		</td>
 	</tr>
 </table>