fixed css for task lists and code with syntax highlighting

apps/app/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },

apps/app/styles/editor.css

@@ -1,13 +1,3 @@
-.empty-node::after {
-  content: attr(data-placeholder);
-  color: rgb(var(--color-text-400));
-
-  position: absolute;
-  pointer-events: none;
-  top: 15px;
-  margin-left: 1px;
-}
-
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -42,38 +32,37 @@
 
 /* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
 
-ul[data-type="taskList"] li > label {
+ul[data-type="taskList"] li>label {
   margin-right: 0.2rem;
   user-select: none;
 }
 
 @media screen and (max-width: 768px) {
-  ul[data-type="taskList"] li > label {
+  ul[data-type="taskList"] li>label {
     margin-right: 0.5rem;
   }
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"] {
+ul[data-type="taskList"] li>label input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
-  background-color: var(--novel-white);
+  background-color: rgb(var(--color-background-100));
   margin: 0;
   cursor: pointer;
-  width: 1.2em;
+  width: 1.2rem;
-  height: 1.2em;
+  height: 1.2rem;
   position: relative;
-  top: 5px;
+  border: 2px solid rgb(var(--color-text-100));
-  border: 2px solid var(--novel-stone-900);
   margin-right: 0.3rem;
   display: grid;
   place-content: center;
 
   &:hover {
-    background-color: var(--novel-stone-50);
+    background-color: rgb(var(--color-background-80));
   }
 
   &:active {
-    background-color: var(--novel-stone-200);
+    background-color: rgb(var(--color-background-90));
   }
 
   &::before {
@@ -92,8 +81,8 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   }
 }
 
-ul[data-type="taskList"] li[data-checked="true"] > div > p {
+ul[data-type="taskList"] li[data-checked="true"]>div>p {
-  color: var(--novel-stone-400);
+  color: rgb(var(--color-text-200));
   text-decoration: line-through;
   text-decoration-thickness: 2px;
 }
@@ -103,6 +92,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 .tippy-box {
   max-width: 400px !important;
 }
+
 .ProseMirror {
   position: relative;
   word-wrap: break-word;
@@ -126,6 +116,22 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   -moz-appearance: textfield;
 }
 
+.ProseMirror pre {
+  background: #121212;
+  border-radius: 0.375rem;
+  border-color: rgba(var(--color-background-100));
+  border: 0.5px solid;
+  font-family: "JetBrainsMono", monospace;
+  padding: 0.75rem 1rem;
+}
+
+.ProseMirror pre code {
+  background: none;
+  color: inherit;
+  font-size: 0.8rem;
+  padding: 0;
+}
+
 .ProseMirror-icon {
   display: inline-block;
   line-height: 0.8;

apps/app/tailwind.config.js

@@ -182,5 +182,8 @@ module.exports = {
       custom: ["Inter", "sans-serif"],
     },
   },
-  plugins: [require("@tailwindcss/typography")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/typography")
+  ],
 };