style: use highlightjs monokai sublime for syntax highlight

jamesx00 · Dec 20, 2024 · 7d76e5a · 7d76e5a
1 parent a8d4cf0
commit 7d76e5a
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 121 deletions.
diff --git a/public/css/highlightjs.monokai-sublime.css b/public/css/highlightjs.monokai-sublime.css
@@ -0,0 +1,80 @@
+/*
+
+Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
+
+*/
+
+.hljs {
+	background: #23241f;
+	color: #f8f8f2;
+}
+
+.hljs-tag,
+.hljs-subst {
+	color: #f8f8f2;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+	color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-link {
+	color: #ae81ff;
+}
+
+.hljs-code,
+.hljs-title,
+.hljs-section,
+.hljs-selector-class {
+	color: #a6e22e;
+}
+
+.hljs-strong {
+	font-weight: bold;
+}
+
+.hljs-emphasis {
+	font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-attr {
+	color: #f92672;
+}
+
+.hljs-symbol,
+.hljs-attribute {
+	color: #66d9ef;
+}
+
+.hljs-params,
+.hljs-title.class_,
+.hljs-class .hljs-title {
+	color: #f8f8f2;
+}
+
+.hljs-string,
+.hljs-type,
+.hljs-built_in,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-variable {
+	color: #e6db74;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+	color: #75715e;
+}
diff --git a/public/css/tailwind.css b/public/css/tailwind.css
@@ -51,78 +51,89 @@
 
 /* @import "./prism.monokai.css"; */
 
+/* @import "./highlightjs.monokai.css"; */
+
 /*
-Monokai style - ported by Luigi Maselli - http://grigio.org
+
+Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
+
 */
 
 .hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #272822;
-  color: #ddd;
+  background: #23241f;
+  color: #f8f8f2;
 }
 
 .hljs-tag,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-link {
+  color: #ae81ff;
+}
+
+.hljs-code,
+.hljs-title,
+.hljs-section,
+.hljs-selector-class {
+  color: #a6e22e;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
 .hljs-keyword,
 .hljs-selector-tag,
-.hljs-literal,
-.hljs-strong,
-.hljs-name {
+.hljs-name,
+.hljs-attr {
   color: #f92672;
 }
 
-.hljs-code {
+.hljs-symbol,
+.hljs-attribute {
   color: #66d9ef;
 }
 
+.hljs-params,
+.hljs-title.class_,
 .hljs-class .hljs-title {
-  color: white;
-}
-
-.hljs-attribute,
-.hljs-symbol,
-.hljs-regexp,
-.hljs-link {
-  color: #bf79db;
+  color: #f8f8f2;
 }
 
 .hljs-string,
-.hljs-bullet,
-.hljs-subst,
-.hljs-title,
-.hljs-section,
-.hljs-emphasis,
 .hljs-type,
 .hljs-built_in,
-.hljs-builtin-name,
+.hljs-selector-id,
 .hljs-selector-attr,
 .hljs-selector-pseudo,
 .hljs-addition,
 .hljs-variable,
-.hljs-template-tag,
 .hljs-template-variable {
-  color: #a6e22e;
+  color: #e6db74;
 }
 
 .hljs-comment,
-.hljs-quote,
 .hljs-deletion,
 .hljs-meta {
   color: #75715e;
 }
 
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-doctag,
-.hljs-title,
-.hljs-section,
-.hljs-type,
-.hljs-selector-id {
-  font-weight: bold;
-}
-
 /* ! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com */
 
 /*
@@ -1279,74 +1290,6 @@ h4 {
   --tw-prose-invert-td-borders: #334155;
 }
 
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #272822;
-  color: #ddd;
-}
-
-.hljs-tag,
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-strong,
-.hljs-name {
-  color: #f92672;
-}
-
-.hljs-code {
-  color: #66d9ef;
-}
-
-.hljs-class .hljs-title {
-  color: white;
-}
-
-.hljs-attribute,
-.hljs-symbol,
-.hljs-regexp,
-.hljs-link {
-  color: #bf79db;
-}
-
-.hljs-string,
-.hljs-bullet,
-.hljs-subst,
-.hljs-title,
-.hljs-section,
-.hljs-emphasis,
-.hljs-type,
-.hljs-built_in,
-.hljs-builtin-name,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-addition,
-.hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-  color: #a6e22e;
-}
-
-.hljs-comment,
-.hljs-quote,
-.hljs-deletion,
-.hljs-meta {
-  color: #75715e;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-doctag,
-.hljs-title,
-.hljs-section,
-.hljs-type,
-.hljs-selector-id {
-  font-weight: bold;
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -3116,7 +3059,7 @@ code > .copy-content {
 #lesson-content pre:has(code) {
   position: relative;
   --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+  background-color: rgb(35 36 31 / var(--tw-bg-opacity));
   padding: 0.25rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;

diff --git a/public/css/tailwind.input.css b/public/css/tailwind.input.css
@@ -1,6 +1,7 @@
 @import "./core.css";
 /* @import "./prism.monokai.css"; */
-@import "./highlightjs.monokai.css";
+/* @import "./highlightjs.monokai.css"; */
+@import "./highlightjs.monokai-sublime.css";
 
 @tailwind base;
 @tailwind components;
@@ -81,7 +82,7 @@ code > .copy-content {
 #lesson-content {
 	@apply prose prose-slate max-w-none dark:prose-invert prose-pre:bg-transparent prose-pre:p-0;
 	@apply prose-img:mx-auto prose-hr:my-4 lg:mx-auto prose-headings:text-primary-800 prose-headings:font-bold;
-	@apply [&_pre:has(code)]:bg-slate-900 [&_pre:has(code)]:p-1 [&_pre:has(code)]:px-3 [&_pre:has(code)]:relative [&_pre:has(code)]:font-victor-mono;
+	@apply [&_pre:has(code)]:bg-[#23241f] [&_pre:has(code)]:p-1 [&_pre:has(code)]:px-3 [&_pre:has(code)]:relative [&_pre:has(code)]:font-victor-mono;
 }
 
 .mermaid:not([data-processed="true"]) {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,9 +6,6 @@ module.exports = {
 		"public/js/**/*.js",
 	],
 	theme: {
-		hljs: {
-			theme: "monokai",
-		},
 		extend: {
 			colors: {
 				primary: {
@@ -56,13 +53,5 @@ module.exports = {
 		},
 	},
 	darkMode: "class",
-	safelist: [
-		{
-			pattern: /hljs+/,
-		},
-	],
-	plugins: [
-		require("@tailwindcss/typography"),
-		require("tailwind-highlightjs"),
-	],
+	plugins: [require("@tailwindcss/typography")],
 };