sync

index.html

@@ -364,17 +364,17 @@
               <div class="flex flex-col space-y-2 pb-2">
                 <button id="download-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                   <svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
-                  <span class="text-selection_background">Download universes</span>
+                  <span class="text-selection_foreground">Download universes</span>
                 </button>
                 <button id="upload-universes" class="bg-blue font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
                   <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
-                  <span class="text-selection_background">Upload universes</span>
+                  <span class="text-selection_foreground">Upload universes</span>
                 </button>
-                <button id="destroy-universes" class="bg-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
+                <button id="destroy-universes" class="bg-blue font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                   </svg>
-                  <span class="text-brightred">Destroy universes</span>
+                  <span class="text-selection_foreground">Destroy universes</span>
                 </button>
               </div>
             </div>
@@ -559,7 +559,7 @@
 
       <template id="ui-known-universe-item-template">
         <!-- A known universe button in "opening" interface -->
-        <li class="hover:fill-black hover:white py-2 hover:text-black flex justify-between px-4">
+        <li class="py-2 px-4 flex justify-between text-cyan">
           <button class="universe-name load-universe" title="Load this universe">Universe Name</button>
           <button class="delete-universe" title="Delete this universe">🗑</button>
         </li>

package.json

@@ -30,6 +30,7 @@
     "autoprefixer": "^10.4.14",
     "codemirror": "^6.0.1",
     "fflate": "^0.8.0",
+    "highlight.js": "^11.9.0",
     "jisg": "^0.9.7",
     "lru-cache": "^10.0.1",
     "marked": "^7.0.3",

src/Documentation.ts

@@ -36,12 +36,11 @@ import { ziffers_rhythm } from "./documentation/patterns/ziffers/ziffers_rhythm"
 import { ziffers_algorithmic } from "./documentation/patterns/ziffers/ziffers_algorithmic";
 import { ziffers_tonnetz } from "./documentation/patterns/ziffers/ziffers_tonnetz";
 import { ziffers_syncing } from "./documentation/patterns/ziffers/ziffers_syncing";
-
 import { synths } from "./documentation/learning/audio_engine/synths";
-
 // Setting up the Markdown converter with syntax highlighting
 import showdown from "showdown";
 import showdownHighlight from "showdown-highlight";
+import "highlight.js/styles/atom-one-dark-reasonable.min.css";
 import { createDocumentationStyle } from "./DomElements";
 import { filters } from "./documentation/learning/audio_engine/filters";
 showdown.setFlavor("github");
@@ -67,9 +66,7 @@ export const makeExampleFactory = (application: Editor): Function => {
     <button class="py-1 text-base px-4 hover:bg-neutral-600 bg-neutral-500 inline-block " onclick="app.api._stopDocExample()">&#x23f8;&#xFE0F; Pause</button>
     <button class="py-1 text-base px-4 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
   </summary>
-  \`\`\`javascript
+  <pre><code class="hljs language-javascript">${code.trim()}</code></pre>
-  ${code}
-  \`\`\`
 </details>
 `;
   };
@@ -175,7 +172,10 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
     emoji: true,
     moreStyling: true,
     backslashEscapesHTMLTags: true,
-    extensions: [showdownHighlight({ auto_detection: true }), ...bindings],
+    extensions: [showdownHighlight({
+      pre: true, 
+      auto_detection: false
+    }), ...bindings],
   });
   console.log(app.currentDocumentationPane);
 

src/InterfaceLogic.ts

@@ -326,7 +326,7 @@ export const installInterfaceLogic = (app: Editor) => {
 
     // @ts-ignore
     let selected_theme = colors[app.settings.theme as string];
-    let theme_preview = "<div class='pl-4'>";
+    let theme_preview = "<div class='ml-6'>";
     for (const [key, _] of Object.entries(selected_theme)) {
       theme_preview += `<p class="inline text-${key} bg-${key}">█</p>`;
     }

src/style.css

@@ -558,21 +558,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.hljs-comment: #FEFEFE;
-
-.css .hljs-built_in {
-  color: #88C0D0;
-}
-
-.css .hljs-keyword {
-  color: #D08770;
-}
-
-.vim .hljs-built_in {
-  color: #88C0D0;
-  font-style: italic;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -781,10 +766,6 @@ video {
   margin-left: 1.5rem;
 }
 
-.ml-8 {
-  margin-left: 2rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1141,46 +1122,541 @@ video {
   border-style: none;
 }
 
+.border-background {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--background) / var(--tw-border-opacity));
+}
+
+.border-background\/0 {
+  border-color: rgb(var(--background) / 0);
+}
+
+.border-background\/10 {
+  border-color: rgb(var(--background) / 0.1);
+}
+
+.border-background\/100 {
+  border-color: rgb(var(--background) / 1);
+}
+
+.border-background\/20 {
+  border-color: rgb(var(--background) / 0.2);
+}
+
+.border-background\/25 {
+  border-color: rgb(var(--background) / 0.25);
+}
+
+.border-background\/30 {
+  border-color: rgb(var(--background) / 0.3);
+}
+
+.border-background\/40 {
+  border-color: rgb(var(--background) / 0.4);
+}
+
+.border-background\/5 {
+  border-color: rgb(var(--background) / 0.05);
+}
+
+.border-background\/50 {
+  border-color: rgb(var(--background) / 0.5);
+}
+
+.border-background\/60 {
+  border-color: rgb(var(--background) / 0.6);
+}
+
+.border-background\/70 {
+  border-color: rgb(var(--background) / 0.7);
+}
+
+.border-background\/75 {
+  border-color: rgb(var(--background) / 0.75);
+}
+
+.border-background\/80 {
+  border-color: rgb(var(--background) / 0.8);
+}
+
+.border-background\/90 {
+  border-color: rgb(var(--background) / 0.9);
+}
+
+.border-background\/95 {
+  border-color: rgb(var(--background) / 0.95);
+}
+
+.border-cursor {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--cursor) / var(--tw-border-opacity));
+}
+
+.border-cursor\/0 {
+  border-color: rgb(var(--cursor) / 0);
+}
+
+.border-cursor\/10 {
+  border-color: rgb(var(--cursor) / 0.1);
+}
+
+.border-cursor\/100 {
+  border-color: rgb(var(--cursor) / 1);
+}
+
+.border-cursor\/20 {
+  border-color: rgb(var(--cursor) / 0.2);
+}
+
+.border-cursor\/25 {
+  border-color: rgb(var(--cursor) / 0.25);
+}
+
+.border-cursor\/30 {
+  border-color: rgb(var(--cursor) / 0.3);
+}
+
+.border-cursor\/40 {
+  border-color: rgb(var(--cursor) / 0.4);
+}
+
+.border-cursor\/5 {
+  border-color: rgb(var(--cursor) / 0.05);
+}
+
+.border-cursor\/50 {
+  border-color: rgb(var(--cursor) / 0.5);
+}
+
+.border-cursor\/60 {
+  border-color: rgb(var(--cursor) / 0.6);
+}
+
+.border-cursor\/70 {
+  border-color: rgb(var(--cursor) / 0.7);
+}
+
+.border-cursor\/75 {
+  border-color: rgb(var(--cursor) / 0.75);
+}
+
+.border-cursor\/80 {
+  border-color: rgb(var(--cursor) / 0.8);
+}
+
+.border-cursor\/90 {
+  border-color: rgb(var(--cursor) / 0.9);
+}
+
+.border-cursor\/95 {
+  border-color: rgb(var(--cursor) / 0.95);
+}
+
+.border-foreground {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--foreground) / var(--tw-border-opacity));
+}
+
+.border-foreground\/0 {
+  border-color: rgb(var(--foreground) / 0);
+}
+
+.border-foreground\/10 {
+  border-color: rgb(var(--foreground) / 0.1);
+}
+
+.border-foreground\/100 {
+  border-color: rgb(var(--foreground) / 1);
+}
+
+.border-foreground\/20 {
+  border-color: rgb(var(--foreground) / 0.2);
+}
+
+.border-foreground\/25 {
+  border-color: rgb(var(--foreground) / 0.25);
+}
+
+.border-foreground\/30 {
+  border-color: rgb(var(--foreground) / 0.3);
+}
+
+.border-foreground\/40 {
+  border-color: rgb(var(--foreground) / 0.4);
+}
+
+.border-foreground\/5 {
+  border-color: rgb(var(--foreground) / 0.05);
+}
+
+.border-foreground\/50 {
+  border-color: rgb(var(--foreground) / 0.5);
+}
+
+.border-foreground\/60 {
+  border-color: rgb(var(--foreground) / 0.6);
+}
+
+.border-foreground\/70 {
+  border-color: rgb(var(--foreground) / 0.7);
+}
+
+.border-foreground\/75 {
+  border-color: rgb(var(--foreground) / 0.75);
+}
+
+.border-foreground\/80 {
+  border-color: rgb(var(--foreground) / 0.8);
+}
+
+.border-foreground\/90 {
+  border-color: rgb(var(--foreground) / 0.9);
+}
+
+.border-foreground\/95 {
+  border-color: rgb(var(--foreground) / 0.95);
+}
+
+.border-selection_background {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--selection_background) / var(--tw-border-opacity));
+}
+
+.border-selection_background\/0 {
+  border-color: rgb(var(--selection_background) / 0);
+}
+
+.border-selection_background\/10 {
+  border-color: rgb(var(--selection_background) / 0.1);
+}
+
+.border-selection_background\/100 {
+  border-color: rgb(var(--selection_background) / 1);
+}
+
+.border-selection_background\/20 {
+  border-color: rgb(var(--selection_background) / 0.2);
+}
+
+.border-selection_background\/25 {
+  border-color: rgb(var(--selection_background) / 0.25);
+}
+
+.border-selection_background\/30 {
+  border-color: rgb(var(--selection_background) / 0.3);
+}
+
+.border-selection_background\/40 {
+  border-color: rgb(var(--selection_background) / 0.4);
+}
+
+.border-selection_background\/5 {
+  border-color: rgb(var(--selection_background) / 0.05);
+}
+
+.border-selection_background\/50 {
+  border-color: rgb(var(--selection_background) / 0.5);
+}
+
+.border-selection_background\/60 {
+  border-color: rgb(var(--selection_background) / 0.6);
+}
+
+.border-selection_background\/70 {
+  border-color: rgb(var(--selection_background) / 0.7);
+}
+
+.border-selection_background\/75 {
+  border-color: rgb(var(--selection_background) / 0.75);
+}
+
+.border-selection_background\/80 {
+  border-color: rgb(var(--selection_background) / 0.8);
+}
+
+.border-selection_background\/90 {
+  border-color: rgb(var(--selection_background) / 0.9);
+}
+
+.border-selection_background\/95 {
+  border-color: rgb(var(--selection_background) / 0.95);
+}
+
 .bg-background {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--background) / var(--tw-bg-opacity));
 }
 
+.bg-background\/0 {
+  background-color: rgb(var(--background) / 0);
+}
+
+.bg-background\/10 {
+  background-color: rgb(var(--background) / 0.1);
+}
+
+.bg-background\/100 {
+  background-color: rgb(var(--background) / 1);
+}
+
+.bg-background\/20 {
+  background-color: rgb(var(--background) / 0.2);
+}
+
+.bg-background\/25 {
+  background-color: rgb(var(--background) / 0.25);
+}
+
+.bg-background\/30 {
+  background-color: rgb(var(--background) / 0.3);
+}
+
+.bg-background\/40 {
+  background-color: rgb(var(--background) / 0.4);
+}
+
+.bg-background\/5 {
+  background-color: rgb(var(--background) / 0.05);
+}
+
+.bg-background\/50 {
+  background-color: rgb(var(--background) / 0.5);
+}
+
+.bg-background\/60 {
+  background-color: rgb(var(--background) / 0.6);
+}
+
+.bg-background\/70 {
+  background-color: rgb(var(--background) / 0.7);
+}
+
+.bg-background\/75 {
+  background-color: rgb(var(--background) / 0.75);
+}
+
+.bg-background\/80 {
+  background-color: rgb(var(--background) / 0.8);
+}
+
+.bg-background\/90 {
+  background-color: rgb(var(--background) / 0.9);
+}
+
+.bg-background\/95 {
+  background-color: rgb(var(--background) / 0.95);
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--black) / var(--tw-bg-opacity));
 }
 
+.bg-blue {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--blue) / var(--tw-bg-opacity));
+}
+
+.bg-cursor {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--cursor) / var(--tw-bg-opacity));
+}
+
+.bg-cursor\/0 {
+  background-color: rgb(var(--cursor) / 0);
+}
+
+.bg-cursor\/10 {
+  background-color: rgb(var(--cursor) / 0.1);
+}
+
+.bg-cursor\/100 {
+  background-color: rgb(var(--cursor) / 1);
+}
+
+.bg-cursor\/20 {
+  background-color: rgb(var(--cursor) / 0.2);
+}
+
+.bg-cursor\/25 {
+  background-color: rgb(var(--cursor) / 0.25);
+}
+
+.bg-cursor\/30 {
+  background-color: rgb(var(--cursor) / 0.3);
+}
+
+.bg-cursor\/40 {
+  background-color: rgb(var(--cursor) / 0.4);
+}
+
+.bg-cursor\/5 {
+  background-color: rgb(var(--cursor) / 0.05);
+}
+
+.bg-cursor\/50 {
+  background-color: rgb(var(--cursor) / 0.5);
+}
+
+.bg-cursor\/60 {
+  background-color: rgb(var(--cursor) / 0.6);
+}
+
+.bg-cursor\/70 {
+  background-color: rgb(var(--cursor) / 0.7);
+}
+
+.bg-cursor\/75 {
+  background-color: rgb(var(--cursor) / 0.75);
+}
+
+.bg-cursor\/80 {
+  background-color: rgb(var(--cursor) / 0.8);
+}
+
+.bg-cursor\/90 {
+  background-color: rgb(var(--cursor) / 0.9);
+}
+
+.bg-cursor\/95 {
+  background-color: rgb(var(--cursor) / 0.95);
+}
+
 .bg-foreground {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
 }
 
+.bg-foreground\/0 {
+  background-color: rgb(var(--foreground) / 0);
+}
+
+.bg-foreground\/10 {
+  background-color: rgb(var(--foreground) / 0.1);
+}
+
+.bg-foreground\/100 {
+  background-color: rgb(var(--foreground) / 1);
+}
+
+.bg-foreground\/20 {
+  background-color: rgb(var(--foreground) / 0.2);
+}
+
+.bg-foreground\/25 {
+  background-color: rgb(var(--foreground) / 0.25);
+}
+
+.bg-foreground\/30 {
+  background-color: rgb(var(--foreground) / 0.3);
+}
+
+.bg-foreground\/40 {
+  background-color: rgb(var(--foreground) / 0.4);
+}
+
+.bg-foreground\/5 {
+  background-color: rgb(var(--foreground) / 0.05);
+}
+
+.bg-foreground\/50 {
+  background-color: rgb(var(--foreground) / 0.5);
+}
+
+.bg-foreground\/60 {
+  background-color: rgb(var(--foreground) / 0.6);
+}
+
+.bg-foreground\/70 {
+  background-color: rgb(var(--foreground) / 0.7);
+}
+
+.bg-foreground\/75 {
+  background-color: rgb(var(--foreground) / 0.75);
+}
+
+.bg-foreground\/80 {
+  background-color: rgb(var(--foreground) / 0.8);
+}
+
+.bg-foreground\/90 {
+  background-color: rgb(var(--foreground) / 0.9);
+}
+
+.bg-foreground\/95 {
+  background-color: rgb(var(--foreground) / 0.95);
+}
+
 .bg-selection_background {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--selection_background) / var(--tw-bg-opacity));
 }
 
+.bg-selection_background\/0 {
+  background-color: rgb(var(--selection_background) / 0);
+}
+
+.bg-selection_background\/10 {
+  background-color: rgb(var(--selection_background) / 0.1);
+}
+
+.bg-selection_background\/100 {
+  background-color: rgb(var(--selection_background) / 1);
+}
+
+.bg-selection_background\/20 {
+  background-color: rgb(var(--selection_background) / 0.2);
+}
+
+.bg-selection_background\/25 {
+  background-color: rgb(var(--selection_background) / 0.25);
+}
+
+.bg-selection_background\/30 {
+  background-color: rgb(var(--selection_background) / 0.3);
+}
+
+.bg-selection_background\/40 {
+  background-color: rgb(var(--selection_background) / 0.4);
+}
+
+.bg-selection_background\/5 {
+  background-color: rgb(var(--selection_background) / 0.05);
+}
+
+.bg-selection_background\/50 {
+  background-color: rgb(var(--selection_background) / 0.5);
+}
+
+.bg-selection_background\/60 {
+  background-color: rgb(var(--selection_background) / 0.6);
+}
+
+.bg-selection_background\/70 {
+  background-color: rgb(var(--selection_background) / 0.7);
+}
+
+.bg-selection_background\/75 {
+  background-color: rgb(var(--selection_background) / 0.75);
+}
+
+.bg-selection_background\/80 {
+  background-color: rgb(var(--selection_background) / 0.8);
+}
+
+.bg-selection_background\/90 {
+  background-color: rgb(var(--selection_background) / 0.9);
+}
+
+.bg-selection_background\/95 {
+  background-color: rgb(var(--selection_background) / 0.95);
+}
+
 .bg-selection_foreground {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
 }
 
-.bg-blue {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--blue) / var(--tw-bg-opacity));
-}
-
-.bg-red {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--red) / var(--tw-bg-opacity));
-}
-
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--white) / var(--tw-bg-opacity));
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -1222,6 +1698,11 @@ video {
   padding-right: 1.5rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -1247,11 +1728,6 @@ video {
   padding-bottom: 1rem;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -1401,6 +1877,71 @@ video {
   line-height: 1.5;
 }
 
+.text-background {
+  --tw-text-opacity: 1;
+  color: rgb(var(--background) / var(--tw-text-opacity));
+}
+
+.text-background\/0 {
+  color: rgb(var(--background) / 0);
+}
+
+.text-background\/10 {
+  color: rgb(var(--background) / 0.1);
+}
+
+.text-background\/100 {
+  color: rgb(var(--background) / 1);
+}
+
+.text-background\/20 {
+  color: rgb(var(--background) / 0.2);
+}
+
+.text-background\/25 {
+  color: rgb(var(--background) / 0.25);
+}
+
+.text-background\/30 {
+  color: rgb(var(--background) / 0.3);
+}
+
+.text-background\/40 {
+  color: rgb(var(--background) / 0.4);
+}
+
+.text-background\/5 {
+  color: rgb(var(--background) / 0.05);
+}
+
+.text-background\/50 {
+  color: rgb(var(--background) / 0.5);
+}
+
+.text-background\/60 {
+  color: rgb(var(--background) / 0.6);
+}
+
+.text-background\/70 {
+  color: rgb(var(--background) / 0.7);
+}
+
+.text-background\/75 {
+  color: rgb(var(--background) / 0.75);
+}
+
+.text-background\/80 {
+  color: rgb(var(--background) / 0.8);
+}
+
+.text-background\/90 {
+  color: rgb(var(--background) / 0.9);
+}
+
+.text-background\/95 {
+  color: rgb(var(--background) / 0.95);
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(var(--black) / var(--tw-text-opacity));
@@ -1411,16 +1952,216 @@ video {
   color: rgb(var(--blue) / var(--tw-text-opacity));
 }
 
+.text-brightwhite {
+  --tw-text-opacity: 1;
+  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
+}
+
+.text-cursor {
+  --tw-text-opacity: 1;
+  color: rgb(var(--cursor) / var(--tw-text-opacity));
+}
+
+.text-cursor\/0 {
+  color: rgb(var(--cursor) / 0);
+}
+
+.text-cursor\/10 {
+  color: rgb(var(--cursor) / 0.1);
+}
+
+.text-cursor\/100 {
+  color: rgb(var(--cursor) / 1);
+}
+
+.text-cursor\/20 {
+  color: rgb(var(--cursor) / 0.2);
+}
+
+.text-cursor\/25 {
+  color: rgb(var(--cursor) / 0.25);
+}
+
+.text-cursor\/30 {
+  color: rgb(var(--cursor) / 0.3);
+}
+
+.text-cursor\/40 {
+  color: rgb(var(--cursor) / 0.4);
+}
+
+.text-cursor\/5 {
+  color: rgb(var(--cursor) / 0.05);
+}
+
+.text-cursor\/50 {
+  color: rgb(var(--cursor) / 0.5);
+}
+
+.text-cursor\/60 {
+  color: rgb(var(--cursor) / 0.6);
+}
+
+.text-cursor\/70 {
+  color: rgb(var(--cursor) / 0.7);
+}
+
+.text-cursor\/75 {
+  color: rgb(var(--cursor) / 0.75);
+}
+
+.text-cursor\/80 {
+  color: rgb(var(--cursor) / 0.8);
+}
+
+.text-cursor\/90 {
+  color: rgb(var(--cursor) / 0.9);
+}
+
+.text-cursor\/95 {
+  color: rgb(var(--cursor) / 0.95);
+}
+
+.text-cyan {
+  --tw-text-opacity: 1;
+  color: rgb(var(--cyan) / var(--tw-text-opacity));
+}
+
 .text-foreground {
   --tw-text-opacity: 1;
   color: rgb(var(--foreground) / var(--tw-text-opacity));
 }
 
+.text-foreground\/0 {
+  color: rgb(var(--foreground) / 0);
+}
+
+.text-foreground\/10 {
+  color: rgb(var(--foreground) / 0.1);
+}
+
+.text-foreground\/100 {
+  color: rgb(var(--foreground) / 1);
+}
+
+.text-foreground\/20 {
+  color: rgb(var(--foreground) / 0.2);
+}
+
+.text-foreground\/25 {
+  color: rgb(var(--foreground) / 0.25);
+}
+
+.text-foreground\/30 {
+  color: rgb(var(--foreground) / 0.3);
+}
+
+.text-foreground\/40 {
+  color: rgb(var(--foreground) / 0.4);
+}
+
+.text-foreground\/5 {
+  color: rgb(var(--foreground) / 0.05);
+}
+
+.text-foreground\/50 {
+  color: rgb(var(--foreground) / 0.5);
+}
+
+.text-foreground\/60 {
+  color: rgb(var(--foreground) / 0.6);
+}
+
+.text-foreground\/70 {
+  color: rgb(var(--foreground) / 0.7);
+}
+
+.text-foreground\/75 {
+  color: rgb(var(--foreground) / 0.75);
+}
+
+.text-foreground\/80 {
+  color: rgb(var(--foreground) / 0.8);
+}
+
+.text-foreground\/90 {
+  color: rgb(var(--foreground) / 0.9);
+}
+
+.text-foreground\/95 {
+  color: rgb(var(--foreground) / 0.95);
+}
+
 .text-red {
   --tw-text-opacity: 1;
   color: rgb(var(--red) / var(--tw-text-opacity));
 }
 
+.text-selection_background {
+  --tw-text-opacity: 1;
+  color: rgb(var(--selection_background) / var(--tw-text-opacity));
+}
+
+.text-selection_background\/0 {
+  color: rgb(var(--selection_background) / 0);
+}
+
+.text-selection_background\/10 {
+  color: rgb(var(--selection_background) / 0.1);
+}
+
+.text-selection_background\/100 {
+  color: rgb(var(--selection_background) / 1);
+}
+
+.text-selection_background\/20 {
+  color: rgb(var(--selection_background) / 0.2);
+}
+
+.text-selection_background\/25 {
+  color: rgb(var(--selection_background) / 0.25);
+}
+
+.text-selection_background\/30 {
+  color: rgb(var(--selection_background) / 0.3);
+}
+
+.text-selection_background\/40 {
+  color: rgb(var(--selection_background) / 0.4);
+}
+
+.text-selection_background\/5 {
+  color: rgb(var(--selection_background) / 0.05);
+}
+
+.text-selection_background\/50 {
+  color: rgb(var(--selection_background) / 0.5);
+}
+
+.text-selection_background\/60 {
+  color: rgb(var(--selection_background) / 0.6);
+}
+
+.text-selection_background\/70 {
+  color: rgb(var(--selection_background) / 0.7);
+}
+
+.text-selection_background\/75 {
+  color: rgb(var(--selection_background) / 0.75);
+}
+
+.text-selection_background\/80 {
+  color: rgb(var(--selection_background) / 0.8);
+}
+
+.text-selection_background\/90 {
+  color: rgb(var(--selection_background) / 0.9);
+}
+
+.text-selection_background\/95 {
+  color: rgb(var(--selection_background) / 0.95);
+}
+
 .text-selection_foreground {
   --tw-text-opacity: 1;
   color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
@@ -1431,21 +2172,6 @@ video {
   color: rgb(var(--white) / var(--tw-text-opacity));
 }
 
-.text-selection_background {
-  --tw-text-opacity: 1;
-  color: rgb(var(--selection_background) / var(--tw-text-opacity));
-}
-
-.text-brightred {
-  --tw-text-opacity: 1;
-  color: rgb(var(--brightred) / var(--tw-text-opacity));
-}
-
-.text-brightwhite {
-  --tw-text-opacity: 1;
-  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1458,6 +2184,16 @@ video {
   text-underline-offset: 4px;
 }
 
+.placeholder-blue::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(var(--blue) / var(--tw-placeholder-opacity));
+}
+
+.placeholder-blue::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(var(--blue) / var(--tw-placeholder-opacity));
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1492,38 +2228,24 @@ video {
   background-color: rgb(var(--background) / var(--tw-bg-opacity));
 }
 
+.hover\:bg-brightblack:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
+}
+
 .hover\:bg-foreground:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
 }
 
-.hover\:fill-black:hover {
+.hover\:text-background:hover {
-  fill: rgb(var(--black) / 1);
-}
-
-.hover\:text-xl:hover {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.hover\:text-black:hover {
   --tw-text-opacity: 1;
-  color: rgb(var(--black) / var(--tw-text-opacity));
+  color: rgb(var(--background) / var(--tw-text-opacity));
 }
 
-.hover\:text-foreground:hover {
+.hover\:text-brightwhite:hover {
   --tw-text-opacity: 1;
-  color: rgb(var(--foreground) / var(--tw-text-opacity));
+  color: rgb(var(--brightwhite) / var(--tw-text-opacity));
-}
-
-.hover\:text-selection_foreground:hover {
-  --tw-text-opacity: 1;
-  color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
-}
-
-.hover\:text-red:hover {
-  --tw-text-opacity: 1;
-  color: rgb(var(--red) / var(--tw-text-opacity));
 }
 
 .focus\:outline-none:focus {

tailwind.config.js

@@ -1,11 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  safelist: [
-    {
-      pattern: /hljs+/,
-    },
-  ],
   theme: {
       colors: {
           black: "rgb(var(--black) / <alpha-value>)",
@@ -29,19 +24,10 @@ export default {
           cursor: "rgb(var(--cursor) / <alpha-value>)",
           foreground: "rgb(var(--foreground) / <alpha-value>)",
           selection_background: "rgb(var(--selection_background) / <alpha-value>)",
+      }
    },
   extend: {},
-    hljs: {
+  safelist: [{
-      theme: "nord",
-      custom: {
-        general: {
-          comment: "#FEFEFE",
-        },
-      },
-    },
-  },
-  plugins: [require("tailwind-highlightjs")],
-  safelist: {
     pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
-  }
+  }],
 };

yarn.lock

@@ -2476,6 +2476,11 @@ highlight.js@^11.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
   integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
 
+highlight.js@^11.9.0:
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
+  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+
 html-encoder-decoder@^1.3.9:
   version "1.3.9"
   resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"