move hljs classes to code component styled JSX

components/embeds/Code.tsx

@@ -6,17 +6,108 @@ const CustomCode = (props: any) => {
 
     // full multi-line code blocks with highlight.js and copy-to-clipboard button
     return (
-      <div>
+      <div className="code_block">
         <CopyButton source={props.children} />
         <code {...props}>{props.children}</code>
+
         <style jsx>{`
-          div {
+          .code_block {
             position: relative;
             max-width: 100%;
             overflow-x: scroll;
             margin: 1em 0;
           }
         `}</style>
+
+        <style jsx global>{`
+          .hljs {
+            color: var(--highlight-color);
+            background: var(--highlight-bg);
+          }
+
+          .hljs-subst {
+            color: var(--highlight-color);
+          }
+
+          .hljs-comment {
+            color: var(--highlight-comment);
+          }
+
+          .hljs-keyword,
+          .hljs-selector-tag,
+          .hljs-doctag,
+          .hljs-section,
+          .hljs-selector-class,
+          .hljs-selector-pseudo,
+          .hljs-meta,
+          .hljs-meta .hljs-keyword {
+            color: var(--highlight-keyword);
+          }
+
+          .hljs-attr {
+            color: var(--highlight-attribute);
+          }
+
+          .hljs-attribute {
+            color: var(--highlight-symbol);
+          }
+
+          .hljs-name,
+          .hljs-type,
+          .hljs-number,
+          .hljs-selector-id,
+          .hljs-quote,
+          .hljs-template-tag {
+            color: var(--highlight-namespace);
+          }
+
+          .hljs-string,
+          .hljs-regexp,
+          .hljs-symbol,
+          .hljs-variable,
+          .hljs-template-variable,
+          .hljs-link,
+          .hljs-selector-attr,
+          .hljs-meta .hljs-string {
+            color: var(--highlight-variable);
+          }
+
+          .hljs-built_in,
+          .hljs-title,
+          .hljs-literal {
+            color: var(--highlight-literal);
+          }
+
+          .hljs-bullet,
+          .hljs-code {
+            color: var(--highlight-punctuation);
+          }
+
+          .hljs-deletion {
+            color: var(--highlight-deletion);
+          }
+
+          .hljs-addition {
+            color: var(--highlight-addition);
+          }
+
+          .hljs-emphasis {
+            font-style: italic;
+          }
+
+          .hljs-strong {
+            font-weight: bold;
+          }
+
+          .hljs-formula,
+          .hljs-operator,
+          .hljs-params,
+          .hljs-property,
+          .hljs-punctuation,
+          .hljs-tag {
+            /* intentionally empty */
+          }
+        `}</style>
       </div>
     );
   } else {

pages/_app.tsx

@@ -16,7 +16,6 @@ import meJpg from "../public/static/images/me.jpg";
 import "modern-normalize/modern-normalize.css";
 import "../styles/colors.css";
 import "../styles/typography.css";
-import "../styles/highlight.css";
 import "../styles/index.css";
 
 const App = ({ Component, pageProps }: AppProps) => {

styles/highlight.css

@@ -1,87 +0,0 @@
-.hljs {
-  color: var(--highlight-color);
-  background: var(--highlight-bg);
-}
-
-.hljs-subst {
-  color: var(--highlight-color);
-}
-
-.hljs-comment {
-  color: var(--highlight-comment);
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-doctag,
-.hljs-section,
-.hljs-selector-class,
-.hljs-selector-pseudo,
-.hljs-meta,
-.hljs-meta .hljs-keyword {
-  color: var(--highlight-keyword);
-}
-
-.hljs-attr {
-  color: var(--highlight-attribute);
-}
-
-.hljs-attribute {
-  color: var(--highlight-symbol);
-}
-
-.hljs-name,
-.hljs-type,
-.hljs-number,
-.hljs-selector-id,
-.hljs-quote,
-.hljs-template-tag {
-  color: var(--highlight-namespace);
-}
-
-.hljs-string,
-.hljs-regexp,
-.hljs-symbol,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-link,
-.hljs-selector-attr,
-.hljs-meta .hljs-string {
-  color: var(--highlight-variable);
-}
-
-.hljs-built_in,
-.hljs-title,
-.hljs-literal {
-  color: var(--highlight-literal);
-}
-
-.hljs-bullet,
-.hljs-code {
-  color: var(--highlight-punctuation);
-}
-
-.hljs-deletion {
-  color: var(--highlight-deletion);
-}
-
-.hljs-addition {
-  color: var(--highlight-addition);
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-formula,
-.hljs-operator,
-.hljs-params,
-.hljs-property,
-.hljs-punctuation,
-.hljs-tag {
-  /* intentionally empty */
-}