Skip to content

Commit fc32531

Browse files
wooormwooorm
committed
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.
1 parent 8e027e6 commit fc32531

File tree

17 files changed

+306
-207
lines changed

17 files changed

+306
-207
lines changed

‎package.json

+8-8
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,20 @@
2626
"@types/node": "^20.0.0",
2727
"c8": "^8.0.0",
2828
"prettier": "^3.0.0",
29-
"rehype-parse": "^8.0.0",
30-
"rehype-stringify": "^9.0.0",
29+
"rehype-parse": "^9.0.0",
30+
"rehype-stringify": "^10.0.0",
3131
"remark-cli": "^11.0.0",
3232
"remark-html": "^15.0.0",
33-
"remark-parse": "^10.0.0",
33+
"remark-parse": "^11.0.0",
3434
"remark-preset-wooorm": "^9.0.0",
3535
"remark-rehype": "^10.0.0",
36-
"remark-stringify": "^10.0.0",
37-
"to-vfile": "^7.0.0",
36+
"remark-stringify": "^11.0.0",
37+
"to-vfile": "^8.0.0",
3838
"type-coverage": "^2.0.0",
3939
"typescript": "^5.0.0",
40-
"unified": "^10.0.0",
41-
"unist-builder": "^3.0.0",
42-
"unist-util-remove-position": "^4.0.0",
40+
"unified": "^11.0.0",
41+
"unist-builder": "^4.0.0",
42+
"unist-util-remove-position": "^5.0.0",
4343
"xo": "^0.56.0"
4444
},
4545
"scripts": {

‎packages/rehype-katex/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export default function rehypeKatex(options) {
8282
}
8383

8484
const root = fromHtmlIsomorphic(result, {fragment: true})
85+
// To do: cast content.
8586
// @ts-expect-error: assume no `doctypes` in KaTeX result.
8687
element.children = root.children
8788
})

‎packages/rehype-katex/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@
3838
"index.js"
3939
],
4040
"dependencies": {
41-
"@types/hast": "^2.0.0",
41+
"@types/hast": "^3.0.0",
4242
"@types/katex": "^0.16.0",
43-
"hast-util-from-html-isomorphic": "^1.0.0",
44-
"hast-util-to-text": "^3.1.0",
43+
"hast-util-from-html-isomorphic": "^2.0.0",
44+
"hast-util-to-text": "^4.0.0",
4545
"katex": "^0.16.0",
46-
"unist-util-visit": "^4.0.0"
46+
"unist-util-visit": "^5.0.0"
4747
},
4848
"scripts": {
4949
"test-api": "node --conditions development test.js",

‎packages/rehype-katex/readme.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ Say we have the following file `example.html`:
7777

7878
```html
7979
<p>
80-
Lift(<span class="math math-inline">L</span>) can be determined by Lift Coefficient
81-
(<span class="math math-inline">C_L</span>) like the following equation.
80+
Lift(<code class="language-math math-inline">L</span>) can be determined by Lift Coefficient
81+
(<code class="language-math math-inline">C_L</span>) like the following equation.
8282
</p>
8383

8484
<div class="math math-display">
@@ -121,8 +121,8 @@ Now running `node example.js` yields:
121121
</head>
122122
<body>
123123
<p>
124-
Lift(<span class="math math-inline"><span class="katex">…</span></span>) can be determined by Lift Coefficient
125-
(<span class="math math-inline"><span class="katex">…</span></span>) like the following equation.
124+
Lift(<code class="language-math math-inline"><span class="katex">…</span></span>) can be determined by Lift Coefficient
125+
(<code class="language-math math-inline"><span class="katex">…</span></span>) like the following equation.
126126
</p>
127127
<div class="math math-display"><span class="katex-display">…</span></div>
128128
</body>

‎packages/rehype-katex/test.js

+23-22
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ test('rehype-katex', async function (t) {
1818
.use(rehypeStringify)
1919
.processSync(
2020
[
21-
'<p>Inline math <span class="math-inline">\\alpha</span>.</p>',
21+
'<p>Inline math <code class="math-inline">\\alpha</code>.</p>',
2222
'<p>Block math:</p>',
2323
'<div class="math-display">\\gamma</div>'
2424
].join('\n')
@@ -29,9 +29,9 @@ test('rehype-katex', async function (t) {
2929
.use(rehypeStringify)
3030
.processSync(
3131
[
32-
'<p>Inline math <span class="math-inline">' +
32+
'<p>Inline math <code class="math-inline">' +
3333
katex.renderToString('\\alpha') +
34-
'</span>.</p>',
34+
'</code>.</p>',
3535
'<p>Block math:</p>',
3636
'<div class="math-display">' +
3737
katex.renderToString('\\gamma', {displayMode: true}) +
@@ -47,6 +47,7 @@ test('rehype-katex', async function (t) {
4747
unified()
4848
.use(remarkParse)
4949
.use(remarkMath)
50+
// @ts-expect-error: to do: remove when `remark-rehype` is released.
5051
.use(remarkRehype)
5152
.use(rehypeKatex)
5253
.use(rehypeStringify)
@@ -67,13 +68,13 @@ test('rehype-katex', async function (t) {
6768
.use(rehypeStringify)
6869
.processSync(
6970
[
70-
'<p>Inline math <span class="math math-inline">' +
71+
'<p>Inline math <code class="language-math math-inline">' +
7172
katex.renderToString('\\alpha') +
72-
'</span>.</p>',
73+
'</code>.</p>',
7374
'<p>Block math:</p>',
74-
'<div class="math math-display">' +
75+
'<pre><code class="language-math math-display">' +
7576
katex.renderToString('\\gamma', {displayMode: true}) +
76-
'</div>'
77+
'</code></pre>'
7778
].join('\n')
7879
)
7980
.toString()
@@ -89,16 +90,16 @@ test('rehype-katex', async function (t) {
8990
.use(rehypeKatex)
9091
.use(rehypeStringify)
9192
.processSync(
92-
'<p>Double math <span class="math-inline math-display">\\alpha</span>.</p>'
93+
'<p>Double math <code class="math-inline math-display">\\alpha</code>.</p>'
9394
)
9495
.toString(),
9596
unified()
9697
.use(rehypeParse, {fragment: true})
9798
.use(rehypeStringify)
9899
.processSync(
99-
'<p>Double math <span class="math-inline math-display">' +
100+
'<p>Double math <code class="math-inline math-display">' +
100101
katex.renderToString('\\alpha', {displayMode: true}) +
101-
'</span>.</p>'
102+
'</code>.</p>'
102103
)
103104
.toString()
104105
)
@@ -113,15 +114,15 @@ test('rehype-katex', async function (t) {
113114
.use(rehypeParse, {fragment: true})
114115
.use(rehypeKatex, {macros})
115116
.use(rehypeStringify)
116-
.processSync('<span class="math-inline">\\RR</span>')
117+
.processSync('<code class="math-inline">\\RR</code>')
117118
.toString(),
118119
unified()
119120
.use(rehypeParse, {fragment: true})
120121
.use(rehypeStringify)
121122
.processSync(
122-
'<span class="math-inline">' +
123+
'<code class="math-inline">' +
123124
katex.renderToString('\\RR', {macros}) +
124-
'</span>'
125+
'</code>'
125126
)
126127
.toString()
127128
)
@@ -133,18 +134,18 @@ test('rehype-katex', async function (t) {
133134
.use(rehypeParse, {fragment: true})
134135
.use(rehypeKatex, {errorColor: 'orange'})
135136
.use(rehypeStringify)
136-
.processSync('<span class="math-inline">\\alpa</span>')
137+
.processSync('<code class="math-inline">\\alpa</code>')
137138
.toString(),
138139
unified()
139140
.use(rehypeParse, {fragment: true})
140141
.use(rehypeStringify)
141142
.processSync(
142-
'<span class="math-inline">' +
143+
'<code class="math-inline">' +
143144
katex.renderToString('\\alpa', {
144145
throwOnError: false,
145146
errorColor: 'orange'
146147
}) +
147-
'</span>'
148+
'</code>'
148149
)
149150
.toString()
150151
)
@@ -157,7 +158,7 @@ test('rehype-katex', async function (t) {
157158
.use(rehypeKatex)
158159
.use(rehypeStringify)
159160
.processSync(
160-
'<p>Lorem</p>\n<p><span class="math-inline">\\alpa</span></p>'
161+
'<p>Lorem</p>\n<p><code class="math-inline">\\alpa</code></p>'
161162
)
162163
.messages.map(String),
163164
[
@@ -175,7 +176,7 @@ test('rehype-katex', async function (t) {
175176
.use(rehypeKatex, {throwOnError: true})
176177
.use(rehypeStringify)
177178
.processSync(
178-
'<p>Lorem</p>\n<p><span class="math-inline">\\alpa</span></p>'
179+
'<p>Lorem</p>\n<p><code class="math-inline">\\alpa</code></p>'
179180
)
180181
} catch (error_) {
181182
const error = /** @type {Error} */ (error_)
@@ -193,13 +194,13 @@ test('rehype-katex', async function (t) {
193194
.use(rehypeParse, {fragment: true})
194195
.use(rehypeKatex, {errorColor: 'orange', strict: 'ignore'})
195196
.use(rehypeStringify)
196-
.processSync('<span class="math-inline">ê&amp;</span>')
197+
.processSync('<code class="math-inline">ê&amp;</code>')
197198
.toString(),
198199
unified()
199200
.use(rehypeParse, {fragment: true})
200201
.use(rehypeStringify)
201202
.processSync(
202-
'<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>'
203+
'<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>'
203204
)
204205
.toString()
205206
)
@@ -237,14 +238,14 @@ test('rehype-katex', async function (t) {
237238
.use(rehypeKatex)
238239
.use(rehypeStringify)
239240
.processSync(
240-
'<span class="math-display">\\begin{split}\n\\end{{split}}\n</span>'
241+
'<code class="math-display">\\begin{split}\n\\end{{split}}\n</code>'
241242
)
242243
.toString(),
243244
unified()
244245
.use(rehypeParse, {fragment: true})
245246
.use(rehypeStringify)
246247
.processSync(
247-
'<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>'
248+
'<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>'
248249
)
249250
.toString()
250251
)

‎packages/rehype-mathjax/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@
4848
"./lib/create-adaptor.js": "./lib/create-adaptor.browser.js"
4949
},
5050
"dependencies": {
51-
"@types/hast": "^2.0.0",
51+
"@types/hast": "^3.0.0",
5252
"@types/mathjax": "^0.0.37",
53-
"hast-util-from-dom": "^4.0.0",
54-
"hast-util-to-text": "^3.1.0",
53+
"hast-util-from-dom": "^5.0.0",
54+
"hast-util-to-text": "^4.0.0",
5555
"jsdom": "^21.0.0",
5656
"mathjax-full": "^3.0.0",
57-
"unified": "^10.0.0",
58-
"unist-util-visit": "^4.0.0"
57+
"unified": "^11.0.0",
58+
"unist-util-visit": "^5.0.0"
5959
},
6060
"devDependencies": {
6161
"@types/jsdom": "^21.0.0"

‎packages/rehype-mathjax/readme.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ Say we have the following file `example.html`:
7777

7878
```html
7979
<p>
80-
Lift(<span class="math math-inline">L</span>) can be determined by Lift Coefficient
81-
(<span class="math math-inline">C_L</span>) like the following equation.
80+
Lift(<code class="language-math math-inline">L</span>) can be determined by Lift Coefficient
81+
(<code class="language-math math-inline">C_L</span>) like the following equation.
8282
</p>
8383

8484
<div class="math math-display">
@@ -108,8 +108,8 @@ Now running `node example.js` yields:
108108

109109
```html
110110
<p>
111-
Lift(<span class="math math-inline"><mjx-container class="MathJax" jax="SVG"><!--…--></mjx-container></span>) can be determined by Lift Coefficient
112-
(<span class="math math-inline"><mjx-container class="MathJax" jax="SVG"><!--…--></mjx-container></span>) like the following equation.
111+
Lift(<code class="language-math math-inline"><mjx-container class="MathJax" jax="SVG"><!--…--></mjx-container></span>) can be determined by Lift Coefficient
112+
(<code class="language-math math-inline"><mjx-container class="MathJax" jax="SVG"><!--…--></mjx-container></span>) like the following equation.
113113
</p>
114114

115115
<div class="math math-display"><mjx-container class="MathJax" jax="SVG" display="true"><!--…--></mjx-container></div>

‎packages/rehype-mathjax/test/fixture/markdown-svg.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<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>
1+
<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>
22
<p>Block math:</p>
3-
<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>
3+
<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>
44
mjx-container[jax="SVG"] {
55
direction: ltr;
66
}

‎packages/rehype-mathjax/test/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ test('rehype-mathjax', async function (t) {
6767
unified()
6868
.use(remarkParse)
6969
.use(remarkMath)
70+
// @ts-expect-error: to do: remove when `remark-rehype` is released.
7071
.use(remarkRehype)
7172
.use(rehypeMathJaxSvg)
7273
.use(rehypeStringify)

‎packages/remark-html-katex/index.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,18 @@ export default function remarkHtmlKatex(options = {}) {
5454
)
5555
}
5656

57-
const data = node.data || (node.data = {})
57+
const tree = parseHtml.parse(result)
58+
removePosition(tree)
5859

59-
data.hChildren = removePosition(parseHtml.parse(result)).children
60+
if (node.type === 'inlineMath') {
61+
const data = node.data || (node.data = {})
62+
// @ts-expect-error: fine.
63+
data.hChildren = tree.children
64+
} else {
65+
// @ts-expect-error: fine.
66+
const scope = node.data.hChildren[0]
67+
scope.children = tree.children
68+
}
6069
}
6170
})
6271
}

‎packages/remark-html-katex/package.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@
2525
],
2626
"dependencies": {
2727
"@types/katex": "^0.16.0",
28-
"@types/mdast": "^3.0.0",
28+
"@types/mdast": "^4.0.0",
2929
"katex": "^0.16.0",
30-
"rehype-parse": "^8.0.0",
31-
"unified": "^10.0.0",
32-
"unist-util-remove-position": "^4.0.0",
33-
"unist-util-visit": "^4.0.0"
30+
"rehype-parse": "^9.0.0",
31+
"unified": "^11.0.0",
32+
"unist-util-remove-position": "^5.0.0",
33+
"unist-util-visit": "^5.0.0"
3434
},
3535
"scripts": {
3636
"test-api": "node --conditions development test.js",

0 commit comments

Comments
 (0)