From f1206e827475e4f552ded87925c648ec4c700650 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 10 Jan 2021 19:03:47 +0100
Subject: [PATCH] Add code highlighting for rendered user input text

---
 package.json                    | 1 +
 src/components/input/editor.vue | 6 ++++++
 yarn.lock                       | 5 +++++
 3 files changed, 12 insertions(+)

diff --git a/package.json b/package.json
index 496f0c4ca..e534cc161 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "copy-to-clipboard": "3.3.1",
     "date-fns": "2.16.1",
     "dompurify": "2.2.6",
+    "highlight.js": "^10.5.0",
     "lodash": "4.17.20",
     "marked": "1.2.7",
     "register-service-worker": "1.7.2",
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index c651bd008..6c902aaf5 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -329,6 +329,11 @@ export default {
 						return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this._uid}"/>`
 					},
 				},
+				highlight: function(code, language) {
+					const hljs = require('highlight.js');
+					const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
+					return hljs.highlight(validLanguage, code).value;
+				},
 			})
 
 			this.preview = DOMPurify.sanitize(marked(this.text))
@@ -406,6 +411,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../../../node_modules/highlight.js/scss/atelier-heath-light';
 @import '../../../node_modules/easymde/dist/easymde.min.css';
 @import '../../styles/theme/variables';
 
diff --git a/yarn.lock b/yarn.lock
index 36bf5c4a5..a9c31cc03 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8337,6 +8337,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight.js@^10.5.0:
+  version "10.5.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.5.0.tgz#3f09fede6a865757378f2d9ebdcbc15ba268f98f"
+  integrity sha512-xTmvd9HiIHR6L53TMC7TKolEj65zG1XU+Onr8oi86mYa+nLcIbxTTWkpW7CsEwv/vK7u1zb8alZIMLDqqN6KTw==
+
 highlight.js@^9.6.0:
   version "9.17.1"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.17.1.tgz#14a4eded23fd314b05886758bb906e39dd627f9a"