fix(md-enhance): fix tex conflict with attrs, fix vuepress-theme-hope#2048

Mister-Hope · Mister-Hope · commit 40bef975b20f · 2022-07-08T23:38:54.000+08:00
diff --git a/packages/md-enhance/__tests__/unit/attrs.spec.ts b/packages/md-enhance/__tests__/unit/attrs.spec.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import { createMarkdown } from "@vuepress/markdown";
 import MarkdownIt from "markdown-it";
 import { attrs, getAttrs } from "../../src/node/markdown-it/attrs";
+import { katex } from "../../src/node/markdown-it/katex";
 
 import type { AttrsOptions } from "../../src/shared";
 
@@ -756,3 +757,11 @@ it("should not break code blocks line highlight", () => {
 
   expect(markdownIt.render(src)).not.toContain("1-3");
 });
+
+it("should work with katex plugin", () => {
+  const markdownIt = createMarkdown().use(attrs).use(katex);
+
+  expect(markdownIt.render("$a^{3}$")).toBe(
+    '<p><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>a</mi><mn>3</mn></msup></mrow><annotation encoding="application/x-tex">a^{3}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8141em;"></span><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">3</span></span></span></span></span></span></span></span></span></span></span></span></p>\n'
+  );
+});
diff --git a/packages/md-enhance/src/node/markdown-it/katex.ts b/packages/md-enhance/src/node/markdown-it/katex.ts
@@ -129,7 +129,7 @@ const inlineTex: RuleInline = (state, silent) => {
   }
 
   if (!silent) {
-    token = state.push("inlineTex", "math", 0);
+    token = state.push("math_inline", "math", 0);
     token.markup = "$";
     token.content = state.src.slice(start, match);
   }
@@ -184,7 +184,7 @@ const blockTex: RuleBlock = (state, start, end, silent) => {
 
   state.line = next + 1;
 
-  const token = state.push("blockTex", "math", 0);
+  const token = state.push("math_block", "math", 0);
 
   token.block = true;
   token.content =
@@ -231,14 +231,13 @@ export const katex: PluginWithOptions<KatexOptions> = (
   md,
   options = { throwOnError: false }
 ) => {
-  md.inline.ruler.after("escape", "inlineTex", inlineTex);
-  // It’s a workaround here because types issue
-  md.block.ruler.after("blockquote", "blockTex", blockTex, {
+  md.inline.ruler.after("escape", "math_inline", inlineTex);
+  md.block.ruler.after("blockquote", "math_block", blockTex, {
     alt: ["paragraph", "reference", "blockquote", "list"],
   });
 
-  md.renderer.rules["inlineTex"] = (tokens, index): string =>
+  md.renderer.rules["math_inline"] = (tokens, index): string =>
     katexInline(tokens[index].content, options);
-  md.renderer.rules["blockTex"] = (tokens, index): string =>
+  md.renderer.rules["math_block"] = (tokens, index): string =>
     `${katexBlock(tokens[index].content, options)}\n`;
 };
