diff --git a/files/en-us/web/mathml/element/maction/index.md b/files/en-us/web/mathml/element/maction/index.md
index 43ee2fc29604271..99eb5b0a0e97b21 100644
--- a/files/en-us/web/mathml/element/maction/index.md
+++ b/files/en-us/web/mathml/element/maction/index.md
@@ -35,34 +35,43 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
The following example uses the "toggle" `actiontype`:
```html
-
+
+
+
+
+
+
```
+{{ EmbedLiveSample('maction_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/math/index.md b/files/en-us/web/mathml/element/math/index.md
index 7c2eae2f26e7ad9..54a809304bac524 100644
--- a/files/en-us/web/mathml/element/math/index.md
+++ b/files/en-us/web/mathml/element/math/index.md
@@ -31,6 +31,13 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
This example contains two MathML formula. The first one is rendered in its own centered block, taking as much space as needed. The second one is rendered inside the paragraph of text, with reduced size and spacing in order to minimize its height.
+```html hidden
+
+```
+
```html
The infinite sum
@@ -70,6 +77,8 @@ This example contains two MathML formula. The first one is rendered in its own c
```
+{{ EmbedLiveSample('math_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/menclose/index.md b/files/en-us/web/mathml/element/menclose/index.md
index de9535311e744e4..88307fb3f1a0af6 100644
--- a/files/en-us/web/mathml/element/menclose/index.md
+++ b/files/en-us/web/mathml/element/menclose/index.md
@@ -44,7 +44,7 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
```html
-
+x+
@@ -53,6 +53,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
```
+{{ EmbedLiveSample('menclose_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mfenced/index.md b/files/en-us/web/mathml/element/mfenced/index.md
index e3e91e042620a03..f4d093e9b78da62 100644
--- a/files/en-us/web/mathml/element/mfenced/index.md
+++ b/files/en-us/web/mathml/element/mfenced/index.md
@@ -30,12 +30,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
### The last separator is repeated (`,`)
-Sample rendering: ![{a;b;c,d,e}](mfenced01.png)
-
-Rendering in your browser: abcde
-
```html
-
+ab
@@ -46,14 +42,16 @@ Rendering in your browser: a<
```
-### All excess is ignored (`,`)
+Sample rendering: ![{a;b;c,d,e}](mfenced01.png)
-Sample rendering: ![[a|b|c|d|e]](mfenced02.png)
+Rendering in your browser:
-Rendering in your browser: abcde
+{{ EmbedLiveSample('mfenced_example1', 700, 200, "", "") }}
+
+### All excess is ignored (`,`)
```html
-
+ab
@@ -64,6 +62,12 @@ Rendering in your browser:
```
+Sample rendering: ![[a|b|c|d|e]](mfenced02.png)
+
+Rendering in your browser:
+
+{{ EmbedLiveSample('mfenced_example1', 700, 200, "", "") }}
+
## Specifications
The \ element is no longer part of the [latest MathML standard](https://github.com/w3c/mathml/issues/2). Use the {{MathMLElement("mrow")}} and {{MathMLElement("mo")}} elements instead, or, for backwards compatibility, see [mathml-polyfills/mfenced.](https://github.com/mathml-refresh/mathml-polyfills/tree/main/mfenced)
diff --git a/files/en-us/web/mathml/element/mi/index.md b/files/en-us/web/mathml/element/mi/index.md
index cfe607ab33b2943..88c6620a748531c 100644
--- a/files/en-us/web/mathml/element/mi/index.md
+++ b/files/en-us/web/mathml/element/mi/index.md
@@ -20,18 +20,24 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
## Examples
```html
-
+sin
+
+y
+
+F
```
+{{ EmbedLiveSample('mi_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mn/index.md b/files/en-us/web/mathml/element/mn/index.md
index df7885bde606d38..61e2c4753688e53 100644
--- a/files/en-us/web/mathml/element/mn/index.md
+++ b/files/en-us/web/mathml/element/mn/index.md
@@ -20,19 +20,29 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
## Examples
```html
-
+0
+
+1.337
+
+twelve
+
+XVI
+
+2e10
```
+{{ EmbedLiveSample('mi_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mo/index.md b/files/en-us/web/mathml/element/mo/index.md
index 1feade865be9371..7c20130e9a5d55b 100644
--- a/files/en-us/web/mathml/element/mo/index.md
+++ b/files/en-us/web/mathml/element/mo/index.md
@@ -58,16 +58,17 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
```html
-
+5+5
+
+[
-
0;
@@ -78,6 +79,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
```
+{{ EmbedLiveSample('mo_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mover/index.md b/files/en-us/web/mathml/element/mover/index.md
index a2c43a061e08a52..1663d6abc7b32c9 100644
--- a/files/en-us/web/mathml/element/mover/index.md
+++ b/files/en-us/web/mathml/element/mover/index.md
@@ -23,12 +23,15 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
-Sample rendering: ![x+y+z](mover.png)
-
-Rendering in your browser: x+y+z⏞
+```html hidden
+
+```
```html
-
+x
@@ -42,6 +45,8 @@ Rendering in your browser: x+
```
+{{ EmbedLiveSample('mover_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mover/mover.png b/files/en-us/web/mathml/element/mover/mover.png
deleted file mode 100644
index 2e43600c0012daf..000000000000000
Binary files a/files/en-us/web/mathml/element/mover/mover.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/mpadded/index.md b/files/en-us/web/mathml/element/mpadded/index.md
index 9a85f74acb80755..0cd0955b24cb202 100644
--- a/files/en-us/web/mathml/element/mpadded/index.md
+++ b/files/en-us/web/mathml/element/mpadded/index.md
@@ -35,8 +35,9 @@ It is possible to use the keywords `"depth`", `"height"`, and `"width"` as a pse
## Examples
```html
-
-
+
+ x+y
@@ -44,6 +45,8 @@ It is possible to use the keywords `"depth`", `"height"`, and `"width"` as a pse
```
+{{ EmbedLiveSample('mover_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mphantom/index.md b/files/en-us/web/mathml/element/mphantom/index.md
index ac5c87e18c3d1ec..362b207934798cb 100644
--- a/files/en-us/web/mathml/element/mphantom/index.md
+++ b/files/en-us/web/mathml/element/mphantom/index.md
@@ -19,12 +19,8 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
## Examples
-Sample rendering: ![x+ z](mphantom.png)
-
-Rendering in your browser: x+y+z
-
```html
-
+x+
@@ -37,6 +33,8 @@ Rendering in your browser: x+y<
```
+{{ EmbedLiveSample('mphantom_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mphantom/mphantom.png b/files/en-us/web/mathml/element/mphantom/mphantom.png
deleted file mode 100644
index ec1d2d3ccf8e305..000000000000000
Binary files a/files/en-us/web/mathml/element/mphantom/mphantom.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/mroot/index.md b/files/en-us/web/mathml/element/mroot/index.md
index d0f314abdbd9998..804e5d4fb04820d 100644
--- a/files/en-us/web/mathml/element/mroot/index.md
+++ b/files/en-us/web/mathml/element/mroot/index.md
@@ -19,12 +19,15 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
## Examples
-Sample Rendering: ![x](mroot.png)
-
-Rendering in your browser: x3
+```html hidden
+
+```
```html
-
+x3
@@ -32,6 +35,8 @@ Rendering in your browser: x3
```
+{{ EmbedLiveSample('mroot_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mroot/mroot.png b/files/en-us/web/mathml/element/mroot/mroot.png
deleted file mode 100644
index 1b3dac3d468c616..000000000000000
Binary files a/files/en-us/web/mathml/element/mroot/mroot.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/mrow/index.md b/files/en-us/web/mathml/element/mrow/index.md
index b4c1ba9d085c6e4..0eb7847eb712fdb 100644
--- a/files/en-us/web/mathml/element/mrow/index.md
+++ b/files/en-us/web/mathml/element/mrow/index.md
@@ -25,25 +25,35 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
## Examples
```html
-
-
- 1
- +
- 1
-
-
-
- (
+
+
+
+
+ 1
+ +
+ K
+
- x
- ,
- y
+
+ 3
+
+
+ (
+
+
+ x
+ +
+ y
+
+ )
+
- )
-
+
```
+{{ EmbedLiveSample('mrow_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/ms/index.md b/files/en-us/web/mathml/element/ms/index.md
index afa9e8c9194cd5c..0157c92a702e08b 100644
--- a/files/en-us/web/mathml/element/ms/index.md
+++ b/files/en-us/web/mathml/element/ms/index.md
@@ -26,13 +26,13 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
```html
-
-
- abc
-
+
+ abc
```
+{{ EmbedLiveSample('ms_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mspace/index.md b/files/en-us/web/mathml/element/mspace/index.md
index 138f571c4228e52..1b853ec7845f559 100644
--- a/files/en-us/web/mathml/element/mspace/index.md
+++ b/files/en-us/web/mathml/element/mspace/index.md
@@ -29,13 +29,16 @@ Note that some common attributes like `mathcolor`, `mathvariant` or `dir` have n
## Examples
```html
-
-
-
-
+
+ 1
+
+ 2
```
+{{ EmbedLiveSample('mspace_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/msqrt/index.md b/files/en-us/web/mathml/element/msqrt/index.md
index 68c1a9fbbf99350..a4b9960b396d118 100644
--- a/files/en-us/web/mathml/element/msqrt/index.md
+++ b/files/en-us/web/mathml/element/msqrt/index.md
@@ -19,18 +19,23 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
## Examples
-Sample rendering: ![root-x](msqrt.png)
-
-Rendering in your browser: x
+```html hidden
+
+```
```html
-
+x
```
+{{ EmbedLiveSample('mspace_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/msqrt/msqrt.png b/files/en-us/web/mathml/element/msqrt/msqrt.png
deleted file mode 100644
index 34f37885754fc0f..000000000000000
Binary files a/files/en-us/web/mathml/element/msqrt/msqrt.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/mstyle/index.md b/files/en-us/web/mathml/element/mstyle/index.md
index ac526beedd8dc2a..0c40da01db30bf7 100644
--- a/files/en-us/web/mathml/element/mstyle/index.md
+++ b/files/en-us/web/mathml/element/mstyle/index.md
@@ -36,11 +36,20 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
+### Attributes mapped to CSS
+
The following example uses [global attributes](/en-US/docs/Web/MathML/Global_attributes) `displaystyle` and `mathcolor` to respectively override the [`math-style`](/en-US/docs/Web/CSS/math-style) and [`color`](/en-US/docs/Web/CSS/color) of the `` and `` children:
+```html hidden
+
+```
+
```html
-
-
+
+ ∑I
@@ -58,10 +67,14 @@ The following example uses [global attributes](/en-US/docs/Web/MathML/Global_att
```
+{{ EmbedLiveSample('mstyle_example1', 700, 200, "", "") }}
+
+### Legacy script attributes
+
The following example shows a formula with [`font-size`](/en-US/docs/Web/CSS/font-size) set to `128pt`. It contains numbers that are placed in nested superscripts as well as an `` element with legacy attributes `scriptsizemultiplier` and `scriptminsize`. The `font-size` is multiplied by `0.5` when entering each superscript as long as that does not make it smaller than `16pt`.
```html
-
+2
@@ -86,6 +99,8 @@ The following example shows a formula with [`font-size`](/en-US/docs/Web/CSS/fon
```
+{{ EmbedLiveSample('mstyle_example2', 700, 400, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/msub/index.md b/files/en-us/web/mathml/element/msub/index.md
index 0a84bfeca6dc34c..494400dda05e60c 100644
--- a/files/en-us/web/mathml/element/msub/index.md
+++ b/files/en-us/web/mathml/element/msub/index.md
@@ -21,12 +21,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
-Sample rendering: ![x1](msub.png)
-
-Rendering in your browser: X1
-
```html
-
+X1
@@ -34,6 +30,8 @@ Rendering in your browser: X1
```
+{{ EmbedLiveSample('msub_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/msub/msub.png b/files/en-us/web/mathml/element/msub/msub.png
deleted file mode 100644
index 6db4212feda3281..000000000000000
Binary files a/files/en-us/web/mathml/element/msub/msub.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/msubsup/index.md b/files/en-us/web/mathml/element/msubsup/index.md
index 942930377ed3e95..af555f0ac466a79 100644
--- a/files/en-us/web/mathml/element/msubsup/index.md
+++ b/files/en-us/web/mathml/element/msubsup/index.md
@@ -21,12 +21,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
-Sample rendering: ![x1](msubsup.png)
-
-Rendering in your browser: ∫01
-
```html
-
+∫0
@@ -35,6 +31,8 @@ Rendering in your browser: ∫01
```
+{{ EmbedLiveSample('msubsup_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/msubsup/msubsup.png b/files/en-us/web/mathml/element/msubsup/msubsup.png
deleted file mode 100644
index 7d9cb797293b88b..000000000000000
Binary files a/files/en-us/web/mathml/element/msubsup/msubsup.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/msup/index.md b/files/en-us/web/mathml/element/msup/index.md
index 2a88f0d48803de2..fa09c947a840d7d 100644
--- a/files/en-us/web/mathml/element/msup/index.md
+++ b/files/en-us/web/mathml/element/msup/index.md
@@ -21,12 +21,15 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
-Sample rendering: ![x1](msup.png)
-
-Rendering in your browser: X2
+```html hidden
+
+```
```html
-
+X2
@@ -34,6 +37,8 @@ Rendering in your browser: X2
```
+{{ EmbedLiveSample('msup_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/msup/msup.png b/files/en-us/web/mathml/element/msup/msup.png
deleted file mode 100644
index 0d451ba33b3bde2..000000000000000
Binary files a/files/en-us/web/mathml/element/msup/msup.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/mtable/index.md b/files/en-us/web/mathml/element/mtable/index.md
index bcd50ae414ac08b..f17b807c9ffb494 100644
--- a/files/en-us/web/mathml/element/mtable/index.md
+++ b/files/en-us/web/mathml/element/mtable/index.md
@@ -55,10 +55,8 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
### Alignment with row number
-Rendering: ![](mtable-1.png)
-
```html
-
+X=
@@ -78,6 +76,8 @@ Rendering: ![](mtable-1.png)
```
+{{ EmbedLiveSample('mtable_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/mtable/mtable-1.png b/files/en-us/web/mathml/element/mtable/mtable-1.png
deleted file mode 100644
index cc03b7c03f2ae5b..000000000000000
Binary files a/files/en-us/web/mathml/element/mtable/mtable-1.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/mtext/index.md b/files/en-us/web/mathml/element/mtext/index.md
index 9fc0c855739ba56..25d13a81c3249f7 100644
--- a/files/en-us/web/mathml/element/mtext/index.md
+++ b/files/en-us/web/mathml/element/mtext/index.md
@@ -22,13 +22,17 @@ This element accepts the [global MathML attributes](/en-US/docs/Web/MathML/Globa
## Examples
```html
-
+Theorem of Pythagoras
+
+/* comment here */
```
+{{ EmbedLiveSample('mtext_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/munder/index.md b/files/en-us/web/mathml/element/munder/index.md
index 0835b63892a584a..fb80a1591559e01 100644
--- a/files/en-us/web/mathml/element/munder/index.md
+++ b/files/en-us/web/mathml/element/munder/index.md
@@ -23,12 +23,15 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
-Sample rendering: ![x+y+z](munder.png)
-
-Rendering in your browser: x+y+z⏟
+```html hidden
+
+```
```html
-
+x
@@ -42,6 +45,8 @@ Rendering in your browser: x
```
+{{ EmbedLiveSample('munder_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/munder/munder.png b/files/en-us/web/mathml/element/munder/munder.png
deleted file mode 100644
index 0d64cc7d1692687..000000000000000
Binary files a/files/en-us/web/mathml/element/munder/munder.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/munderover/index.md b/files/en-us/web/mathml/element/munderover/index.md
index 487f9622ec3ba46..8cf5e4b9918bc19 100644
--- a/files/en-us/web/mathml/element/munderover/index.md
+++ b/files/en-us/web/mathml/element/munderover/index.md
@@ -28,20 +28,32 @@ This element's attributes include the [global MathML attributes](/en-US/docs/Web
## Examples
-Sample rendering: ![integral-0-infinity](munderover.png)
-
-Rendering in your browser: ∫0∞
+```html hidden
+
+```
```html
-
+
- ∫
- 0
- ∞
+ ∑
+
+ n
+ =
+ 1
+
+
+ +
+ ∞
+
```
+{{ EmbedLiveSample('munderover_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}
diff --git a/files/en-us/web/mathml/element/munderover/munderover.png b/files/en-us/web/mathml/element/munderover/munderover.png
deleted file mode 100644
index 2e6cb529b4f5175..000000000000000
Binary files a/files/en-us/web/mathml/element/munderover/munderover.png and /dev/null differ
diff --git a/files/en-us/web/mathml/element/semantics/index.md b/files/en-us/web/mathml/element/semantics/index.md
index dc8dec1ed3f7d2d..38ae0d354d833ef 100644
--- a/files/en-us/web/mathml/element/semantics/index.md
+++ b/files/en-us/web/mathml/element/semantics/index.md
@@ -44,7 +44,7 @@ By default, only the first child of the `` element is rendered while
## Example
```html
-
+
@@ -80,6 +80,8 @@ By default, only the first child of the `` element is rendered while
```
+{{ EmbedLiveSample('semantics_example', 700, 200, "", "") }}
+
## Specifications
{{Specifications}}