diff --git a/inst/templates/bootstrap.html b/inst/templates/bootstrap.html
index 8fea7026..170724d7 100644
--- a/inst/templates/bootstrap.html
+++ b/inst/templates/bootstrap.html
@@ -7,6 +7,18 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
     </style>
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script>
+    MathJax = {
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']]
+      },
+      svg: {
+        fontCache: 'global'
+      }
+    };
+    </script>
   </head>
 
   <body>
@@ -24,12 +36,6 @@
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-    <script type="text/x-mathjax-config">
-      MathJax.Hub.Config({
-        tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
-      });
-    </script>
     <script>
     function styleCell(i, j, css_id) {
       var table = document.getElementById("$tinytable_TABLE_ID");
diff --git a/vignettes/tutorial.qmd b/vignettes/tutorial.qmd
index 12101ba8..0b6fb959 100644
--- a/vignettes/tutorial.qmd
+++ b/vignettes/tutorial.qmd
@@ -176,7 +176,7 @@ tt(x, notes = list(a = "Blah.", b = "Blah blah."))
 You can render equations inside tables using the common `$...$` syntax:
 
 ```{r}
-dat <- data.frame(Math = c("$x^2 + y^2 = z^2$", "$\\frac{1}{2}$"))
+dat <- data.frame(Math = c("\\(x^2 + y^2 = z^2\\)", "\\(\\frac{1}{2}\\)"))
 tt(dat)
 ```
 
