Code highlighting (#142)

* Code highlight js

* Updated copyResponse

assets/css/styles.scss

@@ -130,7 +130,8 @@ legend {
 }
 
 fieldset textarea,
-fieldset pre {
+fieldset pre
+code {
   resize: vertical;
 }
 
@@ -233,6 +234,20 @@ pre {
   }
 }
 
+pre {
+  display: grid;
+}
+
+code {
+  height: 336px;
+}
+
+.hljs,
+.hljs-subst {
+  background-color: var(--bg-dark-color) !important;
+  color: var(--fg-color) !important;
+}
+
 select,
 input,
 option {

package-lock.json

@@ -3723,8 +3723,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
-      "dev": true
     },
     "decode-uri-component": {
       "version": "0.2.0",
@@ -5022,6 +5021,11 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "highlight.js": {
+      "version": "9.15.10",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz",
+      "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -11270,24 +11274,25 @@
           "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
           "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
           "dev": true
+        },
+        "yargs-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "dev": true,
+          "requires": {
+            "camelcase": "^3.0.0"
+          }
         }
       }
     },
     "yargs-parser": {
-      "version": "5.0.0",
+      "version": "13.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
-      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
-      "dev": true,
       "requires": {
-        "camelcase": "^3.0.0"
+        "camelcase": "^5.0.0",
-      },
+        "decamelize": "^1.2.0"
-      "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true
-        }
       }
     }
   }

package.json

@@ -16,6 +16,7 @@
     "dependencies": {
         "@nuxtjs/axios": "^5.6.0",
         "@nuxtjs/pwa": "^3.0.0-0",
+        "highlight.js": "^9.15.10",
         "nuxt": "^2.9.2",
         "vue-virtual-scroll-list": "^1.4.2",
         "vuejs-auto-complete": "^0.9.0",

pages/index.vue

@@ -180,7 +180,7 @@
             </div>
           </div>
           <div id="response-details-wrapper">
-            <textarea ref="responseBody" name="body" readonly rows="16" placeholder="(waiting to send request)">{{response.body}}</textarea>
+            <pre><code v-model="response.body" ref="responseBody" name="body" readonly rows="16" placeholder="(waiting to send request)">{{response.body}}</code></pre>
             <iframe :class="{hidden: !previewEnabled}" class="covers-response" ref="previewFrame" src="about:blank"></iframe>
           </div>
           <div class="align-right" v-if="response.body && responseType === 'text/html'">
@@ -290,6 +290,8 @@
   import toggle from "../components/toggle";
   import import_modal from "../components/modal";
   import parseCurlCommand from '../assets/js/curlparser.js';
+  import hljs from 'highlight.js';
+  import 'highlight.js/styles/github.css';
 
   const statusCategories = [{
       name: 'informational',
@@ -405,6 +407,13 @@
       rawInput (status) {
         if (status && this.rawParams === '') this.rawParams = '{}'
         else this.setRouteQueryState()
+      },
+      'response.body': async function (val, oldVal) {
+          var responseText = document.querySelector("div#response-details-wrapper pre code");
+          if (responseText && this.response.body != "(waiting to send request)" && this.response.body != "Loading..." && this.response.body != "See JavaScript console (F12) for details.") {
+            await setTimeout('', 1000)
+            hljs.highlightBlock(document.querySelector("div#response-details-wrapper pre code"));
+          }
       }
     },
     computed: {
@@ -755,8 +764,18 @@
       },
       copyResponse() {
         this.$refs.copyResponse.innerHTML = this.copiedButton + '<span>Copied</span>';
-        this.$refs.responseBody.select();
+        // Creates a textarea element
-        document.execCommand("copy");
+        var aux = document.createElement("textarea");
+        var copy = this.responseType == 'application/json' ? JSON.stringify(this.response.body) : this.response.body;
+        // Adds response body to the new textarea
+        aux.innerText = copy;
+        // Append the textarea to the body
+        document.body.appendChild(aux);
+        // Highlight the content
+        aux.select();
+        document.execCommand('copy');
+        // Remove the input from the body
+        document.body.removeChild(aux);
         setTimeout(() => this.$refs.copyResponse.innerHTML = this.copyButton + '<span>Copy</span>', 1500)
       },
       togglePreview() {