MathJax demo

webapp/composer.json

@@ -71,6 +71,7 @@
 		"jms/serializer-bundle": "^5.2",
 		"knplabs/knp-paginator-bundle": "^6.6",
 		"league/commonmark": "^2.3",
+		"mathjax/mathjax": "^4.0",
 		"mbostock/d3": "^3.5",
 		"nelmio/api-doc-bundle": "^5.0",
 		"nelmio/cors-bundle": "^2.4",

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)]);
         });
     }
 }

webapp/public/mathjax

@@ -0,0 +1 @@
+../vendor/mathjax/mathjax

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 = "default-src 'self' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; script-src 'self' https://cdn.jsdelivr.net 'unsafe-inline' $cspExtra; img-src 'self' data:; worker-src 'self' blob:";
         $response->headers->set('Content-Security-Policy', $csp);
     }
 }

webapp/templates/base.html.twig

@@ -13,6 +13,14 @@
     <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>
+    <script>
+        window.MathJax = {
+          tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] },
+          svg: { fontCache: 'global' },
+          chtml: { fontURL: "{{ app.request.basePath }}/mathjaxfonts" }
+        };
+    </script>
+    <script src="{{ app.request.basePath }}/mathjax/tex-chtml.js"></script>
 
     <script src="{{ asset("js/domjudge.js") }}"></script>
     {% for file in customAssetFiles('js') %}

webapp/templates/jury/menu.html.twig

@@ -7,6 +7,7 @@
 
     {% set current_route = app.request.attributes.get('_route') %}
 
+    <span>Euler's identity: $( e^{i\pi} + 1 = 0 )$</span>
     <div class="collapse navbar-collapse" id="menuDefault" data-update-url="{{ path('jury_ajax_updates') }}">
         <ul class="navbar-nav me-auto">