Render MathJax in clarifications

vmcj · vmcj · commit 7679030d1bc5 · 2025-10-30T22:39:33.000+01:00
diff --git a/webapp/public/js/domjudge.js b/webapp/public/js/domjudge.js
@@ -939,6 +939,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/src/EventListener/AddContentSecurityPolicyListener.php b/webapp/src/EventListener/AddContentSecurityPolicyListener.php
@@ -17,7 +17,7 @@ public function __invoke(ResponseEvent $event): void
         // the profiler requires 'unsafe-eval' for script-src 'self'.
         $response = $event->getResponse();
         $cspExtra = $this->profiler ? "'unsafe-eval'" : "";
-        $csp = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' $cspExtra; img-src 'self' data:; worker-src 'self' blob:";
+        $csp = "font-src 'self' data:; default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' $cspExtra; img-src 'self' data:; worker-src 'self' blob:";
         $response->headers->set('Content-Security-Policy', $csp);
     }
 }
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,18 @@
+<script>
+    window.MathJax = {
+        tex: {
+            inlineMath: [['$', '$'], ['\\(', '\\)']]
+        },
+        chtml: {
+            fontURL: "{{ app.request.basePath }}/mathjaxfonts",
+            scale: 1.0
+        },
+        loader: {
+            paths: {
+                mathjax: "{{ app.request.basePath }}/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
@@ -62,10 +62,13 @@
                     </td>
                 {% endif %}
 
-                <td>
+                <td class="clarification-text">
                     <a data-ajax-modal data-ajax-modal-after="markSeen" href="{{ link }}">
                         {{ clarification.summary | markdown_to_html | sanitize_html('app.clarification_sanitizer') }}
                     </a>
+                    <script>
+                        MathJax.typeset([document.getElementsByClassName('card-body')]);
+                    </script>
                 </td>
             </tr>
         {%- endfor %}
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
@@ -6,3 +6,10 @@
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@mathjax/mathjax-newcm-font/-/mathjax-newcm-font-4.0.0.tgz#01afa8b20f2114665dc1d9a7fbc623a23ddb54e4"
   integrity sha512-kpsJgIF4FpWiwIkFgOPmWwy5GXfL25spmJJNg27HQxPddmEL8Blx0jn2BuU/nlwjM/9SnYpEfDrWiAMgLPlB8Q==
+
+mathjax@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mathjax/-/mathjax-4.0.0.tgz#ff7aa8b6bfdc7e97e41091a9ed6d8c8f8eefd2a0"
+  integrity sha512-ThMPHiPl9ibZBInAmfoTCNq9MgCdH7ChIQ9YhKFc325noJ4DMzy9/Q14qdcuPzVJjEmC3kyXhwnERZWX3hbWzQ==
+  dependencies:
+    "@mathjax/mathjax-newcm-font" "^4.0.0"

Original file line number	Diff line number	Diff line change
`@@ -939,6 +939,7 @@ function previewClarification($input, $previewDiv) {`
`939`	`939`	`}`
`940`	`940`	`}).done(function (data) {`
`941`	`941`	`$previewDiv.html(data.html);`
	`942`	`+ MathJax.typesetPromise([document.getElementById($previewDiv[0].id)]);`
`942`	`943`	`});`
`943`	`944`	`}`
`944`	`945`	`}`
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
`@@ -17,7 +17,7 @@ public function __invoke(ResponseEvent $event): void`
`17`	`17`	`// the profiler requires 'unsafe-eval' for script-src 'self'.`
`18`	`18`	`$response = $event->getResponse();`
`19`	`19`	`$cspExtra = $this->profiler ? "'unsafe-eval'" : "";`
`20`		`- $csp = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' $cspExtra; img-src 'self' data:; worker-src 'self' blob:";`
	`20`	`+ $csp = "font-src 'self' data:; default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' $cspExtra; img-src 'self' data:; worker-src 'self' blob:";`
`21`	`21`	`$response->headers->set('Content-Security-Policy', $csp);`
`22`	`22`	`}`
`23`	`23`	`}`
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="">`