Syntax coloring is now working

Frontend/assets/scripts/tools/scripts.js

@@ -53,7 +53,7 @@ function getVersion() {
 * @kind function
 */
 function clearDataField() {
-    document.getElementById("xmlArea").value = "";
+    document.getElementById("xmlArea").innerHTML = "";
     document.getElementById("xmlArea").style.color = null;
     document.getElementById("xmlArea").style.backgroundColor = null;
     
@@ -62,6 +62,27 @@ function clearDataField() {
     document.getElementById("transformArea").style.backgroundColor = null;
 }
 
+
+/**
+ * The `escapeHTML` function is used to escape special characters in an HTML element's innerHTML property.
+ * This is done to prevent these characters from being interpreted as HTML tags or attributes, 
+ * which could potentially cause security vulnerabilities or unintended behavior.
+ * 
+ * @function
+ * @name escapeHTML
+ * @kind function
+ * @param {any} element
+ * @returns {void}
+ */
+function escapeHTML(element) {
+    element.innerHTML = element.innerHTML
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
 /**
 * It fills the XML area with a sample XML.
 * 
@@ -78,8 +99,10 @@ function fillDefaultXML(element) {
         fetch(serverAddress + "/assets/samples/sampleXml.xml")
         .then(response => response.text())
         .then((exampleData) => {
-            document.getElementById("xmlArea").value = exampleData;
+            document.getElementById("xmlArea").innerHTML = exampleData;
+            escapeHTML(document.getElementById("xmlArea"));
             document.getElementById("xmlArea").style.backgroundColor = null;
+            hljs.highlightAll();
         })
     }
 }

Frontend/tools/xpath.html

@@ -53,9 +53,7 @@
                     class="textarea-300 bordered-field vertically-resizeable max-width"
                     onblur="setDefaultContent(this, 'Insert XML here');"
                     onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea> -->
-                    <pre>
+                    <pre><code class="language-xml bordered-field textarea-300" id="xmlArea" contenteditable="True"></code></pre>
-                        <code class="language-xml bordered-field" id="xmlBlock" contenteditable="True">Insert XML here</code>
-                    </pre>
                 <br><br>
                 <label for="transformArea"><b>Insert your XPath:</b></label>
                 <textarea id="transformArea" name="transformArea" class="bordered-field vertically-resizeable max-width"