Frontend/assets/css/tools/r11form.css

@@ -505,6 +505,10 @@ h2 {
     font-weight: 300;
 }
 
+pre {
+    margin: 0px;
+}
+
 @media only screen and (max-width: 1024px) {
     .rwd-hideable {
         display: none;

Frontend/assets/scripts/tools/scripts.js

@@ -279,7 +279,7 @@ function refreshTooltip() {
 function performRequest(endpoint, checkXML, checkTransform) {
     const sourceId = "xmlArea";
     const transformId = "transformArea";
-    var xmlData = document.getElementById(sourceId).value.trim();
+    var xmlData = document.getElementById(sourceId).innerText.trim();
     var transformData = document.getElementById(transformId).value.trim();
     
     var port = 8081;
@@ -299,7 +299,9 @@ function performRequest(endpoint, checkXML, checkTransform) {
     }
     if (!empty) {
         restRequest(port, endpoint, xmlData, transformData).then(function (result) {
-            document.getElementById("resultArea").value = result.result;
+            document.getElementById("resultArea").innerHTML = result.result;
+            escapeHTML(document.getElementById("resultArea"));
+            hljs.highlightAll();
             document.getElementById("procinfo").innerText = ' Computed using ' + result.processor
             if (result.type)
                 document.getElementById("procinfo").innerText += ". Returned: " + result.type;
@@ -314,7 +316,7 @@ function performRequest(endpoint, checkXML, checkTransform) {
             }
         });
     } else {
-        document.getElementById("resultArea").value = "No data provided!";
+        document.getElementById("resultArea").innerHTML = "No data provided!";
         return false;
     }
     

Frontend/tools/xpath.html

@@ -65,9 +65,10 @@
                     expression</button>
                 <br><br>
                 <label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
-                <textarea disabled id="resultArea" name="resultArea"
+                <!-- <textarea disabled id="resultArea" name="resultArea"
                     class="textarea-300 bordered-field vertically-resizeable max-width" style="margin-bottom: 50px;"
-                    rows="10" cols="100"></textarea>
+                    rows="10" cols="100"></textarea> -->
+                <pre><code class="language-xml bordered-field textarea-300" id="resultArea" contenteditable="True"></code></pre>
 
             </div>
         </div>