使用CodeMirror高亮各处的配置信息

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,

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>`
+})