ai问答修改

src/components/markdown-preview/markdown-preview.vue

@@ -7,42 +7,13 @@
 <script>
 	// import {Marked} from 'marked';
 	import MarkdownIt from 'markdown-it';
+	import markdownItAttrs from 'markdown-it-attrs'
+	import markdownItHighlight from 'markdown-it-highlightjs'
 	export default {
 		name:"markdown-preview",
 		props: {
 			mdString: {
-				default:`## 我是二级标题
-### 我是三级标题
-| 我是表头 | 表头 2 |
-| :----------- | :----------- |
-|1|2|
-				在客服交流中使用标准术语是提高专业形象和服务质量的重要手段。以下是一些常见的客服标准用语及其适用场景：
-
-1. **问候与介绍：**
-   - “您好，欢迎来到[公司名称]，我是您的客服代表[姓名]，很高兴为您服务。”
-   - “早上好/下午好/晚上好，[公司名称]客服中心，请问有什么可以帮到您的吗？”
-
-2. **确认信息：**
-   - “为了更好地为您提供服务，能否麻烦您提供一下[具体需要的信息，如订单号、会员账号等]？”
-   - “我来确认一下，您的问题是关于[问题的具体描述]，对吗？”
-
-3. **表达理解与同情：**
-   - “非常理解您的感受，遇到这种情况确实会让人感到不便/烦恼。”
-   - “感谢您的耐心等待，我们正在积极处理您的问题。”
-
-4. **解决问题：**
-   - “针对您提到的问题，我们可以采取[解决方案]的方式解决，您看这样可以吗？”
-   - “我已经记录了您的反馈，并将尽快转交给相关部门处理，预计[解决时间]内会有结果。”
-
-5. **结束对话：**
-   - “如果您没有其他问题的话，那我们就先这样吧，祝您生活愉快！”
-   - “再次感谢您的来电，期待下次为您服务。再见！”
-
-6. **特殊情况处理：**
-   - “很抱歉给您带来了不愉快的体验，这并不是我们希望发生的事情。我们会立即调查此事，并确保类似情况不再发生。”
-   - “对于您所反映的情况，我们深感歉意，但根据我们的规定，[解释原因]。不过，我可以尝试帮您寻找其他的解决方案。”
-
-以上是客服交流中常用的标准化语言，实际应用时可根据具体情况适当调整，以保持沟通的真实性和亲和力。`,
+				default: '',
 				type: String
 			}
 		},
@@ -73,13 +44,31 @@
 			}
 		},
 		mounted(){
-			this.mdObj = new MarkdownIt()
+			this.mdObj = new MarkdownIt({
+				html: true,
+				linkify: true,
+				typographer: true
+			})
+			this.mdObj.use(markdownItAttrs)
+			this.mdObj.use(markdownItHighlight)
 			this.contentHtml = this.parseContent(this.mdString)
 				console.log(this.contentHtml)
 		}
 	}
 </script>
 
-<style>
+<style scoped lang="scss">
+	pre{
+		background-color: #f4f4f4;
+		padding: 10px;
+		border-radius: 5px;
+		overflow: auto;
+	}
+	code{
+		font-family: monospace;
+		background-color: #e8e8e8;
+		padding: 2px 4px;
+		border-radius: 3px;
+	}
 
 </style>