From d8e019cc9576d6d29341383533d2e927afa38966 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sun, 24 Nov 2024 10:04:55 -0800
Subject: [PATCH] chore: match code highlight colors

---
 package.json                     |  2 +-
 src/styles/base/index.css        |  2 -
 src/styles/index.css             |  3 +
 src/styles/plugins/highlight.css | 94 ++++++++++++++++++++++++++++++++
 src/utils/helpers/general.js     |  1 -
 5 files changed, 98 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/plugins/highlight.css

diff --git a/package.json b/package.json
index f1e2562..2e32905 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "coryd.dev",
   "type": "module",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
diff --git a/src/styles/base/index.css b/src/styles/base/index.css
index 5eb91e5..88533e9 100644
--- a/src/styles/base/index.css
+++ b/src/styles/base/index.css
@@ -335,8 +335,6 @@ article {
 }
 
 .footnotes {
-  border-top: var(--border-gray);
-
   & ol li p {
     display: inline;
   }
diff --git a/src/styles/index.css b/src/styles/index.css
index a335a33..177abff 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -20,6 +20,9 @@
 @import url("./pages/watching.css") layer(page);
 @import url("./pages/webrings.css") layer(page);
 
+/* plugins */
+@import url("./plugins/highlight.css") layer(plugins);
+
 /* component styles */
 @import url("./components/addon-links.css") layer(components);
 @import url("./components/banners.css") layer(components);
diff --git a/src/styles/plugins/highlight.css b/src/styles/plugins/highlight.css
new file mode 100644
index 0000000..bafeb94
--- /dev/null
+++ b/src/styles/plugins/highlight.css
@@ -0,0 +1,94 @@
+code,
+pre {
+  color: var(--color-lightest);
+  background: var(--color-darkest);
+  border-radius: var(--border-radius-slight);
+  font-family: var(--font-mono);
+  line-height: var(--line-height-md);
+  padding: var(--spacing-lg);
+  overflow: auto;
+}
+
+pre {
+  border: var(--border-gray);
+}
+
+pre code {
+  padding: 0;
+}
+
+:not(pre) > code {
+  padding: var(--spacing-xs);
+  background: var(--color-darkest);
+}
+
+.hljs-comment {
+  color: #dfe3e8;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name {
+  color: #6b9eff;
+  font-weight: var(--font-weight-bold);
+}
+
+.hljs-string,
+.hljs-attribute,
+.hljs-literal,
+.hljs-addition {
+  color: #6fff6f;
+}
+
+.hljs-number,
+.hljs-operator,
+.hljs-variable {
+  color: #6b9eff;
+}
+
+.hljs-function .hljs-title,
+.hljs-title,
+.hljs-class .hljs-title {
+  color: #00ffff;
+  font-weight: var(--font-weight-bold);
+}
+
+.hljs-attr,
+.hljs-attr-value {
+  color: #ffb3ff;
+}
+
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #a2c4ff;
+}
+
+.hljs-meta,
+.hljs-meta-string {
+  color: #ffbf66;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #ff967d;
+}
+
+.hljs-link {
+  color: #e2b8ff;
+  text-decoration: underline;
+}
+
+.hljs-deletion {
+  color: #ff8b8b;
+}
+
+.hljs-strong {
+  font-weight: var(--font-weight-bold);
+  color: #ff7373;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+  color: #ff8f66;
+}
diff --git a/src/utils/helpers/general.js b/src/utils/helpers/general.js
index 346ae14..42840b9 100644
--- a/src/utils/helpers/general.js
+++ b/src/utils/helpers/general.js
@@ -4,7 +4,6 @@ import markdownIt from "markdown-it";
 import markdownItAnchor from "markdown-it-anchor";
 import markdownItFootnote from "markdown-it-footnote";
 import hljs from "highlight.js";
-import "highlight.js/styles/github-dark.min.css";
 import truncateHtml from "truncate-html";
 
 // arrays