feat: markdown 样式调整

uni_modules/zero-markdown-view/components/zero-markdown-view/zero-markdown-view.vue

@@ -1,174 +1,179 @@
 <template>
-	<view class="zero-markdown-view">
-		<mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle"
-			:markdown="true" :content="contentAi">
-		</mp-html>
-	</view>
+  <view class="zero-markdown-view">
+    <mp-html
+      :key="mpkey"
+      :selectable="selectable"
+      :scroll-table="scrollTable"
+      :tag-style="tagStyle"
+      :markdown="true"
+      :content="contentAi"
+    >
+    </mp-html>
+  </view>
 </template>
 
 <script>
-import mpHtml from '../mp-html/mp-html';
-
+import mpHtml from "../mp-html/mp-html";
 
 export default {
-	name: 'zero-markdown-view',
-	components: {
-		mpHtml
-	},
-	props: {
-		markdown: {
-			type: String,
-			default: ''
-		},
-		selectable: {
-			type: [Boolean, String],
-			default: true
-		},
-		scrollTable: {
-			type: Boolean,
-			default: true
-		},
-		themeColor: {
-			type: String,
-			default: '#00A6FF'
-		},
-		codeBgColor: {
-			type: String,
-			default: '#2d2d2d'
-		},
-		fontFamily: {
-				type: String,
-				default: 'PingFang SC, PingFang SC'
-		},
-		aiMode: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			content: '',
-			tagStyle: '',
-			mpkey: 'zero'
-		};
-	},
-	computed: {
-		contentAi() {
-			if (!this.content) {
-				return //处理特殊情况，比如网络异常导致的响应的 content 的值为空
-			}
-			let htmlString = ''
-			// 检查是否有未闭合的代码块
-			const codeBlocks = this.content.match(/```[\s\S]*?```|```[\s\S]*?$/g) || []
-			const lastBlock = codeBlocks[codeBlocks.length - 1]
-			if (lastBlock && !lastBlock.endsWith('```')) {
-				// 最后一个代码块未闭合,需要补上结束标识符
-				htmlString = this.content + '\n'
-			} else {
-				htmlString = this.content
-			}
-			return htmlString
-		},
-	},
-	watch: {
-		markdown: function (val) {
-			this.content = this.markdown
-		}
-	},
-	created() {
-		if (this.aiMode) {
-			this.initTagStyleForAi();
-		} else {
-			this.initTagStyle();
-		}
-	},
-	mounted() {
-		this.content = this.markdown
-	},
+  name: "zero-markdown-view",
+  components: {
+    mpHtml,
+  },
+  props: {
+    markdown: {
+      type: String,
+      default: "",
+    },
+    selectable: {
+      type: [Boolean, String],
+      default: true,
+    },
+    scrollTable: {
+      type: Boolean,
+      default: true,
+    },
+    themeColor: {
+      type: String,
+      default: "#00A6FF",
+    },
+    codeBgColor: {
+      type: String,
+      default: "#2d2d2d",
+    },
+    fontFamily: {
+      type: String,
+      default: "PingFang SC, PingFang SC",
+    },
+    aiMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      content: "",
+      tagStyle: "",
+      mpkey: "zero",
+    };
+  },
+  computed: {
+    contentAi() {
+      if (!this.content) {
+        return; //处理特殊情况，比如网络异常导致的响应的 content 的值为空
+      }
+      let htmlString = "";
+      // 检查是否有未闭合的代码块
+      const codeBlocks =
+        this.content.match(/```[\s\S]*?```|```[\s\S]*?$/g) || [];
+      const lastBlock = codeBlocks[codeBlocks.length - 1];
+      if (lastBlock && !lastBlock.endsWith("```")) {
+        // 最后一个代码块未闭合,需要补上结束标识符
+        htmlString = this.content + "\n";
+      } else {
+        htmlString = this.content;
+      }
+      return htmlString;
+    },
+  },
+  watch: {
+    markdown: function (val) {
+      this.content = this.markdown;
+    },
+  },
+  created() {
+    if (this.aiMode) {
+      this.initTagStyleForAi();
+    } else {
+      this.initTagStyle();
+    }
+  },
+  mounted() {
+    this.content = this.markdown;
+  },
 
-	methods: {
-
-		initTagStyle() {
-			const themeColor = this.themeColor
-			const codeBgColor = this.codeBgColor
-            const fontFamily = this.fontFamily
-			let zeroStyle = {
-				p: `
+  methods: {
+    initTagStyle() {
+      const themeColor = this.themeColor;
+      const codeBgColor = this.codeBgColor;
+      const fontFamily = this.fontFamily;
+      let zeroStyle = {
+        p: `
 				margin:4px 0;
 				font-size: 15px;
 				line-height:1.65;
-                font-family: ${fontFamily};
+        font-family: ${fontFamily};
 				`,
-				// 一级标题
-				h1: `
+        // 一级标题
+        h1: `
 				margin:4px 0;
 				font-size: 20px;
 				text-align: center;
 				font-weight: bold;
 				color: ${themeColor};
-                font-family: ${fontFamily};
+        font-family: ${fontFamily};
 				padding:3px 10px 1px;
 				border-bottom: 2px solid ${themeColor};
 				border-top-right-radius:3px;
 				border-top-left-radius:3px;
 
 				`,
-				// 二级标题
-				h2: `
+        // 二级标题
+        h2: `
 				margin:4px 0;
 				font-size: 18px;
 				text-align:center;
 				color:${themeColor};
-                font-family: ${fontFamily};
+        font-family: ${fontFamily};
 				font-weight:bolder;
 				padding-left:10px;
 				// border:1px solid ${themeColor};
 				`,
-				// 三级标题
-				h3: `
+        // 三级标题
+        h3: `
 				margin:4px 0;
 				font-size: 16px;
 				color: ${themeColor};
-                font-family: ${fontFamily};
+        font-family: ${fontFamily};
 				padding-left:10px;
 				border-left:3px solid ${themeColor};
 				`,
-				// 引用
-				blockquote: `
+        // 引用
+        blockquote: `
 				margin:4px 0;
 				font-size:15px;
-                font-family: ${fontFamily};
+        font-family: ${fontFamily};
 				color: #777777;
 				border-left: 4px solid #dddddd;
 				padding: 0 10px;
 				 `,
-				// 列表
-				ul: `
+        // 列表
+        ul: `
 				margin: 4px 0;
 				color: #555;
 				`,
-				li: `
+        li: `
 				margin: 4px 0;
 				color: #555;
 				`,
-				// 链接
-				a: `
+        // 链接
+        a: `
 				// color: ${themeColor};
 				`,
-				// 加粗
-				strong: `
+        // 加粗
+        strong: `
 				font-weight: border;
 				color: ${themeColor};
-                font-family: ${fontFamily};
+        font-family: ${fontFamily};
 				`,
-				// 斜体
-				em: `
+        // 斜体
+        em: `
 				color: ${themeColor};
-                font-family: ${fontFamily};
+        font-family: ${fontFamily};
 				letter-spacing:0.3em;
 				`,
-				// 分割线
-				hr: `
+        // 分割线
+        hr: `
 				height:1px;
 				padding:0;
 				border:none;
@@ -176,87 +181,87 @@ export default {
 				background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
 				margin:10px 0;
 				`,
-				// 表格
-				table: `
+        // 表格
+        table: `
 				border-spacing:0;
 				overflow:auto;
 				min-width:100%;
 				margin:10px 0;
 				border-collapse: collapse;
 				`,
-				th: `
+        th: `
 				border: 1px solid #202121;
 				color: #555;
 				`,
-				td: `
+        td: `
 				color:#555;
 				border: 1px solid #555555;
 				`,
-				pre: `
+        pre: `
 				border-radius: 5px;
 				white-space: pre;
 				background: ${codeBgColor};
 				font-size:12px;
 				position: relative;
 				`,
-			}
-			this.tagStyle = zeroStyle
-		},
-		initTagStyleForAi() {
-			const themeColor = this.themeColor
-			const codeBgColor = this.codeBgColor
-			const fontFamily = this.fontFamily
-			let zeroStyle = {
-				p: `
-                margin:4px 0;
+      };
+      this.tagStyle = zeroStyle;
+    },
+    initTagStyleForAi() {
+      const themeColor = this.themeColor;
+      const codeBgColor = this.codeBgColor;
+      const fontFamily = this.fontFamily;
+      let zeroStyle = {
+        p: `
+        margin:4px 0;
 				font-size: 15px;
-                line-height:1.55;
-                font-family: ${fontFamily};
+        line-height:1.55;
+        font-family: ${fontFamily};
 				`,
-				// 一级标题
-				h1: `
+        // 一级标题
+        h1: `
 				margin:4px 0;
 				font-size: 20px;
 				color: ${themeColor};
 				font-family: ${fontFamily};
 				`,
-				// 二级标题
-				h2: `
+        // 二级标题
+        h2: `
 				margin:4px 0;
 				font-size: 18px;
 				color: ${themeColor};
 				font-family: ${fontFamily};
 				`,
-				// 三级标题
-				h3: `
+        // 三级标题
+        h3: `
 				margin:4x 0;
 				font-size: 16px;
 				color: ${themeColor};
 				font-family: ${fontFamily};
 				`,
-				// 四级标题
-				h4: `
+        // 四级标题
+        h4: `
 				margin:4px 0;
 				font-size: 15px;
 				color: ${themeColor};
 				font-family: ${fontFamily};
 				`,
-				// 五级标题
-				h5: `
+        // 五级标题
+        h5: `
 				margin:4px 0;
 				font-size: 14px;
 				color: ${themeColor};
 				font-family: ${fontFamily};
 				`,
-				// 六级标题
-				h6: `
+        // 六级标题
+        h6: `
 				margin:4px 0;
 				font-size: 12px;
 				color: ${themeColor};
 				font-family: ${fontFamily};
 				`,
-				// 引用
-				blockquote: `
+        // 引用
+        blockquote: `
 				margin:4px 0;
 				font-size:14px;
 				color: #777777;
@@ -264,32 +269,32 @@ export default {
 				padding: 0 10px;
 				font-family: ${fontFamily};
 				 `,
-				// 列表
-				ul: `
+        // 列表
+        ul: `
 				margin: 4px 0;
 				color: #555;
 				`,
-				li: `
+        li: `
 				margin: 4px 0;
 				color: #555;
 				`,
-				// 链接
-				a: `
+        // 链接
+        a: `
 				// color: ${themeColor};
 				`,
-				// 加粗
-				strong: `
+        // 加粗
+        strong: `
 				font-weight: border;
 				color: ${themeColor};
 				font-family: ${fontFamily};
 				`,
-				// 斜体
-				em: `
+        // 斜体
+        em: `
 				color: ${themeColor};
 				letter-spacing:0.3em;
 				`,
-				// 分割线
-				hr: `
+        // 分割线
+        hr: `
 				height:1px;
 				padding:0;
 				border:none;
@@ -297,23 +302,23 @@ export default {
 				background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
 				margin:4px 0;
 				`,
-				// 表格
-				table: `
+        // 表格
+        table: `
 				border-spacing:0;
 				overflow:auto;
 				min-width:100%;
 				margin:4px 0;
 				border-collapse: collapse;
 				`,
-				th: `
+        th: `
 				border: 1px solid #202121;
 				color: #555;
 				`,
-				td: `
+        td: `
 				color:#555;
 				border: 1px solid #555555;
 				`,
-				pre: `
+        pre: `
 				border-radius: 5px;
 				white-space: pre;
 				background: ${codeBgColor};
@@ -321,16 +326,16 @@ export default {
 				position: relative;
 				font-family: ${fontFamily};
 				`,
-			}
-			this.tagStyle = zeroStyle
-		},
-	}
+      };
+      this.tagStyle = zeroStyle;
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 .zero-markdown-view {
-	padding: 0;
-	position: relative;
+  padding: 0;
+  position: relative;
 }
 </style>