🐛 fix bug on editor form with highlightjs (#86)

Author: mckenziearts

package.json

@@ -38,6 +38,7 @@
     "axios": "^0.21.1",
     "canvas-confetti": "^1.4.0",
     "choices.js": "^9.0.1",
+    "highlight.js": "^11.7.0",
     "htm": "^3.1.0",
     "intl-tel-input": "^17.0.13",
     "preact": "^10.5.15",

public/css/app.css

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=14e78ed3da0550befb1ae94a465013f5",
-    "/css/app.css": "/css/app.css?id=e949df09924e368d035a31b5f215b118",
-    "/css/filament.css": "/css/filament.css?id=31807c66ef04b2d10d4b1a197a767d07"
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css",
+    "/css/filament.css": "/css/filament.css"
 }

public/css/filament.css

@@ -3,6 +3,7 @@
 @import "tailwindcss/utilities";
 
 @import '../../vendor/filament/forms/dist/module.esm.css';
+@import "~highlight.js/styles/atom-one-dark.css";
 @import '~choices.js/public/assets/styles/choices.css';
 @import '~intl-tel-input/build/css/intlTelInput.css';
 

public/js/app.js

@@ -1,10 +1,18 @@
+import hljs from 'highlight.js'
 import Choices from 'choices.js'
 
 // Create a multiselect element.
 window.choices = (element) => {
   return new Choices(element, { maxItemCount: 3, removeItemButton: true });
 }
 
+// Syntax highlight code blocks.
+window.highlightCode = (element) => {
+  element.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightBlock(block);
+  })
+}
+
 // Create Capitalize string
 window.capitalize = (string) => string.replace(/^\w/, (c) => c.toUpperCase())