adds syntax highlighting for config preview with highlightjs

package.json

@@ -20,6 +20,7 @@
     "@solidjs/router": "^0.12.4",
     "@tauri-apps/api": ">=2.0.0-beta.0",
     "@tauri-apps/plugin-shell": ">=2.0.0-beta.0",
+    "highlight.js": "^11.9.0",
     "solid-js": "^1.7.8",
     "solid-styled-components": "^0.28.5",
     "vite": "^5.1.5"

pnpm-lock.yaml

@@ -8,9 +8,6 @@ overrides:
   rollup: npm:@rollup/wasm-node
 
 dependencies:
-  '@modular-forms/solid':
-    specifier: ^0.20.0
-    version: 0.20.0(solid-js@1.8.15)
   '@solidjs/router':
     specifier: ^0.12.4
     version: 0.12.5(solid-js@1.8.15)
@@ -20,6 +17,9 @@ dependencies:
   '@tauri-apps/plugin-shell':
     specifier: '>=2.0.0-beta.0'
     version: 2.0.0-beta.1
+  highlight.js:
+    specifier: ^11.9.0
+    version: 11.9.0
   solid-js:
     specifier: ^1.7.8
     version: 1.8.15
@@ -478,14 +478,6 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /@modular-forms/solid@0.20.0(solid-js@1.8.15):
-    resolution: {integrity: sha512-CyXoeo2cwNel2N753c+iDzA+4DgtBrLNAS87DY/aODFZG7QoY0A9YSxdUxRf0N5NDwkzmn1O0XqwMP+EAiOHbA==}
-    peerDependencies:
-      solid-js: ^1.3.1
-    dependencies:
-      solid-js: 1.8.15
-    dev: false
-
   /@rollup/wasm-node@4.12.0:
     resolution: {integrity: sha512-sqy3+YvV/uWX6bPZOR5PlEdH6xyMPXoelllRQ/uZ13tzy9f4pXZTbajnoWN8IHHXwTNKPiLzsePLiDEVmkxMNw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -814,6 +806,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /highlight.js@11.9.0:
+    resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
   /html-entities@2.3.3:
     resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
     dev: true

src/pages/Configure.tsx

@@ -1,6 +1,9 @@
 import { invoke } from "@tauri-apps/api/core";
 import { Accessor, createSignal, onMount } from "solid-js";
 import { styled } from "solid-styled-components";
+
+import hljs from "highlight.js";
+
 import { EXAMPLE_CONFIG_CONTENTS } from "../tests/example_data";
 
 const PageContainer = styled("div")`
@@ -14,9 +17,10 @@ const PageContainer = styled("div")`
 const FloatingButtonContainer = styled("div")`
   background: #1c1c1c;
   position: fixed;
-  right: 8px;
+  right: 0;
   margin-top: 6px;
-  padding: 8px;
+  padding: 0 8px 0 0;
+  box-shadow: #1c1c1c 0 0 6px 2px, #1c1c1c 0 0 12px 2px, #1c1c1c 0 0 24px 2px;
 `;
 
 const Button = styled("button")`
@@ -24,13 +28,13 @@ const Button = styled("button")`
   border: solid 2px white;
   color: white;
   padding: 8px 14px;
-  margin: 8px;
+  margin: 12px;
   border-radius: 8px;
   font-size: 14px;
   text-transform: uppercase;
   cursor: pointer;
   letter-spacing: 1px;
-  background: none;
+  background: transparent;
 
   &:hover {
     color: #aaa;
@@ -47,11 +51,14 @@ const ConfigTextArea = styled("textarea")`
 `;
 
 const ConfigDisplay = ({ children }: { children: Accessor<string> }) => {
-  console.log(children().split("\n").length);
+  const highlighted_code = () =>
+    hljs.highlight(children(), {
+      language: "toml",
+    }).value;
 
   return (
     <pre>
-      <code>{children()}</code>
+      <code innerHTML={highlighted_code()} />
     </pre>
   );
 };

src/styles.css

@@ -12,3 +12,24 @@ body {
   color: #f6f6f6;
   background-color: #2f2f2f;
 }
+
+.hljs-comment {
+  color: rgb(86, 174, 86);
+}
+
+.hljs-section,
+.hljs-attr {
+  color: rgb(151, 190, 229);
+}
+
+.hljs-literal {
+  color: rgb(87, 151, 215);
+}
+
+.hljs-string {
+  color: rgb(225, 143, 118);
+}
+
+.hljs-number {
+  color: rgb(183, 241, 171);
+}