Add code highlighting for rendered user input text

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",

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';
 

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"