From: Vladimír Vondruš <mosra@centrum.cz>
Date: Sun, 15 Sep 2024 21:45:10 +0000 (+0200)
Subject: m.math: render M_MATH_RENDER_AS_CODE with .m-code.m-math classes.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=4f413bcc16c76f4587141f5e9f4d36c244ec89d2;p=blog.git

m.math: render M_MATH_RENDER_AS_CODE with .m-code.m-math classes.

As well as any other that were specified, so even the fallback can
retain coloring and such.
---

diff --git a/css/m-components.css b/css/m-components.css
index 0b46bf6a..b6828a73 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -956,7 +956,8 @@ pre.m-code span.hll {
 }
 
 /* Math block, math figure, inline math, math inside buttons because I am
-   crazy */
+   crazy. If math is rendered as code, it's pre.m-math instead, so this doesn't
+   apply there. */
 div.m-math {
   overflow-x: auto;
   overflow-y: hidden; /* Chrome 62 displays a vertical scrollbar otherwise */
@@ -1019,10 +1020,12 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   background-color: var(--line-color);
 }
 
-/* Colored block, header links in a colored block, colored text, flat label */
+/* Colored block, header links in a colored block, colored text, flat label,
+   colored math as code */
 .m-block.m-default { border-left-color: var(--line-color); }
 .m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
-.m-text.m-default, .m-label.m-flat.m-default {
+.m-text.m-default, .m-label.m-flat.m-default,
+pre.m-math.m-default, code.m-math.m-default {
   color: var(--default-color);
 }
 .m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
@@ -1031,35 +1034,41 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 .m-block.m-primary { border-left-color: var(--primary-color); }
 .m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
 .m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
-.m-text.m-primary, .m-label.m-flat.m-primary {
+.m-text.m-primary, .m-label.m-flat.m-primary,
+pre.m-math.m-primary, code.m-math.m-primary {
   color: var(--primary-color);
 }
 .m-block.m-success { border-left-color: var(--success-color); }
 .m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
 .m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
-.m-text.m-success, .m-label.m-flat.m-success {
+.m-text.m-success, .m-label.m-flat.m-success,
+pre.m-math.m-success, code.m-math.m-success {
   color: var(--success-color);
 }
 .m-block.m-warning { border-left-color: var(--warning-color); }
 .m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
 .m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
-.m-text.m-warning, .m-label.m-flat.m-warning {
+.m-text.m-warning, .m-label.m-flat.m-warning,
+pre.m-math.m-warning, code.m-math.m-warning {
   color: var(--warning-color);
 }
 .m-block.m-danger { border-left-color: var(--danger-color); }
 .m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
 .m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
-.m-text.m-danger, .m-label.m-flat.m-danger {
+.m-text.m-danger, .m-label.m-flat.m-danger,
+pre.m-math.m-danger, code.m-math.m-danger {
   color: var(--danger-color);
 }
 .m-block.m-info { border-left-color: var(--info-color); }
 .m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
 .m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
-.m-text.m-info, .m-label.m-flat.m-info {
+.m-text.m-info, .m-label.m-flat.m-info,
+pre.m-math.m-info, code.m-math.m-info {
   color: var(--info-color);
 }
 .m-block.m-dim { border-left-color: var(--dim-color); }
-.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim,
+pre.m-math.m-dim, code.m-math.m-dim {
   color: var(--dim-color);
 }
 .m-block.m-dim a, .m-text.m-dim a { color: var(--dim-link-color); }
@@ -1330,16 +1339,18 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 
 /* Colored math block, inline math, colored math parts, plots and
    global-colored graphs. Should be before local graph coloring, so the latter
-   can override this. Applies to either div.m-math svg or svg.m.math
-   (div.m-graph svg or svg.m-graph), so using just .m-math (.m-graph). Besides
-   that, using svg anywhere would make it a higher priority, breaking the
-   colors.
+   can override this. Applies to either div.m-graph svg or svg.m-graph, so
+   using just .m-graph. OTOH, .m-math can be also a <pre> and <code>, for which
+   the SVG fill property doesn't apply, so there it's explicitly div.m-math svg
+   and svg.m-math. Besides that, using svg anywhere would make it a higher
+   priority, breaking the colors.
 
    When modifying, use these test pages for a visual check & expand as needed:
     https://mcss.mosra.cz/plugins/math-and-code/test/
     https://mcss.mosra.cz/plugins/plots-and-graphs/test/ */
-.m-math { fill: var(--color); }
-.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
+div.m-math svg, svg.m-math { fill: var(--color); }
+div.m-math.m-default svg, div.m-math svg g.m-default, div.m-math svg rect.m-default,
+svg.m-math.m-default, svg.m-math g.m-default, svg.m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
 .m-graph g.m-edge polygon,
 .m-graph g.m-node:not(.m-flat) ellipse,
@@ -1369,7 +1380,8 @@ div.m-plot svg .m-bar.m-default,
 .m-graph.m-default g.m-cluster polygon {
   stroke: var(--default-color);
 }
-.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
+div.m-math.m-primary svg, div.m-math svg g.m-primary, div.m-math svg rect.m-primary,
+svg.m-math.m-primary, svg.m-math g.m-primary, svg.m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
@@ -1387,7 +1399,8 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-cluster polygon {
   stroke: var(--primary-color);
 }
-.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
+div.m-math.m-success svg, div.m-math svg g.m-success, div.m-math svg rect.m-success,
+svg.m-math.m-success, svg.m-math g.m-success, svg.m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
@@ -1405,7 +1418,8 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-cluster polygon {
   stroke: var(--success-color);
 }
-.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
+div.m-math.m-warning svg, div.m-math svg g.m-warning, div.m-math svg rect.m-warning,
+svg.m-math.m-warning, svg.m-math g.m-warning, svg.m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
@@ -1423,7 +1437,8 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-cluster polygon {
   stroke: var(--warning-color);
 }
-.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
+div.m-math.m-danger svg, div.m-math svg g.m-danger, div.m-math svg rect.m-danger,
+svg.m-math.m-danger, svg.m-math g.m-danger, svg.m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
@@ -1441,7 +1456,8 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-cluster polygon {
   stroke: var(--danger-color);
 }
-.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
+div.m-math.m-info svg, div.m-math svg g.m-info, div.m-math svg rect.m-info,
+svg.m-math.m-info, svg.m-math g.m-info, svg.m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
@@ -1459,7 +1475,8 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-cluster polygon {
   stroke: var(--info-color);
 }
-.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
+div.m-math.m-dim svg, div.m-math svg g.m-dim, div.m-math svg rect.m-dim,
+svg.m-math.m-dim, svg.m-math g.m-dim, svg.m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
@@ -1601,7 +1618,7 @@ div.m-plot svg .m-bar.m-dim,
 /* Spacing after every block element, but not after the last and not when
    m-nopadb is specified. It's div.m-math and div.m-graph instead of .m-math and
    .m-graph because math / graph figures are handled already with
-   figure.m-figure. */
+   figure.m-figure, and there's also the case with pre.m-math. */
 p, ul, ol, dl, blockquote, pre, .m-code-figure, .m-console-figure, hr, .m-note,
 .m-frame, .m-block, div.m-button, div.m-scroll, table.m-table, div.m-image,
 img.m-image, svg.m-image, figure.m-figure, .m-imagegrid, div.m-math,
diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index a3849ea7..e096bf13 100644
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -1239,7 +1239,8 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 }
 .m-block.m-default { border-left-color: #405363; }
 .m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
-.m-text.m-default, .m-label.m-flat.m-default {
+.m-text.m-default, .m-label.m-flat.m-default,
+pre.m-math.m-default, code.m-math.m-default {
   color: #dcdcdc;
 }
 .m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
@@ -1248,35 +1249,41 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 .m-block.m-primary { border-left-color: #a5c9ea; }
 .m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
 .m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
-.m-text.m-primary, .m-label.m-flat.m-primary {
+.m-text.m-primary, .m-label.m-flat.m-primary,
+pre.m-math.m-primary, code.m-math.m-primary {
   color: #a5c9ea;
 }
 .m-block.m-success { border-left-color: #3bd267; }
 .m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
 .m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
-.m-text.m-success, .m-label.m-flat.m-success {
+.m-text.m-success, .m-label.m-flat.m-success,
+pre.m-math.m-success, code.m-math.m-success {
   color: #3bd267;
 }
 .m-block.m-warning { border-left-color: #c7cf2f; }
 .m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
 .m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
-.m-text.m-warning, .m-label.m-flat.m-warning {
+.m-text.m-warning, .m-label.m-flat.m-warning,
+pre.m-math.m-warning, code.m-math.m-warning {
   color: #c7cf2f;
 }
 .m-block.m-danger { border-left-color: #cd3431; }
 .m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
 .m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
-.m-text.m-danger, .m-label.m-flat.m-danger {
+.m-text.m-danger, .m-label.m-flat.m-danger,
+pre.m-math.m-danger, code.m-math.m-danger {
   color: #cd3431;
 }
 .m-block.m-info { border-left-color: #2f83cc; }
 .m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
 .m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
-.m-text.m-info, .m-label.m-flat.m-info {
+.m-text.m-info, .m-label.m-flat.m-info,
+pre.m-math.m-info, code.m-math.m-info {
   color: #2f83cc;
 }
 .m-block.m-dim { border-left-color: #747474; }
-.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim,
+pre.m-math.m-dim, code.m-math.m-dim {
   color: #747474;
 }
 .m-block.m-dim a, .m-text.m-dim a { color: #acacac; }
@@ -1532,8 +1539,9 @@ figure.m-figure.m-dim a { color: #acacac; }
 figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
   color: #747474;
 }
-.m-math { fill: #dcdcdc; }
-.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
+div.m-math svg, svg.m-math { fill: #dcdcdc; }
+div.m-math.m-default svg, div.m-math svg g.m-default, div.m-math svg rect.m-default,
+svg.m-math.m-default, svg.m-math g.m-default, svg.m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
 .m-graph g.m-edge polygon,
 .m-graph g.m-node:not(.m-flat) ellipse,
@@ -1563,7 +1571,8 @@ div.m-plot svg .m-bar.m-default,
 .m-graph.m-default g.m-cluster polygon {
   stroke: #dcdcdc;
 }
-.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
+div.m-math.m-primary svg, div.m-math svg g.m-primary, div.m-math svg rect.m-primary,
+svg.m-math.m-primary, svg.m-math g.m-primary, svg.m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
@@ -1581,7 +1590,8 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-cluster polygon {
   stroke: #a5c9ea;
 }
-.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
+div.m-math.m-success svg, div.m-math svg g.m-success, div.m-math svg rect.m-success,
+svg.m-math.m-success, svg.m-math g.m-success, svg.m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
@@ -1599,7 +1609,8 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-cluster polygon {
   stroke: #3bd267;
 }
-.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
+div.m-math.m-warning svg, div.m-math svg g.m-warning, div.m-math svg rect.m-warning,
+svg.m-math.m-warning, svg.m-math g.m-warning, svg.m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
@@ -1617,7 +1628,8 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-cluster polygon {
   stroke: #c7cf2f;
 }
-.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
+div.m-math.m-danger svg, div.m-math svg g.m-danger, div.m-math svg rect.m-danger,
+svg.m-math.m-danger, svg.m-math g.m-danger, svg.m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
@@ -1635,7 +1647,8 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-cluster polygon {
   stroke: #cd3431;
 }
-.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
+div.m-math.m-info svg, div.m-math svg g.m-info, div.m-math svg rect.m-info,
+svg.m-math.m-info, svg.m-math g.m-info, svg.m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
@@ -1653,7 +1666,8 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-cluster polygon {
   stroke: #2f83cc;
 }
-.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
+div.m-math.m-dim svg, div.m-math svg g.m-dim, div.m-math svg rect.m-dim,
+svg.m-math.m-dim, svg.m-math g.m-dim, svg.m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index b8e93f56..954a6406 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1239,7 +1239,8 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 }
 .m-block.m-default { border-left-color: #405363; }
 .m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
-.m-text.m-default, .m-label.m-flat.m-default {
+.m-text.m-default, .m-label.m-flat.m-default,
+pre.m-math.m-default, code.m-math.m-default {
   color: #dcdcdc;
 }
 .m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
@@ -1248,35 +1249,41 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 .m-block.m-primary { border-left-color: #a5c9ea; }
 .m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
 .m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
-.m-text.m-primary, .m-label.m-flat.m-primary {
+.m-text.m-primary, .m-label.m-flat.m-primary,
+pre.m-math.m-primary, code.m-math.m-primary {
   color: #a5c9ea;
 }
 .m-block.m-success { border-left-color: #3bd267; }
 .m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
 .m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
-.m-text.m-success, .m-label.m-flat.m-success {
+.m-text.m-success, .m-label.m-flat.m-success,
+pre.m-math.m-success, code.m-math.m-success {
   color: #3bd267;
 }
 .m-block.m-warning { border-left-color: #c7cf2f; }
 .m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
 .m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
-.m-text.m-warning, .m-label.m-flat.m-warning {
+.m-text.m-warning, .m-label.m-flat.m-warning,
+pre.m-math.m-warning, code.m-math.m-warning {
   color: #c7cf2f;
 }
 .m-block.m-danger { border-left-color: #cd3431; }
 .m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
 .m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
-.m-text.m-danger, .m-label.m-flat.m-danger {
+.m-text.m-danger, .m-label.m-flat.m-danger,
+pre.m-math.m-danger, code.m-math.m-danger {
   color: #cd3431;
 }
 .m-block.m-info { border-left-color: #2f83cc; }
 .m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
 .m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
-.m-text.m-info, .m-label.m-flat.m-info {
+.m-text.m-info, .m-label.m-flat.m-info,
+pre.m-math.m-info, code.m-math.m-info {
   color: #2f83cc;
 }
 .m-block.m-dim { border-left-color: #747474; }
-.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim,
+pre.m-math.m-dim, code.m-math.m-dim {
   color: #747474;
 }
 .m-block.m-dim a, .m-text.m-dim a { color: #acacac; }
@@ -1532,8 +1539,9 @@ figure.m-figure.m-dim a { color: #acacac; }
 figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
   color: #747474;
 }
-.m-math { fill: #dcdcdc; }
-.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
+div.m-math svg, svg.m-math { fill: #dcdcdc; }
+div.m-math.m-default svg, div.m-math svg g.m-default, div.m-math svg rect.m-default,
+svg.m-math.m-default, svg.m-math g.m-default, svg.m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
 .m-graph g.m-edge polygon,
 .m-graph g.m-node:not(.m-flat) ellipse,
@@ -1563,7 +1571,8 @@ div.m-plot svg .m-bar.m-default,
 .m-graph.m-default g.m-cluster polygon {
   stroke: #dcdcdc;
 }
-.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
+div.m-math.m-primary svg, div.m-math svg g.m-primary, div.m-math svg rect.m-primary,
+svg.m-math.m-primary, svg.m-math g.m-primary, svg.m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
@@ -1581,7 +1590,8 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-cluster polygon {
   stroke: #a5c9ea;
 }
-.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
+div.m-math.m-success svg, div.m-math svg g.m-success, div.m-math svg rect.m-success,
+svg.m-math.m-success, svg.m-math g.m-success, svg.m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
@@ -1599,7 +1609,8 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-cluster polygon {
   stroke: #3bd267;
 }
-.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
+div.m-math.m-warning svg, div.m-math svg g.m-warning, div.m-math svg rect.m-warning,
+svg.m-math.m-warning, svg.m-math g.m-warning, svg.m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
@@ -1617,7 +1628,8 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-cluster polygon {
   stroke: #c7cf2f;
 }
-.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
+div.m-math.m-danger svg, div.m-math svg g.m-danger, div.m-math svg rect.m-danger,
+svg.m-math.m-danger, svg.m-math g.m-danger, svg.m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
@@ -1635,7 +1647,8 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-cluster polygon {
   stroke: #cd3431;
 }
-.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
+div.m-math.m-info svg, div.m-math svg g.m-info, div.m-math svg rect.m-info,
+svg.m-math.m-info, svg.m-math g.m-info, svg.m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
@@ -1653,7 +1666,8 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-cluster polygon {
   stroke: #2f83cc;
 }
-.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
+div.m-math.m-dim svg, div.m-math svg g.m-dim, div.m-math svg rect.m-dim,
+svg.m-math.m-dim, svg.m-math g.m-dim, svg.m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index 73fc838a..a45424cb 100644
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -1239,7 +1239,8 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 }
 .m-block.m-default { border-left-color: #f7e3db; }
 .m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
-.m-text.m-default, .m-label.m-flat.m-default {
+.m-text.m-default, .m-label.m-flat.m-default,
+pre.m-math.m-default, code.m-math.m-default {
   color: #000000;
 }
 .m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
@@ -1248,35 +1249,41 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 .m-block.m-primary { border-left-color: #cb4b16; }
 .m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
 .m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
-.m-text.m-primary, .m-label.m-flat.m-primary {
+.m-text.m-primary, .m-label.m-flat.m-primary,
+pre.m-math.m-primary, code.m-math.m-primary {
   color: #cb4b16;
 }
 .m-block.m-success { border-left-color: #31c25d; }
 .m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
 .m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
-.m-text.m-success, .m-label.m-flat.m-success {
+.m-text.m-success, .m-label.m-flat.m-success,
+pre.m-math.m-success, code.m-math.m-success {
   color: #31c25d;
 }
 .m-block.m-warning { border-left-color: #c7cf2f; }
 .m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
 .m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
-.m-text.m-warning, .m-label.m-flat.m-warning {
+.m-text.m-warning, .m-label.m-flat.m-warning,
+pre.m-math.m-warning, code.m-math.m-warning {
   color: #c7cf2f;
 }
 .m-block.m-danger { border-left-color: #f60000; }
 .m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
 .m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
-.m-text.m-danger, .m-label.m-flat.m-danger {
+.m-text.m-danger, .m-label.m-flat.m-danger,
+pre.m-math.m-danger, code.m-math.m-danger {
   color: #f60000;
 }
 .m-block.m-info { border-left-color: #2e7dc5; }
 .m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
 .m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
-.m-text.m-info, .m-label.m-flat.m-info {
+.m-text.m-info, .m-label.m-flat.m-info,
+pre.m-math.m-info, code.m-math.m-info {
   color: #2e7dc5;
 }
 .m-block.m-dim { border-left-color: #bdbdbd; }
-.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim,
+pre.m-math.m-dim, code.m-math.m-dim {
   color: #bdbdbd;
 }
 .m-block.m-dim a, .m-text.m-dim a { color: #c0c0c0; }
@@ -1532,8 +1539,9 @@ figure.m-figure.m-dim a { color: #c0c0c0; }
 figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
   color: #949494;
 }
-.m-math { fill: #000000; }
-.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
+div.m-math svg, svg.m-math { fill: #000000; }
+div.m-math.m-default svg, div.m-math svg g.m-default, div.m-math svg rect.m-default,
+svg.m-math.m-default, svg.m-math g.m-default, svg.m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
 .m-graph g.m-edge polygon,
 .m-graph g.m-node:not(.m-flat) ellipse,
@@ -1563,7 +1571,8 @@ div.m-plot svg .m-bar.m-default,
 .m-graph.m-default g.m-cluster polygon {
   stroke: #000000;
 }
-.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
+div.m-math.m-primary svg, div.m-math svg g.m-primary, div.m-math svg rect.m-primary,
+svg.m-math.m-primary, svg.m-math g.m-primary, svg.m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
@@ -1581,7 +1590,8 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-cluster polygon {
   stroke: #cb4b16;
 }
-.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
+div.m-math.m-success svg, div.m-math svg g.m-success, div.m-math svg rect.m-success,
+svg.m-math.m-success, svg.m-math g.m-success, svg.m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
@@ -1599,7 +1609,8 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-cluster polygon {
   stroke: #31c25d;
 }
-.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
+div.m-math.m-warning svg, div.m-math svg g.m-warning, div.m-math svg rect.m-warning,
+svg.m-math.m-warning, svg.m-math g.m-warning, svg.m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
@@ -1617,7 +1628,8 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-cluster polygon {
   stroke: #c7cf2f;
 }
-.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
+div.m-math.m-danger svg, div.m-math svg g.m-danger, div.m-math svg rect.m-danger,
+svg.m-math.m-danger, svg.m-math g.m-danger, svg.m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
@@ -1635,7 +1647,8 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-cluster polygon {
   stroke: #f60000;
 }
-.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
+div.m-math.m-info svg, div.m-math svg g.m-info, div.m-math svg rect.m-info,
+svg.m-math.m-info, svg.m-math g.m-info, svg.m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
@@ -1653,7 +1666,8 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-cluster polygon {
   stroke: #2e7dc5;
 }
-.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
+div.m-math.m-dim svg, div.m-math svg g.m-dim, div.m-math svg rect.m-dim,
+svg.m-math.m-dim, svg.m-math g.m-dim, svg.m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index e57e87bc..8347f643 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1239,7 +1239,8 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 }
 .m-block.m-default { border-left-color: #f7e3db; }
 .m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
-.m-text.m-default, .m-label.m-flat.m-default {
+.m-text.m-default, .m-label.m-flat.m-default,
+pre.m-math.m-default, code.m-math.m-default {
   color: #000000;
 }
 .m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
@@ -1248,35 +1249,41 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
 .m-block.m-primary { border-left-color: #cb4b16; }
 .m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
 .m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
-.m-text.m-primary, .m-label.m-flat.m-primary {
+.m-text.m-primary, .m-label.m-flat.m-primary,
+pre.m-math.m-primary, code.m-math.m-primary {
   color: #cb4b16;
 }
 .m-block.m-success { border-left-color: #31c25d; }
 .m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
 .m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
-.m-text.m-success, .m-label.m-flat.m-success {
+.m-text.m-success, .m-label.m-flat.m-success,
+pre.m-math.m-success, code.m-math.m-success {
   color: #31c25d;
 }
 .m-block.m-warning { border-left-color: #c7cf2f; }
 .m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
 .m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
-.m-text.m-warning, .m-label.m-flat.m-warning {
+.m-text.m-warning, .m-label.m-flat.m-warning,
+pre.m-math.m-warning, code.m-math.m-warning {
   color: #c7cf2f;
 }
 .m-block.m-danger { border-left-color: #f60000; }
 .m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
 .m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
-.m-text.m-danger, .m-label.m-flat.m-danger {
+.m-text.m-danger, .m-label.m-flat.m-danger,
+pre.m-math.m-danger, code.m-math.m-danger {
   color: #f60000;
 }
 .m-block.m-info { border-left-color: #2e7dc5; }
 .m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
 .m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
-.m-text.m-info, .m-label.m-flat.m-info {
+.m-text.m-info, .m-label.m-flat.m-info,
+pre.m-math.m-info, code.m-math.m-info {
   color: #2e7dc5;
 }
 .m-block.m-dim { border-left-color: #bdbdbd; }
-.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim,
+pre.m-math.m-dim, code.m-math.m-dim {
   color: #bdbdbd;
 }
 .m-block.m-dim a, .m-text.m-dim a { color: #c0c0c0; }
@@ -1532,8 +1539,9 @@ figure.m-figure.m-dim a { color: #c0c0c0; }
 figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-dim a:active {
   color: #949494;
 }
-.m-math { fill: #000000; }
-.m-math.m-default, .m-math g.m-default, .m-math rect.m-default,
+div.m-math svg, svg.m-math { fill: #000000; }
+div.m-math.m-default svg, div.m-math svg g.m-default, div.m-math svg rect.m-default,
+svg.m-math.m-default, svg.m-math g.m-default, svg.m-math rect.m-default,
 div.m-plot svg .m-bar.m-default,
 .m-graph g.m-edge polygon,
 .m-graph g.m-node:not(.m-flat) ellipse,
@@ -1563,7 +1571,8 @@ div.m-plot svg .m-bar.m-default,
 .m-graph.m-default g.m-cluster polygon {
   stroke: #000000;
 }
-.m-math.m-primary, .m-math g.m-primary, .m-math rect.m-primary,
+div.m-math.m-primary svg, div.m-math svg g.m-primary, div.m-math svg rect.m-primary,
+svg.m-math.m-primary, svg.m-math g.m-primary, svg.m-math rect.m-primary,
 div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-edge polygon,
 .m-graph.m-primary g.m-node:not(.m-flat) ellipse,
@@ -1581,7 +1590,8 @@ div.m-plot svg .m-bar.m-primary,
 .m-graph.m-primary g.m-cluster polygon {
   stroke: #cb4b16;
 }
-.m-math.m-success, .m-math g.m-success, .m-math rect.m-success,
+div.m-math.m-success svg, div.m-math svg g.m-success, div.m-math svg rect.m-success,
+svg.m-math.m-success, svg.m-math g.m-success, svg.m-math rect.m-success,
 div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-edge polygon,
 .m-graph.m-success g.m-node:not(.m-flat) ellipse,
@@ -1599,7 +1609,8 @@ div.m-plot svg .m-bar.m-success,
 .m-graph.m-success g.m-cluster polygon {
   stroke: #31c25d;
 }
-.m-math.m-warning, .m-math g.m-warning, .m-math rect.m-warning,
+div.m-math.m-warning svg, div.m-math svg g.m-warning, div.m-math svg rect.m-warning,
+svg.m-math.m-warning, svg.m-math g.m-warning, svg.m-math rect.m-warning,
 div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-edge polygon,
 .m-graph.m-warning g.m-node:not(.m-flat) ellipse,
@@ -1617,7 +1628,8 @@ div.m-plot svg .m-bar.m-warning,
 .m-graph.m-warning g.m-cluster polygon {
   stroke: #c7cf2f;
 }
-.m-math.m-danger, .m-math g.m-danger, .m-math rect.m-danger,
+div.m-math.m-danger svg, div.m-math svg g.m-danger, div.m-math svg rect.m-danger,
+svg.m-math.m-danger, svg.m-math g.m-danger, svg.m-math rect.m-danger,
 div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-edge polygon,
 .m-graph.m-danger g.m-node:not(.m-flat) ellipse,
@@ -1635,7 +1647,8 @@ div.m-plot svg .m-bar.m-danger,
 .m-graph.m-danger g.m-cluster polygon {
   stroke: #f60000;
 }
-.m-math.m-info, .m-math g.m-info, .m-math rect.m-info,
+div.m-math.m-info svg, div.m-math svg g.m-info, div.m-math svg rect.m-info,
+svg.m-math.m-info, svg.m-math g.m-info, svg.m-math rect.m-info,
 div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-edge polygon,
 .m-graph.m-info g.m-node:not(.m-flat) ellipse,
@@ -1653,7 +1666,8 @@ div.m-plot svg .m-bar.m-info,
 .m-graph.m-info g.m-cluster polygon {
   stroke: #2e7dc5;
 }
-.m-math.m-dim, .m-math g.m-dim, .m-math rect.m-dim,
+div.m-math.m-dim svg, div.m-math svg g.m-dim, div.m-math svg rect.m-dim,
+svg.m-math.m-dim, svg.m-math g.m-dim, svg.m-math rect.m-dim,
 div.m-plot svg .m-bar.m-dim,
 .m-graph.m-dim g.m-edge polygon,
 .m-graph.m-dim g.m-node:not(.m-flat) ellipse,
diff --git a/doc/plugins/math-and-code-test.rst b/doc/plugins/math-and-code-test.rst
index b40214f4..7ab4ed37 100644
--- a/doc/plugins/math-and-code-test.rst
+++ b/doc/plugins/math-and-code-test.rst
@@ -45,6 +45,23 @@ Test
 .. role:: math-dim(math)
     :class: m-dim
 
+.. role:: code-math(code)
+    :class: m-math
+.. role:: code-math-default(code)
+    :class: m-math m-default
+.. role:: code-math-primary(code)
+    :class: m-math m-primary
+.. role:: code-math-success(code)
+    :class: m-math m-success
+.. role:: code-math-warning(code)
+    :class: m-math m-warning
+.. role:: code-math-danger(code)
+    :class: m-math m-danger
+.. role:: code-math-info(code)
+    :class: m-math m-info
+.. role:: code-math-dim(code)
+    :class: m-math m-dim
+
 Math
 ====
 
@@ -281,3 +298,103 @@ the same but inline instead of a block.
         .. class:: m-text-center m-noindent
 
         :math-danger:`{\color{m-dim} a^2 + b^2 =} ~ c^2`
+
+Math as code
+------------
+
+Block and inline math, same as above. Since the ``M_MATH_RENDER_AS_CODE``
+option is global, here it's faked with code blocks that have classes applied.
+
+.. container:: m-row
+
+    .. container:: m-col-m-4
+
+        .. code::
+            :class: m-math
+
+            a^2 + b^2 = c^2
+
+        .. class:: m-text-center m-noindent
+
+        :code-math:`a^2 + b^2 = c^2`
+
+    .. container:: m-col-m-4
+
+        .. code::
+            :class: m-math m-default
+
+            a^2 + b^2 = c^2
+
+        .. class:: m-text-center m-noindent
+
+        :code-math-default:`a^2 + b^2 = c^2`
+
+    .. container:: m-col-m-4
+
+        .. code::
+            :class: m-math m-primary
+
+            a^2 + b^2 = c^2
+
+        .. class:: m-text-center m-noindent
+
+        :code-math-primary:`a^2 + b^2 = c^2`
+
+.. container:: m-row
+
+    .. container:: m-col-m-4
+
+        .. code::
+            :class: m-math m-success
+
+            a^2 + b^2 = c^2
+
+        .. class:: m-text-center m-noindent
+
+        :code-math-success:`a^2 + b^2 = c^2`
+
+    .. container:: m-col-m-4
+
+        .. code::
+            :class: m-math m-warning
+
+            a^2 + b^2 = c^2
+
+        .. class:: m-text-center m-noindent
+
+        :code-math-warning:`a^2 + b^2 = c^2`
+
+    .. container:: m-col-m-4
+
+        .. code::
+            :class: m-math m-danger
+
+            a^2 + b^2 = c^2
+
+        .. class:: m-text-center m-noindent
+
+        :code-math-danger:`a^2 + b^2 = c^2`
+
+.. container:: m-row
+
+    .. container:: m-col-m-4 m-push-m-2
+
+        .. code::
+            :class: m-math m-info
+
+            a^2 + b^2 = c^2
+
+        .. class:: m-text-center m-noindent
+
+        :code-math-info:`a^2 + b^2 = c^2`
+
+    .. container:: m-col-m-4 m-push-m-2
+
+        .. code::
+            :class: m-math m-dim
+
+            a^2 + b^2 = c^2
+
+        .. class:: m-text-center m-noindent
+
+        :code-math-dim:`a^2 + b^2 = c^2`
diff --git a/doc/plugins/math-and-code.rst b/doc/plugins/math-and-code.rst
index cf805dcc..602e8418 100644
--- a/doc/plugins/math-and-code.rst
+++ b/doc/plugins/math-and-code.rst
@@ -241,6 +241,12 @@ to disable caching.
             logging.warning("LaTeX not found, fallback to rendering math as code")
             M_MATH_RENDER_AS_CODE = True
 
+    With :py:`M_MATH_RENDER_AS_CODE` enabled, math blocks are put into
+    :html:`<pre class="m-code m-math">` and inline math into
+    :html:`<code class="m-code m-math">`. Any additionally specified CSS
+    classes are included in this case as well, so the code blocks retain also
+    any coloring, if present.
+
 `Math figure`_
 --------------
 
diff --git a/documentation/doxygen.py b/documentation/doxygen.py
index d06561cf..93accf17 100755
--- a/documentation/doxygen.py
+++ b/documentation/doxygen.py
@@ -1400,7 +1400,7 @@ def parse_desc_internal(state: State, element: ET.Element, immediate_parent: ET.
 
             # Fallback rendering as code requested
             if state.config['M_MATH_RENDER_AS_CODE']:
-                out.parsed += '<{0} class="m-code{1}{2}">{3}</{0}>'.format(
+                out.parsed += '<{0} class="m-code m-math{1}{2}">{3}</{0}>'.format(
                     'pre' if formula_block else 'code',
                     ' ' + add_css_class if formula_block and add_css_class else '',
                     # TODO try w/ this removed
diff --git a/documentation/test_doxygen/contents_math_code_fallback/index-191.html b/documentation/test_doxygen/contents_math_code_fallback/index-191.html
index d8118914..5b84e7a5 100644
--- a/documentation/test_doxygen/contents_math_code_fallback/index-191.html
+++ b/documentation/test_doxygen/contents_math_code_fallback/index-191.html
@@ -22,7 +22,7 @@
         <h1>
           My Project
         </h1>
-<p>Here&#x27;s a block formula:</p><pre class="m-code">\[ \hat q = [\boldsymbol 0, 1] + \epsilon [\frac{\boldsymbol v}{2}, 0] \]</pre><p>And <code class="m-code">$ \hat q $</code> is how quaternion is denoted. A green formula should have the CSS class applied:</p><pre class="m-code m-text m-success">\[ \pi^2 \]</pre><p>A yellow <code class="m-code m-text m-warning">$ \Sigma $</code> inline formula as well.</p>
+<p>Here&#x27;s a block formula:</p><pre class="m-code m-math">\[ \hat q = [\boldsymbol 0, 1] + \epsilon [\frac{\boldsymbol v}{2}, 0] \]</pre><p>And <code class="m-code m-math">$ \hat q $</code> is how quaternion is denoted. A green formula should have the CSS class applied:</p><pre class="m-code m-math m-success">\[ \pi^2 \]</pre><p>A yellow <code class="m-code m-math m-warning">$ \Sigma $</code> inline formula as well.</p>
       </div>
     </div>
   </div>
diff --git a/documentation/test_doxygen/contents_math_code_fallback/index.html b/documentation/test_doxygen/contents_math_code_fallback/index.html
index c69cfe88..f4a0fcef 100644
--- a/documentation/test_doxygen/contents_math_code_fallback/index.html
+++ b/documentation/test_doxygen/contents_math_code_fallback/index.html
@@ -22,11 +22,11 @@
         <h1>
           My Project
         </h1>
-<p>Here&#x27;s a block formula:</p><pre class="m-code">\[
+<p>Here&#x27;s a block formula:</p><pre class="m-code m-math">\[
     \hat q = [\boldsymbol 0, 1] + \epsilon [\frac{\boldsymbol v}{2}, 0]
-\]</pre><p>And <code class="m-code">$ \hat q $</code> is how quaternion is denoted. A green formula should have the CSS class applied:</p><pre class="m-code m-text m-success">\[
+\]</pre><p>And <code class="m-code m-math">$ \hat q $</code> is how quaternion is denoted. A green formula should have the CSS class applied:</p><pre class="m-code m-math m-success">\[
     \pi^2
-\]</pre><p>A yellow <code class="m-code m-text m-warning">$ \Sigma $</code> inline formula as well.</p>
+\]</pre><p>A yellow <code class="m-code m-math m-warning">$ \Sigma $</code> inline formula as well.</p>
       </div>
     </div>
   </div>
diff --git a/documentation/test_doxygen/contents_math_code_fallback/input.dox b/documentation/test_doxygen/contents_math_code_fallback/input.dox
index 433eec12..a6be00a8 100644
--- a/documentation/test_doxygen/contents_math_code_fallback/input.dox
+++ b/documentation/test_doxygen/contents_math_code_fallback/input.dox
@@ -9,11 +9,11 @@ Here's a block formula:
 And @f$ \hat q @f$ is how quaternion is denoted. A green formula should have
 the CSS class applied:
 
-@m_class{m-text m-success}
+@m_class{m-success}
 
 @f[
     \pi^2
 @f]
 
-A yellow @m_class{m-text m-warning} @f$ \Sigma @f$ inline formula as well.
+A yellow @m_class{m-warning} @f$ \Sigma @f$ inline formula as well.
 */
diff --git a/plugins/m/math.py b/plugins/m/math.py
index 8d645672..6cad98c2 100644
--- a/plugins/m/math.py
+++ b/plugins/m/math.py
@@ -73,9 +73,14 @@ class Math(rst.Directive):
     has_content = True
 
     def run(self):
-        set_classes(self.options)
         self.assert_has_content()
 
+        set_classes(self.options)
+        classes = []
+        if 'classes' in self.options:
+            classes += self.options['classes']
+            del self.options['classes']
+
         parent = self.state.parent
 
         # Fallback rendering as code requested
@@ -86,7 +91,7 @@ class Math(rst.Directive):
                 parent['classes'][parent['classes'].index('m-figure')] = 'm-code-figure'
 
             content = nodes.raw('', html.escape('\n'.join(self.content)), format='html')
-            pre = nodes.literal_block('')
+            pre = nodes.literal_block('', classes=['m-code', 'm-math'] + classes)
             pre.append(content)
             return [pre]
 
@@ -127,7 +132,7 @@ def math(role, rawtext, text, lineno, inliner, options={}, content=[]):
             del options['classes']
 
         content = nodes.raw('', html.escape(utils.unescape(text)), format='html')
-        node = nodes.literal(rawtext, '', **options)
+        node = nodes.literal(rawtext, '', classes=['m-code', 'm-math'] + classes, **options)
         node.append(content)
         return [node], []
 
diff --git a/plugins/m/test/math/page-code-fallback.html b/plugins/m/test/math/page-code-fallback.html
index 32203a2a..0b779771 100644
--- a/plugins/m/test/math/page-code-fallback.html
+++ b/plugins/m/test/math/page-code-fallback.html
@@ -23,31 +23,31 @@
       <div class="m-col-l-10 m-push-l-1">
         <h1>m.math</h1>
 <!-- content -->
-<p>Inline colored math <code>a^2</code> and colored math block:</p>
-<pre>a^2 + b^2 = c^2</pre>
-<p>Colored parts of inline <code>b^2 - \color{m-info}{4ac}</code> and block formulas:</p>
-<pre>\frac{-b \pm \color{m-success} \sqrt{D}}{2a}</pre>
+<p>Inline colored math <code class="m-code m-math m-primary">a^2</code> and colored math block:</p>
+<pre class="m-code m-math m-success">a^2 + b^2 = c^2</pre>
+<p>Colored parts of inline <code class="m-code m-math">b^2 - \color{m-info}{4ac}</code> and block formulas:</p>
+<pre class="m-code m-math">\frac{-b \pm \color{m-success} \sqrt{D}}{2a}</pre>
 <p>Properly align <em>huge</em> formulas vertically on a line:
-<code>\hat q^{-1} = \frac{\hat q^*}{|\hat q|^2}</code>
-and make sure there's enough space for all the complex <code>W</code> things between
-the lines <code>W = \sum_{i=0}^{n} \frac{w_i}{h_i}</code> because
-<code>Y = \sum_{i=0}^{n} B</code></p>
-<p>The <code>\cfrac</code> thing doesn't align well: <code>W = \sum_{i=0}^{n} \cfrac{w_i}{h_i}</code></p>
+<code class="m-code m-math">\hat q^{-1} = \frac{\hat q^*}{|\hat q|^2}</code>
+and make sure there's enough space for all the complex <code class="m-code m-math">W</code> things between
+the lines <code class="m-code m-math">W = \sum_{i=0}^{n} \frac{w_i}{h_i}</code> because
+<code class="m-code m-math">Y = \sum_{i=0}^{n} B</code></p>
+<p>The <code>\cfrac</code> thing doesn't align well: <code class="m-code m-math">W = \sum_{i=0}^{n} \cfrac{w_i}{h_i}</code></p>
 <p>Properly escape the formula source:</p>
-<pre>\begin{array}{rcl}
+<pre class="m-code m-math">\begin{array}{rcl}
     x &amp; = &amp; 1
 \end{array}</pre>
-<p class="m-text m-big">Formulas <code>a^2</code> in big text are big.</p>
-<p class="m-text m-small">Formulas <code>a^2</code> in small text are small.</p>
+<p class="m-text m-big">Formulas <code class="m-code m-math">a^2</code> in big text are big.</p>
+<p class="m-text m-small">Formulas <code class="m-code m-math">a^2</code> in small text are small.</p>
 <figure class="m-code-figure">
-<pre>a^2 + b^2 = c^2</pre>
+<pre class="m-code m-math m-info">a^2 + b^2 = c^2</pre>
 <figcaption>This is a title.</figcaption>
 <p>This is a description.</p>
 </figure>
 <figure class="m-code-figure">
-<pre>a^2 + b^2 = c^2</pre>
+<pre class="m-code m-math">a^2 + b^2 = c^2</pre>
 <p>The math below should not be styled as a part of the figure:</p>
-<pre>a^2 + b^2 = c^2</pre>
+<pre class="m-code m-math m-danger">a^2 + b^2 = c^2</pre>
 </figure>
 <!-- /content -->
       </div>