Frontend/assets/css/json.css

@@ -1,4 +1,69 @@
 .json-block {
   height: 600px;
-  width: 100%;
+  width: 97%;
+}
+
+.json-border {
+  border: 2px solid rgba(93, 99, 96, 0.705);
+  border-radius: 5px;
+}
+
+.json-border:focus {
+  box-shadow: 0 0 5px rgb(81, 203, 238);
+  border: 2px solid rgba(93, 99, 96, 0.705);
+  border-radius: 5px;
+}
+
+/*! Theme: Default Description: Original highlight.js style Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org> Maintainer: @highlightjs/core-team Website: https://highlightjs.org/ License: see project LICENSE Touched: 2021 */
+pre code.hljs{
+  display:block;
+  overflow-x:auto;
+  padding:1em
+}
+code.hljs{
+  padding:3px 5px
+}
+.hljs{
+  background:#FFFFFF;
+  color:#444
+}
+.hljs-comment{
+  color:#697070
+}
+.hljs-punctuation,.hljs-tag{
+  color:#444a
+}
+.hljs-tag .hljs-attr,.hljs-tag .hljs-name{
+  color:#444
+}
+.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{
+  font-weight:700
+}
+.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{
+  color:#800
+}
+.hljs-section,.hljs-title{
+  color:#800;
+  font-weight:700
+}
+.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{
+  color:#ab5656
+}
+.hljs-literal{
+  color:#695
+}
+.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{
+  color:#397300
+}
+.hljs-meta{
+  color:#1f7199
+}
+.hljs-meta .hljs-string{
+  color:#38a
+}
+.hljs-emphasis{
+  font-style:italic
+}
+.hljs-strong{
+  font-weight:700
 }

Frontend/assets/scripts/tools/json.js

@@ -61,3 +61,14 @@ function minimizeJson(errorElement) {
     console.error('Error:', error);
   });
 }
+
+function clearJsonData() {
+  const input = document.querySelector('#jsonBlock');
+  input.textContent = "";
+}
+
+function insertDefaultJson() {
+  const input = document.querySelector('#jsonBlock');
+  input.textContent = "{\"enter\": \"your\", \"json\": \"here\"}";
+  hljs.highlightElement(input);
+}

Frontend/tools/jsonFormatter.html

@@ -7,7 +7,6 @@
 
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
     <link rel="stylesheet" href="../assets/css/json.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script src="../assets/scripts/tools/scripts.js"></script>
     <script src="../assets/scripts/tools/json.js"></script>
@@ -22,10 +21,21 @@
             <h1>Online JSON Formatter</h1>
           </div>
 
-          <p style="margin-bottom: -30px" id="processInfo"></p>
+          <div class="display-space-between">
+            <div>
+              <b><span id="processInfo"></span></b><br>
+              <b>Insert your JSON:</b>
+            </div>
 
+            <div>
+              <button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
+                      onclick="clearJsonData()">Clear</button>
+              <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
+                      onclick="insertDefaultJson()">Insert default XML</button>
+            </div>
+          </div>
           <pre>
-            <code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
+              <code class="hightlight-json json-block bordered-field" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
           </pre>
 
           <button style="margin-top: 20px"