Change to use pre, code elements in HTML

Closes GH-2.

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: {