Change to use pre, code elements in HTML

Closes GH-2.

Author: wooorm

lib/index.js

@@ -1,4 +1,6 @@
 /**
+ * @typedef {import('hast').Element} HastElement
+ * @typedef {import('hast').ElementContent} HastElementContent
  * @typedef {import('mdast-util-from-markdown').CompileContext} CompileContext
  * @typedef {import('mdast-util-from-markdown').Extension} FromMarkdownExtension
  * @typedef {import('mdast-util-from-markdown').Handle} FromMarkdownHandle
@@ -48,16 +50,19 @@ export function mathFromMarkdown() {
    * @type {FromMarkdownHandle}
    */
   function enterMathFlow(token) {
+    /** @type {HastElement} */
+    const code = {
+      type: 'element',
+      tagName: 'code',
+      properties: {className: ['language-math', 'math-display']},
+      children: []
+    }
     this.enter(
       {
         type: 'math',
         meta: null,
         value: '',
-        data: {
-          hName: 'div',
-          hProperties: {className: ['math', 'math-display']},
-          hChildren: [{type: 'text', value: ''}]
-        }
+        data: {hName: 'pre', hChildren: [code]}
       },
       token
     )
@@ -104,7 +109,10 @@ export function mathFromMarkdown() {
     this.exit(token)
     node.value = data
     // @ts-expect-error: we defined it in `enterMathFlow`.
-    node.data.hChildren[0].value = data
+    const code = /** @type {HastElement} */ (node.data.hChildren[0])
+    assert(code.type === 'element')
+    assert(code.tagName === 'code')
+    code.children.push({type: 'text', value: data})
     this.data.mathFlowInside = undefined
   }
 
@@ -118,9 +126,9 @@ export function mathFromMarkdown() {
         type: 'inlineMath',
         value: '',
         data: {
-          hName: 'span',
-          hProperties: {className: ['math', 'math-inline']},
-          hChildren: [{type: 'text', value: ''}]
+          hName: 'code',
+          hProperties: {className: ['language-math', 'math-inline']},
+          hChildren: []
         }
       },
       token
@@ -138,8 +146,11 @@ export function mathFromMarkdown() {
     assert(node.type === 'inlineMath')
     this.exit(token)
     node.value = data
-    // @ts-expect-error: we defined it.
-    node.data.hChildren[0].value = data
+    const children = /** @type {Array<HastElementContent>} */ (
+      // @ts-expect-error: we defined it in `enterMathFlow`.
+      node.data.hChildren
+    )
+    children.push({type: 'text', value: data})
   }
 
   /**

package.json

@@ -35,11 +35,13 @@
     "index.js"
   ],
   "dependencies": {
+    "@types/hast": "^3.0.0",
     "@types/mdast": "^4.0.0",
     "devlop": "^1.0.0",
     "longest-streak": "^3.0.0",
     "mdast-util-from-markdown": "^2.0.0",
-    "mdast-util-to-markdown": "^2.1.0"
+    "mdast-util-to-markdown": "^2.1.0",
+    "unist-util-remove-position": "^5.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

readme.md

@@ -68,8 +68,8 @@ internals away.
 This utility adds [fields on nodes][fields] so that the utility responsible for
 turning mdast (markdown) nodes into hast (HTML) nodes,
 [`mdast-util-to-hast`][mdast-util-to-hast], turns text (inline) math nodes into
-`<span class="math math-inline">…</span>` and flow (block) math nodes into
-`<div class="math math-display">…</div>`.
+`<code class="language-math math-inline">…</code>` and flow (block) math nodes
+into `<pre><code class="language-math math-display">…</code></pre>`.
 
 ## Install
 
@@ -99,7 +99,8 @@ In browsers with [`esm.sh`][esmsh]:
 Say our document `example.md` contains:
 
 ```markdown
-Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.
+Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
+equation.
 
 $$
 L = \frac{1}{2} \rho v^2 S C_L
@@ -142,8 +143,8 @@ brevity):
         {type: 'text', value: 'Lift('},
         {type: 'inlineMath', value: 'L', data: {/* … */}},
         {type: 'text', value: ') can be determined by Lift Coefficient ('},
-        {type: 'inlineMath', e: 'C_L', data: {/* … */}},
-        {type: 'text', value: ') like the following equation.'}
+        {type: 'inlineMath', value: 'C_L', data: {/* … */}},
+        {type: 'text', value: ') like the following\nequation.'}
       ]
     },
     {type: 'math', meta: null, value: 'L = \\frac{1}{2} \\rho v^2 S C_L', data: {/* … */}}
@@ -152,7 +153,8 @@ brevity):
 ```
 
 ```markdown
-Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following equation.
+Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
+equation.
 
 $$
 L = \frac{1}{2} \rho v^2 S C_L
@@ -196,11 +198,14 @@ Math (text) (TypeScript type).
 ###### Type
 
 ```ts
-import type {Literal} from 'mdast'
+import type {Data, Literal} from 'mdast'
 
 interface InlineMath extends Literal {
   type: 'inlineMath'
+  data?: InlineMathData | undefined
 }
+
+export interface InlineMathData extends Data {}
 ```
 
 ### `Math`
@@ -210,12 +215,15 @@ Math (flow) (TypeScript type).
 ###### Type
 
 ```ts
-import type {Literal} from 'mdast'
+import type {Data, Literal} from 'mdast'
 
 interface Math extends Literal {
   type: 'math'
   meta?: string | null | undefined
+  data?: MathData | undefined
 }
+
+export interface MathData extends Data {}
 ```
 
 ### `ToOptions`
@@ -234,8 +242,8 @@ Configuration (TypeScript type).
 
 This plugin integrates with [`mdast-util-to-hast`][mdast-util-to-hast].
 When mdast is turned into hast the math nodes are turned into
-`<span class="math math-inline">…</span>` and
-`<div class="math math-display">…</div>` elements.
+`<code class="language-math math-inline">…</code>` and
+`<pre><code class="language-math math-display">…</code></pre>` elements.
 
 ## Syntax
 

test.js

@@ -39,8 +39,8 @@ test('mathFromMarkdown', async function (t) {
                 type: 'inlineMath',
                 value: 'b',
                 data: {
-                  hName: 'span',
-                  hProperties: {className: ['math', 'math-inline']},
+                  hName: 'code',
+                  hProperties: {className: ['language-math', 'math-inline']},
                   hChildren: [{type: 'text', value: 'b'}]
                 },
                 position: {
@@ -82,9 +82,15 @@ test('mathFromMarkdown', async function (t) {
         meta: null,
         value: 'a',
         data: {
-          hName: 'div',
-          hProperties: {className: ['math', 'math-display']},
-          hChildren: [{type: 'text', value: 'a'}]
+          hName: 'pre',
+          hChildren: [
+            {
+              type: 'element',
+              tagName: 'code',
+              properties: {className: ['language-math', 'math-display']},
+              children: [{type: 'text', value: 'a'}]
+            }
+          ]
         },
         position: {
           start: {line: 1, column: 1, offset: 0},
@@ -105,9 +111,15 @@ test('mathFromMarkdown', async function (t) {
         meta: 'a&b&c',
         value: '',
         data: {
-          hName: 'div',
-          hProperties: {className: ['math', 'math-display']},
-          hChildren: [{type: 'text', value: ''}]
+          hName: 'pre',
+          hChildren: [
+            {
+              type: 'element',
+              tagName: 'code',
+              properties: {className: ['language-math', 'math-display']},
+              children: [{type: 'text', value: ''}]
+            }
+          ]
         },
         position: {
           start: {line: 1, column: 1, offset: 0},
@@ -130,8 +142,8 @@ test('mathFromMarkdown', async function (t) {
             type: 'inlineMath',
             value: 'a\nb\nb',
             data: {
-              hName: 'span',
-              hProperties: {className: ['math', 'math-inline']},
+              hName: 'code',
+              hProperties: {className: ['language-math', 'math-inline']},
               hChildren: [{type: 'text', value: 'a\nb\nb'}]
             },
             position: {