HTML - Markdown - Latex : Rendering Fixed

src/static/js/ours/latex_markdown_html.js

@@ -0,0 +1,28 @@
+// Function to render Markdown,  HTML and Latex and return updated content
+function renderMarkdownWithLatex(content) {
+    if(content === null){
+      return []
+    }
+    const parsedHtml = new DOMParser().parseFromString(marked(content), "text/html")
+
+    const traverseAndRenderLatex = (node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const latexPattern = /\$\$([\s\S]*?)\$\$|\$([^\$\n]*?)\$/g
+        const hasLatex = latexPattern.test(node.textContent)
+        if (hasLatex) {
+          const tempDiv = document.createElement('div')
+          tempDiv.innerHTML = node.innerHTML.replace(latexPattern, (_, formula1, formula2) => {
+            const formula = formula1 || formula2
+            return katex.renderToString(formula, { throwOnError: false })
+          });
+          node.innerHTML = tempDiv.innerHTML
+        }
+      }
+
+      node.childNodes.forEach(traverseAndRenderLatex)
+    };
+
+    traverseAndRenderLatex(parsedHtml.body)
+
+    return parsedHtml.body.childNodes
+}

src/static/riot/competitions/detail/_registration.tag

@@ -72,7 +72,11 @@
         CODALAB.events.on('competition_loaded', (competition) => {
             self.competition_id = competition.id
             if (self.refs.terms_content) {
-                self.refs.terms_content.innerHTML = render_markdown(competition.terms)
+                const rendered_content = renderMarkdownWithLatex(competition.terms)
+                self.refs.terms_content.innerHTML = ""
+                rendered_content.forEach(node => {
+                    self.refs.terms_content.appendChild(node.cloneNode(true)); // Append each node
+                });
             }
             self.registration_auto_approve = competition.registration_auto_approve
             self.status = competition.participant_status

src/static/riot/competitions/detail/_tabs.tag

@@ -318,16 +318,21 @@
             self.update()
             _.forEach(self.competition.pages, (page, index) => {
 
-                if (self.isHTML(page.content)){
-                    $(`#page_${index}`)[0].innerHTML = sanitize_HTML(page.content)
-                }else{
-                    $(`#page_${index}`)[0].innerHTML = render_markdown(page.content)
-                }
-
+                // Render html pages
+                const rendered_content = renderMarkdownWithLatex(page.content)
+                $(`#page_${index}`)[0].innerHTML = ""
+                rendered_content.forEach(node => {
+                    $(`#page_${index}`)[0].appendChild(node.cloneNode(true)); // Append each node
+                });
 
             })
             _.forEach(self.competition.phases, (phase, index) => {
-                $(`#phase_${index}`)[0].innerHTML = render_markdown(phase.description)
+                // Render phase description
+                const rendered_content = renderMarkdownWithLatex(phase.description)
+                $(`#phase_${index}`)[0].innerHTML = ""
+                rendered_content.forEach(node => {
+                    $(`#phase_${index}`)[0].appendChild(node.cloneNode(true)); // Append each node
+                });
             })
             _.delay(() => {
                 self.loading = false
@@ -355,12 +360,6 @@
                 CODALAB.events.trigger('phase_selected', data)
             }
         }
-        // To check if page content has HTML
-        // Return true if content is html
-        // Return false if content is not html i.e. MarkDown
-        self.isHTML = function (page_content) {
-            return /<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i.test(page_content);
-        }
 
         self.update()
 

src/static/riot/competitions/editor/_pages.tag

@@ -159,7 +159,11 @@
         self.view_page = function (page_index) {
             self.selected_page_index = page_index
             $(self.refs.view_modal).modal('show')
-            self.refs.page_content.innerHTML = render_markdown(self.pages[page_index].content)
+            const rendered_content = renderMarkdownWithLatex(self.pages[page_index].content)
+            self.refs.page_content.innerHTML = ""
+            rendered_content.forEach(node => {
+                self.refs.page_content.appendChild(node.cloneNode(true)); // Append each node
+            });
         }
 
         self.form_updated = function () {

src/templates/base.html

@@ -23,6 +23,9 @@
     <!-- Ours -->
     <link rel="stylesheet" href="{% static "generated/output.css" %}">
 
+    <!-- Latex -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css">
+
     {% block extra_head %}
     {% endblock %}
 </head>
@@ -239,6 +242,10 @@ <h4 class="ui inverted header">CodaBench</h4>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/filesize/4.2.1/filesize.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.min.js" integrity="sha256-mLCPYHfNREhSETFQGuowilY3zBAZGnDO2cxCnCEm8/I=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>
+    <!-- Markdown-->
+    <script src="https://cdn.jsdelivr.net/npm/marked@3.0.7/marked.min.js"></script>
+    <!-- Latex -->
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"></script>
     <!-- Ours -->
 
 
@@ -357,6 +364,7 @@ <h4 class="ui inverted header">CodaBench</h4>
     <script src="{% static "js/Chart.bundle.js" %}"></script>
     <script src="{% static "js/reconnecting-websocket.min.js" %}"></script>
     <script src="{% static "generated/riot.js" %}"></script>
+    <script src="{% static "js/ours/latex_markdown_html.js" %}"></script>
 
     {% block extra_js %}
     {% endblock %}