Upgrade to MathJax 4 and use some heuristic to detect inline or center.

Author: pawchen

converter/generator/DocToStaticPagesTransformer.cs

@@ -83,9 +83,16 @@ protected internal override void Transform(IHtmlDocument document, IHtmlHeadElem
         if (img.ClassList.Contains("tex"))
         {
             var span = document.CreateElement<IHtmlSpanElement>();
-
             span.ClassName = "tex";
-            span.TextContent = $@"\({img.AlternativeText}\)";
+
+            if (img.IsOnlyChild() && img.Parent!.ChildNodes.OfType<IText>().All(t => t.Text.IsBlank))
+            {
+                span.TextContent = $@"\[{img.AlternativeText}\]";
+            }
+            else
+            {
+                span.TextContent = $@"\({img.AlternativeText}\)";
+            }
 
             return span;
         }

converter/templates/Layouts/Site.cshtml

@@ -16,7 +16,7 @@
     <link href="~/books/style.css" asp-append-version="true" rel="stylesheet" />
     <script src="~/books/script.js" asp-append-version="true"></script>
 
-    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'></script>
+    <script src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"></script>
 
     @RenderSection("head", required: false)
 </head>

converter/templates/wwwroot/books/script.js

@@ -97,5 +97,8 @@ window.MathJax = {
     options: {
         processHtmlClass: 'tex',
         ignoreHtmlClass: '.*'
+    },
+    chtml: {
+        scale: 1.2 // Boosts font size globally
     }
 };