switch to shiki for syntax highlighting

components/Header/Header.module.css

@@ -2,8 +2,8 @@
   width: 100%;
   height: 4.5em;
   padding: 0.7em 1.5em;
-  border-bottom: 1px solid var(--colors-kindaLight);
-  background-color: var(--colors-backgroundHeader);
+  border-bottom: 1px solid var(--colors-kinda-light);
+  background-color: var(--colors-background-header);
 
   /* make sticky */
   position: sticky;
@@ -25,7 +25,7 @@
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
-  color: var(--colors-mediumDark) !important;
+  color: var(--colors-medium-dark) !important;
 }
 
 .homeLink:hover,
@@ -63,7 +63,7 @@
 
   .homeLink:hover .homeImage,
   .homeLink:focus-visible .homeImage {
-    border-color: var(--colors-linkUnderline);
+    border-color: var(--colors-link-underline);
   }
 
   .name {