diff --git a/index.js b/index.js
index 3e6be3b..0c7184b 100644
--- a/index.js
+++ b/index.js
@@ -7,6 +7,7 @@
  * @typedef {import('./complex-types').InlineMath} InlineMath
  *
  * @typedef ToOptions
+ *   Configuration to turn an AST into markdown.
  * @property {boolean} [singleDollarTextMath=true]
  *   Whether to support math (text) with a single dollar (`boolean`, default:
  *   `true`).
@@ -46,9 +47,16 @@ export function mathFromMarkdown() {
         meta: null,
         value: '',
         data: {
-          hName: 'div',
-          hProperties: {className: ['math', 'math-display']},
-          hChildren: [{type: 'text', value: ''}]
+          hName: 'pre',
+          hProperties: {},
+          hChildren: [
+            {
+              type: 'element',
+              tagName: 'code',
+              properties: {className: ['language-math', 'math-display']},
+              children: [{type: 'text', value: ''}]
+            }
+          ]
         }
       },
       token
@@ -81,7 +89,7 @@ export function mathFromMarkdown() {
     const node = /** @type {Math} */ (this.exit(token))
     node.value = data
     // @ts-expect-error: we defined it.
-    node.data.hChildren[0].value = data
+    node.data.hChildren[0].children[0].value = data
     this.setData('mathFlowInside')
   }
 
@@ -92,8 +100,8 @@ export function mathFromMarkdown() {
         type: 'inlineMath',
         value: '',
         data: {
-          hName: 'span',
-          hProperties: {className: ['math', 'math-inline']},
+          hName: 'code',
+          hProperties: {className: ['language-math', 'math-inline']},
           hChildren: [{type: 'text', value: ''}]
         }
       },
diff --git a/readme.md b/readme.md
index 0317d2e..c907486 100644
--- a/readme.md
+++ b/readme.md
@@ -53,8 +53,8 @@ When working with `mdast-util-from-markdown`, you must combine this package with
 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
 
@@ -174,8 +174,8 @@ Single dollars work in Pandoc and many other places, but often interfere with
 
 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>`.
 
 ## Syntax tree
 
diff --git a/test.js b/test.js
index 0a8b52f..1fb3245 100644
--- a/test.js
+++ b/test.js
@@ -28,8 +28,8 @@ test('markdown -> mdast', (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: {
@@ -70,9 +70,16 @@ test('markdown -> mdast', (t) => {
       meta: null,
       value: 'a',
       data: {
-        hName: 'div',
-        hProperties: {className: ['math', 'math-display']},
-        hChildren: [{type: 'text', value: 'a'}]
+        hName: 'pre',
+        hProperties: {},
+        hChildren: [
+          {
+            type: 'element',
+            tagName: 'code',
+            properties: {className: ['language-math', 'math-display']},
+            children: [{type: 'text', value: 'a'}]
+          }
+        ]
       },
       position: {
         start: {line: 1, column: 1, offset: 0},
@@ -92,9 +99,16 @@ test('markdown -> mdast', (t) => {
       meta: 'a&b&c',
       value: '',
       data: {
-        hName: 'div',
-        hProperties: {className: ['math', 'math-display']},
-        hChildren: [{type: 'text', value: ''}]
+        hName: 'pre',
+        hProperties: {},
+        hChildren: [
+          {
+            type: 'element',
+            tagName: 'code',
+            properties: {className: ['language-math', 'math-display']},
+            children: [{type: 'text', value: ''}]
+          }
+        ]
       },
       position: {
         start: {line: 1, column: 1, offset: 0},
@@ -116,8 +130,8 @@ test('markdown -> mdast', (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: {