vuepress-plugin-md-power 1.0.0-rc.159 → 1.0.0-rc.160

package/lib/client/components/VPTable.vue

@@ -143,4 +143,45 @@ function onCopy(type: 'html' | 'md') {
 .vp-table .table-content .max-content table {
   width: max-content;
 }
+
+/* -----  Highlight --------- */
+.vp-table table th.tip,
+.vp-table table td.tip,
+.vp-table table th.note,
+.vp-table table td.note {
+  color: var(--vp-c-tip-1);
+  background-color: var(--vp-c-tip-soft);
+}
+
+.vp-table table th.info,
+.vp-table table td.info {
+  color: var(--vp-c-default-1);
+  background-color: var(--vp-c-default-soft);
+}
+
+.vp-table table th.warning,
+.vp-table table td.warning {
+  color: var(--vp-c-warning-1);
+  background-color: var(--vp-c-warning-soft);
+}
+
+.vp-table table th.danger,
+.vp-table table td.danger,
+.vp-table table th.caution,
+.vp-table table td.caution {
+  color: var(--vp-c-danger-1);
+  background-color: var(--vp-c-danger-soft);
+}
+
+.vp-table table th.success,
+.vp-table table td.success {
+  color: var(--vp-c-success-1);
+  background-color: var(--vp-c-success-soft);
+}
+
+.vp-table table th.important,
+.vp-table table td.important {
+  color: var(--vp-c-important-1);
+  background-color: var(--vp-c-important-soft);
+}
 </style>

package/lib/node/index.js

@@ -2438,23 +2438,78 @@ function stepsPlugin(md) {
 //#region src/node/container/table.ts
 /**
 *  在不破坏表格语法的前提下，通过容器语法将表格包裹起来，为表格提供增强功能
+*
+* @example
+* ```md
+* ::: table title="表格标题" max-content copy align="center" hl-rows="warning:1,2,3;error:4,5,6" hl-cols="warning:1;error:2,3" hl-cells="warning:(1,2)(2,3);"
+*
+* | xx | xx | xx |
+* | -- | -- | -- |
+* | xx | xx | xx |
+* :::
+* ```
 */
 function tablePlugin(md, options = {}) {
-	createContainerSyntaxPlugin(md, "table", (tokens, index, _, env) => {
-		const meta = {
+	createContainerSyntaxPlugin(md, "table", (tokens, index, opt, env) => {
+		const { hlCols = "", hlRows = "", hlCells = "",...meta } = tokens[index].meta;
+		const props = {
 			copy: true,
 			maxContent: false,
 			...options,
-			...tokens[index].meta
+			...meta
 		};
 		const content = tokens[index].content;
-		if (meta.copy) {
-			meta.copy = meta.copy === true ? "all" : meta.copy;
-			if (meta.copy === "all" || meta.copy === "md") meta.markdown = encodeData(content.trim());
+		if (props.copy) {
+			props.copy = props.copy === true ? "all" : props.copy;
+			if (props.copy === "all" || props.copy === "md") props.markdown = encodeData(content.trim());
+		}
+		if (!hlCols && !hlRows && !hlCells) return `<VPTable ${stringifyAttrs(props)}>${md.render(content, env)}</VPTable>`;
+		const rows = parseHl(hlRows);
+		const cols = parseHl(hlCols);
+		const cells = parseHlCells(hlCells);
+		const tableTokens = md.parse(content, env);
+		let isTable = false;
+		let colIndex = 0;
+		let rowIndex = 0;
+		for (const token of tableTokens) {
+			if (token.type === "table_open") isTable = true;
+			if (token.type === "table_close") isTable = false;
+			if (!isTable) continue;
+			if (token.type === "tr_open") {
+				rowIndex++;
+				colIndex = 0;
+			}
+			if (token.type === "th_open" || token.type === "td_open") {
+				colIndex++;
+				const classes = cells[rowIndex]?.[colIndex] || rows[rowIndex] || cols[colIndex];
+				if (classes) token.attrJoin("class", classes);
+			}
 		}
-		return `<VPTable ${stringifyAttrs(meta)}>${md.render(content, env)}</VPTable>`;
+		return `<VPTable ${stringifyAttrs(props)}>${md.renderer.render(tableTokens, opt, env)}</VPTable>`;
 	});
 }
+function parseHl(hl) {
+	const res = {};
+	if (!hl) return res;
+	hl.split(";").forEach((item) => {
+		const [key, value = "1"] = item.split(":");
+		String(value).split(",").forEach((v) => res[v.trim()] = key.trim());
+	});
+	return res;
+}
+function parseHlCells(hl) {
+	const res = {};
+	if (!hl) return res;
+	hl.split(";").forEach((item) => {
+		const [key, value = ""] = item.split(":");
+		value.trim().replace(/\s*\((\d+)\s*,\s*(\d+)\)\s*/g, (_, row, col) => {
+			res[row] ??= {};
+			res[row][col] = key.trim();
+			return "";
+		});
+	});
+	return res;
+}
 
 //#endregion
 //#region src/node/container/tabs.ts
@@ -3558,10 +3613,9 @@ function checkSupportType(type) {
 				name = !installed.hlsjs ? "hls.js" : "";
 				break;
 			case "flv":
-			case "ts": {
+			case "ts":
 				name = !installed.mpegtsjs ? "mpegts.js" : "";
 				break;
-			}
 			case "mpd":
 			case "dash":
 				name = !installed.dashjs ? "dashjs" : "";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.159",
+  "version": "1.0.0-rc.160",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "lib"
   ],
   "peerDependencies": {
-    "artplayer": "^5.2.3",
+    "artplayer": "^5.2.5",
     "dashjs": "^5.0.3",
     "esbuild": "^0.25.8",
     "hls.js": "^1.6.7",
@@ -86,22 +86,22 @@
     "@mdit/plugin-tasklist": "^0.22.1",
     "@pengzhanbo/utils": "^2.1.0",
     "@vuepress/helper": "2.0.0-rc.112",
-    "@vueuse/core": "^13.5.0",
+    "@vueuse/core": "^13.6.0",
     "chokidar": "4.0.3",
     "image-size": "^2.0.2",
     "local-pkg": "^1.1.1",
     "lru-cache": "^11.1.0",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.1.5",
-    "shiki": "^3.8.1",
+    "shiki": "^3.9.1",
     "tinyglobby": "0.2.13",
-    "tm-grammars": "^1.24.0",
+    "tm-grammars": "^1.24.1",
     "tm-themes": "^1.10.7",
     "vue": "^3.5.18"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
-    "artplayer": "^5.2.3",
+    "artplayer": "^5.2.5",
     "dashjs": "^5.0.3",
     "hls.js": "^1.6.7",
     "mpegts.js": "1.7.3"