Change to use <code>, update @types/{hast,mdast}, etc

Importantly, this switches from generating `span` and `div` to `<code>` (and `<pre><code>`). This is due to https://github.com/syntax-tree/mdast-util-math/releases/tag/3.0.0, and solves #77. It also updates all utilities, plugins, and types. Closes GH-77.
remarkjs · Sep 18, 2023 · fc32531 · fc32531
1 parent 8e027e6
commit fc32531
Show file tree

Hide file tree

Showing 17 changed files with 306 additions and 207 deletions.
diff --git a/package.json b/package.json
@@ -26,20 +26,20 @@
     "@types/node": "^20.0.0",
     "c8": "^8.0.0",
     "prettier": "^3.0.0",
-    "rehype-parse": "^8.0.0",
-    "rehype-stringify": "^9.0.0",
+    "rehype-parse": "^9.0.0",
+    "rehype-stringify": "^10.0.0",
     "remark-cli": "^11.0.0",
     "remark-html": "^15.0.0",
-    "remark-parse": "^10.0.0",
+    "remark-parse": "^11.0.0",
     "remark-preset-wooorm": "^9.0.0",
     "remark-rehype": "^10.0.0",
-    "remark-stringify": "^10.0.0",
-    "to-vfile": "^7.0.0",
+    "remark-stringify": "^11.0.0",
+    "to-vfile": "^8.0.0",
     "type-coverage": "^2.0.0",
     "typescript": "^5.0.0",
-    "unified": "^10.0.0",
-    "unist-builder": "^3.0.0",
-    "unist-util-remove-position": "^4.0.0",
+    "unified": "^11.0.0",
+    "unist-builder": "^4.0.0",
+    "unist-util-remove-position": "^5.0.0",
     "xo": "^0.56.0"
   },
   "scripts": {

diff --git a/packages/rehype-katex/index.js b/packages/rehype-katex/index.js
@@ -82,6 +82,7 @@ export default function rehypeKatex(options) {
       }
 
       const root = fromHtmlIsomorphic(result, {fragment: true})
+      // To do: cast content.
       // @ts-expect-error: assume no `doctypes` in KaTeX result.
       element.children = root.children
     })

diff --git a/packages/rehype-katex/package.json b/packages/rehype-katex/package.json
@@ -38,12 +38,12 @@
     "index.js"
   ],
   "dependencies": {
-    "@types/hast": "^2.0.0",
+    "@types/hast": "^3.0.0",
     "@types/katex": "^0.16.0",
-    "hast-util-from-html-isomorphic": "^1.0.0",
-    "hast-util-to-text": "^3.1.0",
+    "hast-util-from-html-isomorphic": "^2.0.0",
+    "hast-util-to-text": "^4.0.0",
     "katex": "^0.16.0",
-    "unist-util-visit": "^4.0.0"
+    "unist-util-visit": "^5.0.0"
   },
   "scripts": {
     "test-api": "node --conditions development test.js",

diff --git a/packages/rehype-katex/readme.md b/packages/rehype-katex/readme.md
@@ -77,8 +77,8 @@ Say we have the following file `example.html`:
 
 ```html
 <p>
-  Lift(<span class="math math-inline">L</span>) can be determined by Lift Coefficient
-  (<span class="math math-inline">C_L</span>) like the following equation.
+  Lift(<code class="language-math math-inline">L</span>) can be determined by Lift Coefficient
+  (<code class="language-math math-inline">C_L</span>) like the following equation.
 </p>
 
 <div class="math math-display">
@@ -121,8 +121,8 @@ Now running `node example.js` yields:
 </head>
 <body>
 <p>
-  Lift(<span class="math math-inline"><span class="katex">…</span></span>) can be determined by Lift Coefficient
-  (<span class="math math-inline"><span class="katex">…</span></span>) like the following equation.
+  Lift(<code class="language-math math-inline"><span class="katex">…</span></span>) can be determined by Lift Coefficient
+  (<code class="language-math math-inline"><span class="katex">…</span></span>) like the following equation.
 </p>
 <div class="math math-display"><span class="katex-display">…</span></div>
 </body>

diff --git a/packages/rehype-katex/test.js b/packages/rehype-katex/test.js
@@ -18,7 +18,7 @@ test('rehype-katex', async function (t) {
         .use(rehypeStringify)
         .processSync(
           [
-            '<p>Inline math <span class="math-inline">\\alpha</span>.</p>',
+            '<p>Inline math <code class="math-inline">\\alpha</code>.</p>',
             '<p>Block math:</p>',
             '<div class="math-display">\\gamma</div>'
           ].join('\n')
@@ -29,9 +29,9 @@ test('rehype-katex', async function (t) {
         .use(rehypeStringify)
         .processSync(
           [
-            '<p>Inline math <span class="math-inline">' +
+            '<p>Inline math <code class="math-inline">' +
               katex.renderToString('\\alpha') +
-              '</span>.</p>',
+              '</code>.</p>',
             '<p>Block math:</p>',
             '<div class="math-display">' +
               katex.renderToString('\\gamma', {displayMode: true}) +
@@ -47,6 +47,7 @@ test('rehype-katex', async function (t) {
       unified()
         .use(remarkParse)
         .use(remarkMath)
+        // @ts-expect-error: to do: remove when `remark-rehype` is released.
         .use(remarkRehype)
         .use(rehypeKatex)
         .use(rehypeStringify)
@@ -67,13 +68,13 @@ test('rehype-katex', async function (t) {
         .use(rehypeStringify)
         .processSync(
           [
-            '<p>Inline math <span class="math math-inline">' +
+            '<p>Inline math <code class="language-math math-inline">' +
               katex.renderToString('\\alpha') +
-              '</span>.</p>',
+              '</code>.</p>',
             '<p>Block math:</p>',
-            '<div class="math math-display">' +
+            '<pre><code class="language-math math-display">' +
               katex.renderToString('\\gamma', {displayMode: true}) +
-              '</div>'
+              '</code></pre>'
           ].join('\n')
         )
         .toString()
@@ -89,16 +90,16 @@ test('rehype-katex', async function (t) {
           .use(rehypeKatex)
           .use(rehypeStringify)
           .processSync(
-            '<p>Double math <span class="math-inline math-display">\\alpha</span>.</p>'
+            '<p>Double math <code class="math-inline math-display">\\alpha</code>.</p>'
           )
           .toString(),
         unified()
           .use(rehypeParse, {fragment: true})
           .use(rehypeStringify)
           .processSync(
-            '<p>Double math <span class="math-inline math-display">' +
+            '<p>Double math <code class="math-inline math-display">' +
               katex.renderToString('\\alpha', {displayMode: true}) +
-              '</span>.</p>'
+              '</code>.</p>'
           )
           .toString()
       )
@@ -113,15 +114,15 @@ test('rehype-katex', async function (t) {
         .use(rehypeParse, {fragment: true})
         .use(rehypeKatex, {macros})
         .use(rehypeStringify)
-        .processSync('<span class="math-inline">\\RR</span>')
+        .processSync('<code class="math-inline">\\RR</code>')
         .toString(),
       unified()
         .use(rehypeParse, {fragment: true})
         .use(rehypeStringify)
         .processSync(
-          '<span class="math-inline">' +
+          '<code class="math-inline">' +
             katex.renderToString('\\RR', {macros}) +
-            '</span>'
+            '</code>'
         )
         .toString()
     )
@@ -133,18 +134,18 @@ test('rehype-katex', async function (t) {
         .use(rehypeParse, {fragment: true})
         .use(rehypeKatex, {errorColor: 'orange'})
         .use(rehypeStringify)
-        .processSync('<span class="math-inline">\\alpa</span>')
+        .processSync('<code class="math-inline">\\alpa</code>')
         .toString(),
       unified()
         .use(rehypeParse, {fragment: true})
         .use(rehypeStringify)
         .processSync(
-          '<span class="math-inline">' +
+          '<code class="math-inline">' +
             katex.renderToString('\\alpa', {
               throwOnError: false,
               errorColor: 'orange'
             }) +
-            '</span>'
+            '</code>'
         )
         .toString()
     )
@@ -157,7 +158,7 @@ test('rehype-katex', async function (t) {
         .use(rehypeKatex)
         .use(rehypeStringify)
         .processSync(
-          '<p>Lorem</p>\n<p><span class="math-inline">\\alpa</span></p>'
+          '<p>Lorem</p>\n<p><code class="math-inline">\\alpa</code></p>'
         )
         .messages.map(String),
       [
@@ -175,7 +176,7 @@ test('rehype-katex', async function (t) {
           .use(rehypeKatex, {throwOnError: true})
           .use(rehypeStringify)
           .processSync(
-            '<p>Lorem</p>\n<p><span class="math-inline">\\alpa</span></p>'
+            '<p>Lorem</p>\n<p><code class="math-inline">\\alpa</code></p>'
           )
       } catch (error_) {
         const error = /** @type {Error} */ (error_)
@@ -193,13 +194,13 @@ test('rehype-katex', async function (t) {
         .use(rehypeParse, {fragment: true})
         .use(rehypeKatex, {errorColor: 'orange', strict: 'ignore'})
         .use(rehypeStringify)
-        .processSync('<span class="math-inline">ê&amp;</span>')
+        .processSync('<code class="math-inline">ê&amp;</code>')
         .toString(),
       unified()
         .use(rehypeParse, {fragment: true})
         .use(rehypeStringify)
         .processSync(
-          '<span class="math-inline"><span class="katex-error" title="ParseError: KaTeX parse error: Expected \'EOF\', got \'&\' at position 2: ê&̲" style="color:orange">ê&amp;</span></span>'
+          '<code class="math-inline"><span class="katex-error" title="ParseError: KaTeX parse error: Expected \'EOF\', got \'&\' at position 2: ê&̲" style="color:orange">ê&amp;</span></code>'
         )
         .toString()
     )
@@ -237,14 +238,14 @@ test('rehype-katex', async function (t) {
         .use(rehypeKatex)
         .use(rehypeStringify)
         .processSync(
-          '<span class="math-display">\\begin{split}\n\\end{{split}}\n</span>'
+          '<code class="math-display">\\begin{split}\n\\end{{split}}\n</code>'
         )
         .toString(),
       unified()
         .use(rehypeParse, {fragment: true})
         .use(rehypeStringify)
         .processSync(
-          '<span class="math-display"><span class="katex-error" title="Error: Expected node of type textord, but got node of type ordgroup" style="color:#cc0000">\\begin{split}\n\\end{{split}}\n</span></span>'
+          '<code class="math-display"><span class="katex-error" title="Error: Expected node of type textord, but got node of type ordgroup" style="color:#cc0000">\\begin{split}\n\\end{{split}}\n</span></code>'
         )
         .toString()
     )

diff --git a/packages/rehype-mathjax/package.json b/packages/rehype-mathjax/package.json
@@ -48,14 +48,14 @@
     "./lib/create-adaptor.js": "./lib/create-adaptor.browser.js"
   },
   "dependencies": {
-    "@types/hast": "^2.0.0",
+    "@types/hast": "^3.0.0",
     "@types/mathjax": "^0.0.37",
-    "hast-util-from-dom": "^4.0.0",
-    "hast-util-to-text": "^3.1.0",
+    "hast-util-from-dom": "^5.0.0",
+    "hast-util-to-text": "^4.0.0",
     "jsdom": "^21.0.0",
     "mathjax-full": "^3.0.0",
-    "unified": "^10.0.0",
-    "unist-util-visit": "^4.0.0"
+    "unified": "^11.0.0",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
     "@types/jsdom": "^21.0.0"

diff --git a/packages/rehype-mathjax/readme.md b/packages/rehype-mathjax/readme.md
@@ -77,8 +77,8 @@ Say we have the following file `example.html`:
 
 ```html
 <p>
-  Lift(<span class="math math-inline">L</span>) can be determined by Lift Coefficient
-  (<span class="math math-inline">C_L</span>) like the following equation.
+  Lift(<code class="language-math math-inline">L</span>) can be determined by Lift Coefficient
+  (<code class="language-math math-inline">C_L</span>) like the following equation.
 </p>
 
 <div class="math math-display">
@@ -108,8 +108,8 @@ Now running `node example.js` yields:
 
 ```html
 <p>
-  Lift(<span class="math math-inline"><mjx-container class="MathJax" jax="SVG"><!--…--></mjx-container></span>) can be determined by Lift Coefficient
-  (<span class="math math-inline"><mjx-container class="MathJax" jax="SVG"><!--…--></mjx-container></span>) like the following equation.
+  Lift(<code class="language-math math-inline"><mjx-container class="MathJax" jax="SVG"><!--…--></mjx-container></span>) can be determined by Lift Coefficient
+  (<code class="language-math math-inline"><mjx-container class="MathJax" jax="SVG"><!--…--></mjx-container></span>) like the following equation.
 </p>
 
 <div class="math math-display"><mjx-container class="MathJax" jax="SVG" display="true"><!--…--></mjx-container></div>

diff --git a/packages/rehype-mathjax/test/fixture/markdown-svg.html b/packages/rehype-mathjax/test/fixture/markdown-svg.html
@@ -1,6 +1,6 @@
-<p>Inline math <span class="math math-inline"><mjx-container class="MathJax" jax="SVG"><svg style="vertical-align: -0.025ex;" xmlns="http://www.w3.org/2000/svg" width="1.448ex" height="1.025ex" role="img" focusable="false" viewBox="0 -442 640 453" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D6FC" d="M34 156Q34 270 120 356T309 442Q379 442 421 402T478 304Q484 275 485 237V208Q534 282 560 374Q564 388 566 390T582 393Q603 393 603 385Q603 376 594 346T558 261T497 161L486 147L487 123Q489 67 495 47T514 26Q528 28 540 37T557 60Q559 67 562 68T577 70Q597 70 597 62Q597 56 591 43Q579 19 556 5T512 -10H505Q438 -10 414 62L411 69L400 61Q390 53 370 41T325 18T267 -2T203 -11Q124 -11 79 39T34 156ZM208 26Q257 26 306 47T379 90L403 112Q401 255 396 290Q382 405 304 405Q235 405 183 332Q156 292 139 224T121 120Q121 71 146 49T208 26Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D6FC" xlink:href="#MJX-1-TEX-I-1D6FC"></use></g></g></g></svg></mjx-container></span>.</p>
+<p>Inline math <code class="language-math math-inline"><mjx-container class="MathJax" jax="SVG"><svg style="vertical-align: -0.025ex;" xmlns="http://www.w3.org/2000/svg" width="1.448ex" height="1.025ex" role="img" focusable="false" viewBox="0 -442 640 453" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-I-1D6FC" d="M34 156Q34 270 120 356T309 442Q379 442 421 402T478 304Q484 275 485 237V208Q534 282 560 374Q564 388 566 390T582 393Q603 393 603 385Q603 376 594 346T558 261T497 161L486 147L487 123Q489 67 495 47T514 26Q528 28 540 37T557 60Q559 67 562 68T577 70Q597 70 597 62Q597 56 591 43Q579 19 556 5T512 -10H505Q438 -10 414 62L411 69L400 61Q390 53 370 41T325 18T267 -2T203 -11Q124 -11 79 39T34 156ZM208 26Q257 26 306 47T379 90L403 112Q401 255 396 290Q382 405 304 405Q235 405 183 332Q156 292 139 224T121 120Q121 71 146 49T208 26Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D6FC" xlink:href="#MJX-1-TEX-I-1D6FC"></use></g></g></g></svg></mjx-container></code>.</p>
 <p>Block math:</p>
-<div class="math math-display"><mjx-container class="MathJax" jax="SVG" display="true"><svg style="vertical-align: -0.489ex;" xmlns="http://www.w3.org/2000/svg" width="1.229ex" height="1.486ex" role="img" focusable="false" viewBox="0 -441 543 657" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-2-TEX-I-1D6FE" d="M31 249Q11 249 11 258Q11 275 26 304T66 365T129 418T206 441Q233 441 239 440Q287 429 318 386T371 255Q385 195 385 170Q385 166 386 166L398 193Q418 244 443 300T486 391T508 430Q510 431 524 431H537Q543 425 543 422Q543 418 522 378T463 251T391 71Q385 55 378 6T357 -100Q341 -165 330 -190T303 -216Q286 -216 286 -188Q286 -138 340 32L346 51L347 69Q348 79 348 100Q348 257 291 317Q251 355 196 355Q148 355 108 329T51 260Q49 251 47 251Q45 249 31 249Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D6FE" xlink:href="#MJX-2-TEX-I-1D6FE"></use></g></g></g></svg></mjx-container></div><style>
+<pre><code class="language-math math-display"><mjx-container class="MathJax" jax="SVG" display="true"><svg style="vertical-align: -0.489ex;" xmlns="http://www.w3.org/2000/svg" width="1.229ex" height="1.486ex" role="img" focusable="false" viewBox="0 -441 543 657" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-2-TEX-I-1D6FE" d="M31 249Q11 249 11 258Q11 275 26 304T66 365T129 418T206 441Q233 441 239 440Q287 429 318 386T371 255Q385 195 385 170Q385 166 386 166L398 193Q418 244 443 300T486 391T508 430Q510 431 524 431H537Q543 425 543 422Q543 418 522 378T463 251T391 71Q385 55 378 6T357 -100Q341 -165 330 -190T303 -216Q286 -216 286 -188Q286 -138 340 32L346 51L347 69Q348 79 348 100Q348 257 291 317Q251 355 196 355Q148 355 108 329T51 260Q49 251 47 251Q45 249 31 249Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="mi"><use data-c="1D6FE" xlink:href="#MJX-2-TEX-I-1D6FE"></use></g></g></g></svg></mjx-container></code></pre><style>
 mjx-container[jax="SVG"] {
   direction: ltr;
 }

diff --git a/packages/rehype-mathjax/test/index.js b/packages/rehype-mathjax/test/index.js
@@ -67,6 +67,7 @@ test('rehype-mathjax', async function (t) {
       unified()
         .use(remarkParse)
         .use(remarkMath)
+        // @ts-expect-error: to do: remove when `remark-rehype` is released.
         .use(remarkRehype)
         .use(rehypeMathJaxSvg)
         .use(rehypeStringify)

diff --git a/packages/remark-html-katex/index.js b/packages/remark-html-katex/index.js
@@ -54,9 +54,18 @@ export default function remarkHtmlKatex(options = {}) {
           )
         }
 
-        const data = node.data || (node.data = {})
+        const tree = parseHtml.parse(result)
+        removePosition(tree)
 
-        data.hChildren = removePosition(parseHtml.parse(result)).children
+        if (node.type === 'inlineMath') {
+          const data = node.data || (node.data = {})
+          // @ts-expect-error: fine.
+          data.hChildren = tree.children
+        } else {
+          // @ts-expect-error: fine.
+          const scope = node.data.hChildren[0]
+          scope.children = tree.children
+        }
       }
     })
   }

diff --git a/packages/remark-html-katex/package.json b/packages/remark-html-katex/package.json
@@ -25,12 +25,12 @@
   ],
   "dependencies": {
     "@types/katex": "^0.16.0",
-    "@types/mdast": "^3.0.0",
+    "@types/mdast": "^4.0.0",
     "katex": "^0.16.0",
-    "rehype-parse": "^8.0.0",
-    "unified": "^10.0.0",
-    "unist-util-remove-position": "^4.0.0",
-    "unist-util-visit": "^4.0.0"
+    "rehype-parse": "^9.0.0",
+    "unified": "^11.0.0",
+    "unist-util-remove-position": "^5.0.0",
+    "unist-util-visit": "^5.0.0"
   },
   "scripts": {
     "test-api": "node --conditions development test.js",