DOMjudge · vmcj · Nov 28, 2025 · Oct 28, 2025 · Oct 30, 2025 · Sep 26, 2025
diff --git a/webapp/package.json b/webapp/package.json
@@ -11,6 +11,7 @@
     "file-saver": "^2.0.5",
     "flag-icons": "^7.5.0",
     "jquery-debounce-throttle": "^1.0.6-rc.0",
+    "mathjax": "^4.0.0",
     "monaco-editor": "^0.54.0",
     "nvd3": "1.8.6",
     "select2": "^4.0.13",

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/src/Twig/TwigExtension.php b/webapp/src/Twig/TwigExtension.php
@@ -27,6 +27,7 @@
 use App\Utils\Utils;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\EntityManagerInterface;
+use Ramsey\Uuid\Uuid;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
 use Symfony\Component\Intl\Countries;
 use Symfony\Component\Intl\Exception\MissingResourceException;
@@ -38,12 +39,18 @@
 use Twig\Environment;
 use Twig\Extension\AbstractExtension;
 use Twig\Extension\GlobalsInterface;
+use Twig\Extra\Markdown\MarkdownRuntime;
 use Twig\Runtime\EscaperRuntime;
 use Twig\TwigFilter;
 use Twig\TwigFunction;
 
 class TwigExtension extends AbstractExtension implements GlobalsInterface
 {
+    /**
+     * @param array<string> $latexFound
+     */
+    private array $latexFound;
+
     /**
      * @param array<int, bool> $renderedSources
      */
@@ -126,6 +133,7 @@
             new TwigFilter('medalType', $this->awards->medalType(...)),
             new TwigFilter('numTableActions', $this->numTableActions(...)),
             new TwigFilter('extensionToMime', $this->extensionToMime(...)),
+            new TwigFilter('domjudgeMarkdownToHtml', $this->domjudgeMarkdownToHTML(...), ['is_safe' => ['html']]),
         ];
     }
 
@@ -1381,4 +1389,35 @@
     {
         return DOMJudgeService::EXTENSION_TO_MIMETYPE[$extension];
     }
+
+    /**
+     * Extract all LaTeX code from the given string, sanitize the markdown and
+     * inject the original LaTeX code back so MathJax can render it.
+     */
+    public function domjudgeMarkdownToHTML(string $markdown): string
+    {
+        $latexPlaceholder = Uuid::uuid4()->toString();
+        while (str_contains($markdown, $latexPlaceholder)) {
+            $latexPlaceholder = Uuid::uuid4()->toString();
+        }
+
+        $markdown = preg_replace_callback(
+            '/(\$[\s\S]*?\$)/',
+            function (array $matches) use ($latexPlaceholder) {
+                // Store and replace matches
+                $this->latexFound[] = $matches[1];
+                return $latexPlaceholder;
+            },
+            $markdown
+        );
+
+        /** @var MarkdownRuntime $runtime */
+        $runtime = $this->twig->getRuntime(MarkdownRuntime::class);
+        $markdown = (string)$runtime->convert($markdown);
+
+        return preg_replace_callback(
+            '/'.$latexPlaceholder.'/',
+            fn() => array_shift($this->latexFound), $markdown
+        );
+    }
 }
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/clarification.html.twig b/webapp/templates/jury/clarification.html.twig
@@ -110,7 +110,7 @@
 
                     <hr/>
 
-                    <div class="card-text">{{ clar.body | markdown_to_html | sanitize_html('app.clarification_sanitizer') }}</div>
+                    <div class="card-text">{{ clar.body | domjudgeMarkdownToHtml | sanitize_html('app.clarification_sanitizer') }}</div>
 
                 </div>
             </div>

diff --git a/webapp/templates/jury/config.html.twig b/webapp/templates/jury/config.html.twig
@@ -218,7 +218,7 @@
                                                 {{ errors[option.name] }}
                                             </div>
                                         {% endif %}
-                                        <div class="small text-muted">{{ option.description | markdown_to_html }}</div>
+                                        <div class="small text-muted">{{ option.description | domjudgeMarkdownToHtml }}</div>
                                     </div>
                                 </li>
                             {% endfor %}

diff --git a/webapp/templates/jury/config_check.html.twig b/webapp/templates/jury/config_check.html.twig
@@ -99,7 +99,7 @@
         {% if testresult.escape is not defined or testresult.escape %}
           {% set description = description | escape %}
         {% endif %}
-        {{ description | markdown_to_html }}
+        {{ description | domjudgeMarkdownToHtml }}
       </div>
     </div>
   </div>

diff --git a/webapp/templates/jury/export/clarifications.html.twig b/webapp/templates/jury/export/clarifications.html.twig
@@ -98,7 +98,7 @@
                 <tr>
                     <td><b>Content</b></td>
                     <td colspan="5">
-                        <div class="card-text">{{ clarification.body | markdown_to_html | sanitize_html('app.clarification_sanitizer') }}</div>
+                        <div class="card-text">{{ clarification.body | domjudgeMarkdownToHtml | sanitize_html('app.clarification_sanitizer') }}</div>
                     </td>
                 </tr>
                 {% if clarification.replies is not empty %}
@@ -114,7 +114,7 @@
                                 </b>
                             </td>
                             <td colspan="5">
-                                <div class="card-text">{{ reply.body | markdown_to_html | sanitize_html('app.clarification_sanitizer') }}</div>
+                                <div class="card-text">{{ reply.body | domjudgeMarkdownToHtml | sanitize_html('app.clarification_sanitizer') }}</div>
                             </td>
                         </tr>
                     {% endfor %}

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/index.html.twig b/webapp/templates/team/index.html.twig
@@ -46,6 +46,8 @@
             }
 
             $('[data-flash-messages]').html($flash);
+
+            MathJax.typeset([document.getElementsByClassName('clarification-text')]);
         }
 
         window.initModalClarificationPreviewAdd = function() {

diff --git a/webapp/templates/team/partials/clarification.html.twig b/webapp/templates/team/partials/clarification.html.twig
@@ -40,7 +40,7 @@
         <hr/>
 
         <div class="card-text">
-            {{ clarification.body | markdown_to_html | sanitize_html('app.clarification_sanitizer') }}
+            {{ clarification.body | domjudgeMarkdownToHtml | sanitize_html('app.clarification_sanitizer') }}
         </div>
     </div>
 </div>
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
@@ -48,15 +48,18 @@
                     {%- endif -%}
                 </td>
 
-                <td>
+                <td class="clarification-text">
                     <a data-ajax-modal data-ajax-modal-after="markSeen" href="{{ link }}">
                         <i>{{ clarification.summary
-                            | markdown_to_html
+                            | domjudgeMarkdownToHtml
                             | replace({'<p>': '', '</p>': ''})
                             | sanitize_html('app.clarification_sanitizer')
                             | raw
                             }}</i>
                     </a>
+                    <script>
+                        MathJax.typeset([document.getElementsByClassName('card-body')]);
+                    </script>
                 </td>
             </tr>
         {%- endfor %}

diff --git a/webapp/yarn.lock b/webapp/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz#8eb76278515341720aa74485266f8be121089529"
   integrity sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==
 
+"@mathjax/mathjax-newcm-font@^4.0.0":
+  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==
+
 "@melloware/coloris@^0.25.0":
   version "0.25.0"
   resolved "https://registry.yarnpkg.com/@melloware/coloris/-/coloris-0.25.0.tgz#7012c10dc510dca1660b3692ed3c812344aec6ca"
@@ -79,6 +84,13 @@ marked@14.0.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-14.0.0.tgz#79a1477358a59e0660276f8fec76de2c33f35d83"
   integrity sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==
 
+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"
+
 monaco-editor@^0.54.0:
   version "0.54.0"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.54.0.tgz#c0d6ebb46b83f1bef6f67f6aa471e38ba7ef8231"
-Original file line number
+Diff line change
@@ Expand Up / @@ -945,6 +945,7 @@ function previewClarification($input, $previewDiv) { @@
                 }
             }).done(function (data) {
                 $previewDiv.html(data.html);
+                MathJax.typesetPromise([document.getElementById($previewDiv[0].id)]);
             });
         }
     }
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../node_modules/@mathjax/mathjax-newcm-font/chtml/woff2