Render MathJax in clarifications

vmcj · vmcj · commit e90e39ce3c0e · 2025-11-28T17:09:29.000+01:00
diff --git a/webapp/public/js/domjudge.js b/webapp/public/js/domjudge.js
@@ -945,6 +945,7 @@ function previewClarification($input, $previewDiv) {
             }
         }).done(function (data) {
             $previewDiv.html(data.html);
+            MathJax.typesetPromise([document.getElementById($previewDiv[0].id)]);
         });
     }
 }
diff --git a/webapp/public/js/tex-chtml.js b/webapp/public/js/tex-chtml.js
@@ -0,0 +1 @@
+../../node_modules/mathjax/tex-chtml.js
diff --git a/webapp/public/mathjax b/webapp/public/mathjax
@@ -0,0 +1 @@
+../node_modules/mathjax
diff --git a/webapp/public/mathjaxfonts b/webapp/public/mathjaxfonts
@@ -0,0 +1 @@
+../node_modules/@mathjax/mathjax-newcm-font/chtml/woff2
diff --git a/webapp/templates/base.html.twig b/webapp/templates/base.html.twig
@@ -13,6 +13,7 @@
     <script src="{{ asset("js/jquery.min.js") }}"></script>
     <script src="{{ asset("js/jquery.debounce.min.js") }}"></script>
     <script src="{{ asset("js/bootstrap.bundle.min.js") }}"></script>
+    {% include 'partials/mathjaxhead.html.twig' %}
 
     <script src="{{ asset("js/domjudge.js") }}"></script>
     {% for file in customAssetFiles('js') %}
diff --git a/webapp/templates/jury/export/layout.html.twig b/webapp/templates/jury/export/layout.html.twig
@@ -108,6 +108,7 @@
             color: darkgrey;
         }
     </style>
+    {% include 'partials/mathjaxhead.html.twig' %}
 </head>
 <body>
 <main role="main" class="">
diff --git a/webapp/templates/partials/mathjaxhead.html.twig b/webapp/templates/partials/mathjaxhead.html.twig
@@ -0,0 +1,23 @@
+<script>
+    window.MathJax = {
+        tex: {
+            inlineMath: [['$', '$']]
+        },
+        chtml: {
+            fontURL: '{{ app.request.basePath }}/mathjaxfonts',
+            scale: 1.0
+        },
+        loader: {
+            paths: {
+                mathjax: '{{ app.request.basePath }}/mathjax',
+                '@mathjax': '{{ app.request.basePath }}/mathjax'
+            },
+            // Optional: reinforce that @mathjax modules resolve under the same base
+            source: {
+                '@mathjax': '[mathjax]'
+            },
+            load: ['input/tex', 'output/chtml']
+        }
+    };
+</script>
+<script src="{{ app.request.basePath }}/mathjax/tex-chtml.js"></script>
diff --git a/webapp/templates/team/partials/clarification_content.html.twig b/webapp/templates/team/partials/clarification_content.html.twig
@@ -24,3 +24,7 @@
         {{ form_end(form) }}
     </div>
 </div>
+
+<script>
+    MathJax.typeset([document.getElementsByClassName('card-body')]);
+</script>
diff --git a/webapp/templates/team/partials/clarification_list.html.twig b/webapp/templates/team/partials/clarification_list.html.twig
@@ -40,15 +40,15 @@
                     </td>
                 {% endif %}
 
-                <td>
+                <td class="clarification-text">
                     {%- if clarification.sender is null and clarification.recipient is not null %}
                         you
                     {%- else %}
                         all
                     {%- endif -%}
                 </td>
 
-                <td>
+                <td class="clarification-text">
                     <a data-ajax-modal data-ajax-modal-after="markSeen" href="{{ link }}">
                         <i>{{ clarification.summary
                             | markdown_to_html
@@ -57,6 +57,9 @@
                             | raw
                             }}</i>
                     </a>
+                    <script>
+                        MathJax.typeset([document.getElementsByClassName('card-body')]);
+                    </script>
                 </td>
             </tr>
         {%- endfor %}

Original file line number	Diff line number	Diff line change
`@@ -945,6 +945,7 @@ function previewClarification($input, $previewDiv) {`
`945`	`945`	`}`
`946`	`946`	`}).done(function (data) {`
`947`	`947`	`$previewDiv.html(data.html);`
	`948`	`+ MathJax.typesetPromise([document.getElementById($previewDiv[0].id)]);`
`948`	`949`	`});`
`949`	`950`	`}`
`950`	`951`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+../../node_modules/mathjax/tex-chtml.js`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+../node_modules/@mathjax/mathjax-newcm-font/chtml/woff2`
Original file line number	Diff line number	Diff line change
`@@ -108,6 +108,7 @@`
`108`	`108`	`color: darkgrey;`
`109`	`109`	`}`
`110`	`110`	`</style>`
	`111`	`+ {% include 'partials/mathjaxhead.html.twig' %}`
`111`	`112`	`</head>`
`112`	`113`	`<body>`
`113`	`114`	`<main role="main" class="">`