diff --git a/layouts/_default/_markup/render-codeblock-math.html b/layouts/_default/_markup/render-codeblock-math.html
index 0cadcf928c..b036704879 100644
--- a/layouts/_default/_markup/render-codeblock-math.html
+++ b/layouts/_default/_markup/render-codeblock-math.html
@@ -1,5 +1,6 @@
 {{- partial "shortcodes/math.html" (dict
-  "page"    .Page
-  "content" .Inner
-  "align"  (index .Attributes "align")
+  "page"       .Page
+  "attributes" .Attributes
+  "content"    .Inner
+  "align"      (index .Attributes "align")
 ) }}
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/highlight.html b/layouts/partials/shortcodes/highlight.html
index 1d7228ea06..c9f50116ea 100644
--- a/layouts/partials/shortcodes/highlight.html
+++ b/layouts/partials/shortcodes/highlight.html
@@ -57,7 +57,7 @@
 {{- end }}
 {{- $options = $otherOptions }}
 
-{{- /* separate shortcode attributes from rest and put it back to options */}}
+{{- /* separate shortcode attributes from rest */}}
 {{- $title := "" }}
 {{- $wrap := true }}
 {{- if isset $page.Site.Params "highlightwrap" }}
diff --git a/layouts/partials/shortcodes/math.html b/layouts/partials/shortcodes/math.html
index f4dcff7948..8ed9daadd2 100644
--- a/layouts/partials/shortcodes/math.html
+++ b/layouts/partials/shortcodes/math.html
@@ -5,9 +5,28 @@
 {{- end }}
 {{- $content := .content }}
 {{- $align := .align | default "center" }}
+
+{{- /* separate shortcode attributes from rest */}}
+{{- $attributes := .attributes | default dict }}
+{{- $otherAttributes := dict }}
+{{- range $k, $v := $attributes }}
+  {{- if eq $k "align" }}
+  {{- else }}
+    {{- $otherAttributes = (dict $k $v) | merge $otherAttributes }}
+  {{- end }}
+{{- end }}
+{{- $attributes = $otherAttributes }}
+
+{{- /* enrich attributes */}}
+{{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) "math" slice) " ")) }}
+{{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) (printf "align-%s" $align) slice) " ")) }}
+
 {{- with $page }}
-<span class="math align-{{ $align }}">
-  {{- $content | safeHTML -}}
-</span>
+<span
+  {{- range $k, $v := $attributes }}
+    {{- if $v }}
+      {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+    {{- end }}
+  {{- end }}>{{ $content | safeHTML }}</span>
 {{- .Store.Set "hasMathJax" true }}
 {{- end }}
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 2cc27147b6..e6d38b5a99 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1734,6 +1734,10 @@ input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration { display: none; }
 
+span.math:has(> mjx-container[display]) {
+    display: block;
+}
+
 @supports selector(.math:has(> mjx-container)){
     .math{
         visibility: hidden;
@@ -1742,7 +1746,6 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
         visibility: visible;
     }
 }
-
 .math.align-left > mjx-container{
     text-align: left !important;
 }
@@ -2285,3 +2288,8 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
 .term-list ul > li ~ li:before {
     content: " | "
 }
+
+.red {
+    background-color: red !important;
+    border: 5px solid #d000d0 !important;
+}
\ No newline at end of file