Highlighting multi-line comments

app/assets/stylesheets/annotations.scss

@@ -937,5 +937,9 @@ span > .material-icons {
   font-size: 14px !important;
   box-shadow: 0.5px 0.5px 0.5px 0.5px grey !important;
   border-color: white !important;
-} 
+}
+
+.hljs-comment span {
+  color: #008000 !important;
+}
 

app/views/submissions/view.html.erb

@@ -52,6 +52,32 @@
       var headerPositionStr = null;
     <% end %>
     hljs.initHighlightingOnLoad();
+    document.addEventListener('DOMContentLoaded', (event) => {
+        let combinedCode = '';
+        document.querySelectorAll('pre code').forEach((block) => {
+            combinedCode += block.textContent + '\n';
+        });
+
+        let highlightedCode = hljs.highlightAuto(combinedCode).value;
+        let commentSpans = highlightedCode.match(/<span class="hljs-comment">([^<]*)<\/span>/g);
+        let commentContents = commentSpans.map(span => {
+            let tempDiv = document.createElement('div');
+            tempDiv.innerHTML = span;
+            return tempDiv.textContent || tempDiv.innerText || '';
+        });
+        let splitContent = commentContents.flatMap(str => str.split('\n'));
+
+        document.querySelectorAll('pre code').forEach((block, index) => {
+            if (block.textContent !== null && block.textContent !== "" && splitContent.includes(block.textContent.replace(/\n/g, ''))) {
+                let escapedText = document.createTextNode(block.textContent);
+                let codeElement = document.createElement('span');
+                codeElement.className = 'hljs-comment';
+                codeElement.appendChild(escapedText);
+                block.innerHTML = '';
+                block.appendChild(codeElement);
+            }
+        });
+    });
     PDFJS.workerSrc = "<%= asset_url 'pdf.worker.js' %>";
   </script>
   <%= render partial: "golden-layout" %>