diff --git a/Makefile b/Makefile
index 289e23a..1c878f8 100644
--- a/Makefile
+++ b/Makefile
@@ -1,2 +1,6 @@
 run-example:
 	cd exampleSite && hugo server -D --gc -p 13131
+
+chroma-css:
+	hugo gen chromastyles --style=dracula > assets/css/lib/chroma-dark.css
+	hugo gen chromastyles --style=github > assets/css/lib/chroma-light.css
diff --git a/README.md b/README.md
index 457842a..225cc54 100644
--- a/README.md
+++ b/README.md
@@ -99,6 +99,18 @@ menu:
 ```
 
 
+## Highlight code with Chroma, no bullshit
+
+PaperMod uses highlight.js to highlight code blocks.
+In PaperModX, we use Chroma which is the recommended way in Hugo's
+[official docs](https://gohugo.io/content-management/syntax-highlighting/#:~:text=Hugo%20uses%20Chroma%20as%20its%20code%20highlighter%3B%20it%20is%20built%20in%20Go%20and%20is%20really%2C%20really%20fast),
+thus changing theme is easily supported.
+
+By default the themes are `github` for light and `dracula` for dark,
+you can change it by adding `chroma-light.css` and `chroma-dark.css`
+in site's `assets/css/lib` directory.
+
+
 ## Social icons from Simple Icons
 
 Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/).
diff --git a/assets/css/common/highlight.scss b/assets/css/common/highlight.scss
new file mode 100644
index 0000000..810cc26
--- /dev/null
+++ b/assets/css/common/highlight.scss
@@ -0,0 +1,10 @@
+@import '../lib/chroma-light';
+
+// for github theme, add a background color
+.chroma {
+  background-color: #f6f8fa;
+}
+
+.dark {
+  @import '../lib/chroma-dark';
+}
diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
index 61e3581..d187987 100644
--- a/assets/css/common/post-single.css
+++ b/assets/css/common/post-single.css
@@ -193,7 +193,6 @@ h6:hover .anchor {
 
 .post-content .highlight:not(table) {
     margin: 10px auto;
-    background: var(--hljs-bg) !important;
     border-radius: var(--radius);
 }
 
@@ -230,22 +229,27 @@ h6:hover .anchor {
     display: none;
 }
 
+/* code block */
+.post-content .chroma {
+    border-radius: var(--radius);
+}
+/* TODO refactor this shit */
 .post-content code {
+    /* inline code */
+    background-color: var(--code-bg);
+
     margin: auto 4px;
     padding: 4px 6px;
     font-size: 0.78em;
     line-height: 1.5;
-    background: var(--code-bg);
     border-radius: 2px;
 }
-
 .post-content pre code {
+    /* reset inline code */
+    background-color: unset;
     display: block;
     margin: auto 0;
     padding: 10px;
-    color: rgb(213, 213, 214);
-    background: var(--hljs-bg) !important;
-    border-radius: var(--radius);
     overflow-x: auto;
     word-break: break-all;
 }
@@ -416,7 +420,7 @@ h6:hover .anchor {
 
 
 .post-content :not(table) ::-webkit-scrollbar-thumb {
-    border: 2px solid var(--hljs-bg);
+    border: 2px solid var(--code-bg);
     background: rgb(113, 113, 117);
 }
 
diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css
index 33eaebb..965e5a5 100644
--- a/assets/css/core/theme-vars.css
+++ b/assets/css/core/theme-vars.css
@@ -14,7 +14,6 @@
     --secondary: rgb(108, 108, 108);
     --tertiary: rgb(214, 214, 214);
     --content: rgb(31, 31, 31);
-    --hljs-bg: rgb(28, 29, 33);
     --code-bg: rgb(245, 245, 245);
     --border: rgb(238, 238, 238);
     --link-color: var(--primary);
@@ -31,7 +30,6 @@
     --secondary: rgb(155, 156, 157);
     --tertiary: rgb(65, 66, 68);
     --content: rgb(196, 196, 197);
-    --hljs-bg: rgb(46, 46, 51);
     --code-bg: rgb(55, 56, 62);
     --border: rgb(51, 51, 51);
     --link-color: var(--primary);
diff --git a/assets/css/lib/chroma-dark.css b/assets/css/lib/chroma-dark.css
new file mode 100644
index 0000000..84bd15a
--- /dev/null
+++ b/assets/css/lib/chroma-dark.css
@@ -0,0 +1,82 @@
+/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err {  }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Keyword */ .chroma .k { color: #ff79c6 }
+/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
+/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
+/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
+/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
+/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
+/* KeywordType */ .chroma .kt { color: #8be9fd }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #50fa7b }
+/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
+/* NameBuiltinPseudo */ .chroma .bp {  }
+/* NameClass */ .chroma .nc { color: #50fa7b }
+/* NameConstant */ .chroma .no {  }
+/* NameDecorator */ .chroma .nd {  }
+/* NameEntity */ .chroma .ni {  }
+/* NameException */ .chroma .ne {  }
+/* NameFunction */ .chroma .nf { color: #50fa7b }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
+/* NameNamespace */ .chroma .nn {  }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #ff79c6 }
+/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
+/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
+/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
+/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #f1fa8c }
+/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
+/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
+/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
+/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
+/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
+/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
+/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
+/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
+/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
+/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
+/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
+/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
+/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
+/* LiteralNumber */ .chroma .m { color: #bd93f9 }
+/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
+/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
+/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
+/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
+/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
+/* Operator */ .chroma .o { color: #ff79c6 }
+/* OperatorWord */ .chroma .ow { color: #ff79c6 }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #6272a4 }
+/* CommentHashbang */ .chroma .ch { color: #6272a4 }
+/* CommentMultiline */ .chroma .cm { color: #6272a4 }
+/* CommentSingle */ .chroma .c1 { color: #6272a4 }
+/* CommentSpecial */ .chroma .cs { color: #6272a4 }
+/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
+/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #ff5555 }
+/* GenericEmph */ .chroma .ge { text-decoration: underline }
+/* GenericError */ .chroma .gr {  }
+/* GenericHeading */ .chroma .gh { font-weight: bold }
+/* GenericInserted */ .chroma .gi { color: #50fa7b; font-weight: bold }
+/* GenericOutput */ .chroma .go { color: #44475a }
+/* GenericPrompt */ .chroma .gp {  }
+/* GenericStrong */ .chroma .gs {  }
+/* GenericSubheading */ .chroma .gu { font-weight: bold }
+/* GenericTraceback */ .chroma .gt {  }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w {  }
diff --git a/assets/css/lib/chroma-light.css b/assets/css/lib/chroma-light.css
new file mode 100644
index 0000000..23be044
--- /dev/null
+++ b/assets/css/lib/chroma-light.css
@@ -0,0 +1,82 @@
+/* Background */ .chroma { background-color: #ffffff }
+/* Other */ .chroma .x {  }
+/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
+/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
+/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
+/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
+/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
+/* Keyword */ .chroma .k { color: #000000; font-weight: bold }
+/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
+/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
+/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
+/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
+/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
+/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold }
+/* Name */ .chroma .n {  }
+/* NameAttribute */ .chroma .na { color: #008080 }
+/* NameBuiltin */ .chroma .nb { color: #0086b3 }
+/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
+/* NameClass */ .chroma .nc { color: #445588; font-weight: bold }
+/* NameConstant */ .chroma .no { color: #008080 }
+/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
+/* NameEntity */ .chroma .ni { color: #800080 }
+/* NameException */ .chroma .ne { color: #990000; font-weight: bold }
+/* NameFunction */ .chroma .nf { color: #990000; font-weight: bold }
+/* NameFunctionMagic */ .chroma .fm {  }
+/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold }
+/* NameNamespace */ .chroma .nn { color: #555555 }
+/* NameOther */ .chroma .nx {  }
+/* NameProperty */ .chroma .py {  }
+/* NameTag */ .chroma .nt { color: #000080 }
+/* NameVariable */ .chroma .nv { color: #008080 }
+/* NameVariableClass */ .chroma .vc { color: #008080 }
+/* NameVariableGlobal */ .chroma .vg { color: #008080 }
+/* NameVariableInstance */ .chroma .vi { color: #008080 }
+/* NameVariableMagic */ .chroma .vm {  }
+/* Literal */ .chroma .l {  }
+/* LiteralDate */ .chroma .ld {  }
+/* LiteralString */ .chroma .s { color: #dd1144 }
+/* LiteralStringAffix */ .chroma .sa { color: #dd1144 }
+/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 }
+/* LiteralStringChar */ .chroma .sc { color: #dd1144 }
+/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 }
+/* LiteralStringDoc */ .chroma .sd { color: #dd1144 }
+/* LiteralStringDouble */ .chroma .s2 { color: #dd1144 }
+/* LiteralStringEscape */ .chroma .se { color: #dd1144 }
+/* LiteralStringHeredoc */ .chroma .sh { color: #dd1144 }
+/* LiteralStringInterpol */ .chroma .si { color: #dd1144 }
+/* LiteralStringOther */ .chroma .sx { color: #dd1144 }
+/* LiteralStringRegex */ .chroma .sr { color: #009926 }
+/* LiteralStringSingle */ .chroma .s1 { color: #dd1144 }
+/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
+/* LiteralNumber */ .chroma .m { color: #009999 }
+/* LiteralNumberBin */ .chroma .mb { color: #009999 }
+/* LiteralNumberFloat */ .chroma .mf { color: #009999 }
+/* LiteralNumberHex */ .chroma .mh { color: #009999 }
+/* LiteralNumberInteger */ .chroma .mi { color: #009999 }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 }
+/* LiteralNumberOct */ .chroma .mo { color: #009999 }
+/* Operator */ .chroma .o { color: #000000; font-weight: bold }
+/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
+/* Punctuation */ .chroma .p {  }
+/* Comment */ .chroma .c { color: #999988; font-style: italic }
+/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
+/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
+/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
+/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
+/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
+/* Generic */ .chroma .g {  }
+/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
+/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
+/* GenericError */ .chroma .gr { color: #aa0000 }
+/* GenericHeading */ .chroma .gh { color: #999999 }
+/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
+/* GenericOutput */ .chroma .go { color: #888888 }
+/* GenericPrompt */ .chroma .gp { color: #555555 }
+/* GenericStrong */ .chroma .gs { font-weight: bold }
+/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
+/* GenericTraceback */ .chroma .gt { color: #aa0000 }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline }
+/* TextWhitespace */ .chroma .w { color: #bbbbbb }
diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index 78d5639..f68212b 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -11,7 +11,6 @@ buildDrafts: false
 buildFuture: false
 buildExpired: false
 enableEmoji: true
-pygmentsUseClasses: true
 # googleAnalytics: UA-123-45
 
 minify:
@@ -94,6 +93,7 @@ params:
     mainSections:
       - docs
       - posts
+    disableAnchoredHeadings: true
 
     defaultTheme: auto
     # disableThemeToggle: true
@@ -188,13 +188,10 @@ markup:
     goldmark:
         renderer:
             unsafe: true
-#     highlight:
-#         # anchorLineNos: true
-#         codeFences: true
-#         guessSyntax: true
-#         lineNos: true
-#         # noClasses: false
-#         style: monokai
+    highlight:
+        style: dracula
+        lineNos: true
+        noClasses: false
 
 privacy:
     vimeo:
diff --git a/exampleSite/content/docs/faq.md b/exampleSite/content/docs/faq.md
index 0a2f879..6ec0fd9 100644
--- a/exampleSite/content/docs/faq.md
+++ b/exampleSite/content/docs/faq.md
@@ -250,32 +250,15 @@ ex.
 
 ## Using Hugo's Syntax highlighter "chroma"
 
-1. Set hugo's markdown styling in site `config.yml`
+Set hugo's markdown styling in site `config.yml`
 
-    ```yml
-    markup:
-        highlight:
-            # anchorLineNos: true
-            codeFences: true
-            guessSyntax: true
-            lineNos: true
-            # noClasses: false
-            style: monokai
-    ```
+```yml
+markup:
+    highlight:
+        noClasses: false
+```
 
-2. If you want `lineNos: true`, the background won't be proper.
-   This will only work with `noClasses: false` or `pygmentsUseClasses: true`.
-   Read [Generate Syntax Highlighter CSS](https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css)
-
-    Add the following to `assets/css/extended/custom.css`
-
-    ```css
-    .chroma {
-        background-color: unset;
-    }
-    ```
-
-    More Info : [Configure Markup - Highlight](https://gohugo.io/getting-started/configuration-markup#highlight)
+`noClasses` has to be `false` to make highlight color follows the theme.
 
 ---
 
diff --git a/exampleSite/content/docs/papermodx-new-features.md b/exampleSite/content/docs/papermodx-new-features.md
index 2f58b0a..0f2cc12 100644
--- a/exampleSite/content/docs/papermodx-new-features.md
+++ b/exampleSite/content/docs/papermodx-new-features.md
@@ -99,6 +99,18 @@ menu:
 ```
 
 
+## Highlight code with Chroma, no bullshit
+
+PaperMod uses highlight.js to highlight code blocks.
+In PaperModX, we use Chroma which is the recommended way in Hugo's
+[official docs](https://gohugo.io/content-management/syntax-highlighting/#:~:text=Hugo%20uses%20Chroma%20as%20its%20code%20highlighter%3B%20it%20is%20built%20in%20Go%20and%20is%20really%2C%20really%20fast),
+thus changing theme is easily supported.
+
+By default the themes are `github` for light and `dracula` for dark,
+you can change it by adding `chroma-light.css` and `chroma-dark.css`
+in site's `assets/css/lib` directory.
+
+
 ## Social icons from Simple Icons
 
 Add social icons with `-simple` suffix from [Simple Icons](https://simpleicons.org/).
diff --git a/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
new file mode 100644
index 0000000..125e9fc
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@@ -0,0 +1,571 @@
+/* Background */
+.chroma {
+  background-color: #ffffff; }
+
+/* Other */
+/* Error */
+.chroma .err {
+  color: #a61717;
+  background-color: #e3d2d2; }
+
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0; }
+
+/* LineTable */
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: auto;
+  overflow: auto;
+  display: block; }
+
+/* LineHighlight */
+.chroma .hl {
+  display: block;
+  width: 100%;
+  background-color: #ffffcc; }
+
+/* LineNumbersTable */
+.chroma .lnt {
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #7f7f7f; }
+
+/* LineNumbers */
+.chroma .ln {
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #7f7f7f; }
+
+/* Keyword */
+.chroma .k {
+  color: #000000;
+  font-weight: bold; }
+
+/* KeywordConstant */
+.chroma .kc {
+  color: #000000;
+  font-weight: bold; }
+
+/* KeywordDeclaration */
+.chroma .kd {
+  color: #000000;
+  font-weight: bold; }
+
+/* KeywordNamespace */
+.chroma .kn {
+  color: #000000;
+  font-weight: bold; }
+
+/* KeywordPseudo */
+.chroma .kp {
+  color: #000000;
+  font-weight: bold; }
+
+/* KeywordReserved */
+.chroma .kr {
+  color: #000000;
+  font-weight: bold; }
+
+/* KeywordType */
+.chroma .kt {
+  color: #445588;
+  font-weight: bold; }
+
+/* Name */
+/* NameAttribute */
+.chroma .na {
+  color: #008080; }
+
+/* NameBuiltin */
+.chroma .nb {
+  color: #0086b3; }
+
+/* NameBuiltinPseudo */
+.chroma .bp {
+  color: #999999; }
+
+/* NameClass */
+.chroma .nc {
+  color: #445588;
+  font-weight: bold; }
+
+/* NameConstant */
+.chroma .no {
+  color: #008080; }
+
+/* NameDecorator */
+.chroma .nd {
+  color: #3c5d5d;
+  font-weight: bold; }
+
+/* NameEntity */
+.chroma .ni {
+  color: #800080; }
+
+/* NameException */
+.chroma .ne {
+  color: #990000;
+  font-weight: bold; }
+
+/* NameFunction */
+.chroma .nf {
+  color: #990000;
+  font-weight: bold; }
+
+/* NameFunctionMagic */
+/* NameLabel */
+.chroma .nl {
+  color: #990000;
+  font-weight: bold; }
+
+/* NameNamespace */
+.chroma .nn {
+  color: #555555; }
+
+/* NameOther */
+/* NameProperty */
+/* NameTag */
+.chroma .nt {
+  color: #000080; }
+
+/* NameVariable */
+.chroma .nv {
+  color: #008080; }
+
+/* NameVariableClass */
+.chroma .vc {
+  color: #008080; }
+
+/* NameVariableGlobal */
+.chroma .vg {
+  color: #008080; }
+
+/* NameVariableInstance */
+.chroma .vi {
+  color: #008080; }
+
+/* NameVariableMagic */
+/* Literal */
+/* LiteralDate */
+/* LiteralString */
+.chroma .s {
+  color: #dd1144; }
+
+/* LiteralStringAffix */
+.chroma .sa {
+  color: #dd1144; }
+
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: #dd1144; }
+
+/* LiteralStringChar */
+.chroma .sc {
+  color: #dd1144; }
+
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: #dd1144; }
+
+/* LiteralStringDoc */
+.chroma .sd {
+  color: #dd1144; }
+
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: #dd1144; }
+
+/* LiteralStringEscape */
+.chroma .se {
+  color: #dd1144; }
+
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: #dd1144; }
+
+/* LiteralStringInterpol */
+.chroma .si {
+  color: #dd1144; }
+
+/* LiteralStringOther */
+.chroma .sx {
+  color: #dd1144; }
+
+/* LiteralStringRegex */
+.chroma .sr {
+  color: #009926; }
+
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: #dd1144; }
+
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: #990073; }
+
+/* LiteralNumber */
+.chroma .m {
+  color: #009999; }
+
+/* LiteralNumberBin */
+.chroma .mb {
+  color: #009999; }
+
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: #009999; }
+
+/* LiteralNumberHex */
+.chroma .mh {
+  color: #009999; }
+
+/* LiteralNumberInteger */
+.chroma .mi {
+  color: #009999; }
+
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: #009999; }
+
+/* LiteralNumberOct */
+.chroma .mo {
+  color: #009999; }
+
+/* Operator */
+.chroma .o {
+  color: #000000;
+  font-weight: bold; }
+
+/* OperatorWord */
+.chroma .ow {
+  color: #000000;
+  font-weight: bold; }
+
+/* Punctuation */
+/* Comment */
+.chroma .c {
+  color: #999988;
+  font-style: italic; }
+
+/* CommentHashbang */
+.chroma .ch {
+  color: #999988;
+  font-style: italic; }
+
+/* CommentMultiline */
+.chroma .cm {
+  color: #999988;
+  font-style: italic; }
+
+/* CommentSingle */
+.chroma .c1 {
+  color: #999988;
+  font-style: italic; }
+
+/* CommentSpecial */
+.chroma .cs {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic; }
+
+/* CommentPreproc */
+.chroma .cp {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic; }
+
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic; }
+
+/* Generic */
+/* GenericDeleted */
+.chroma .gd {
+  color: #000000;
+  background-color: #ffdddd; }
+
+/* GenericEmph */
+.chroma .ge {
+  color: #000000;
+  font-style: italic; }
+
+/* GenericError */
+.chroma .gr {
+  color: #aa0000; }
+
+/* GenericHeading */
+.chroma .gh {
+  color: #999999; }
+
+/* GenericInserted */
+.chroma .gi {
+  color: #000000;
+  background-color: #ddffdd; }
+
+/* GenericOutput */
+.chroma .go {
+  color: #888888; }
+
+/* GenericPrompt */
+.chroma .gp {
+  color: #555555; }
+
+/* GenericStrong */
+.chroma .gs {
+  font-weight: bold; }
+
+/* GenericSubheading */
+.chroma .gu {
+  color: #aaaaaa; }
+
+/* GenericTraceback */
+.chroma .gt {
+  color: #aa0000; }
+
+/* GenericUnderline */
+.chroma .gl {
+  text-decoration: underline; }
+
+/* TextWhitespace */
+.chroma .w {
+  color: #bbbbbb; }
+
+.chroma {
+  background-color: #f6f8fa; }
+
+.dark {
+  /* Background */
+  /* Other */
+  /* Error */
+  /* LineTableTD */
+  /* LineTable */
+  /* LineHighlight */
+  /* LineNumbersTable */
+  /* LineNumbers */
+  /* Keyword */
+  /* KeywordConstant */
+  /* KeywordDeclaration */
+  /* KeywordNamespace */
+  /* KeywordPseudo */
+  /* KeywordReserved */
+  /* KeywordType */
+  /* Name */
+  /* NameAttribute */
+  /* NameBuiltin */
+  /* NameBuiltinPseudo */
+  /* NameClass */
+  /* NameConstant */
+  /* NameDecorator */
+  /* NameEntity */
+  /* NameException */
+  /* NameFunction */
+  /* NameFunctionMagic */
+  /* NameLabel */
+  /* NameNamespace */
+  /* NameOther */
+  /* NameProperty */
+  /* NameTag */
+  /* NameVariable */
+  /* NameVariableClass */
+  /* NameVariableGlobal */
+  /* NameVariableInstance */
+  /* NameVariableMagic */
+  /* Literal */
+  /* LiteralDate */
+  /* LiteralString */
+  /* LiteralStringAffix */
+  /* LiteralStringBacktick */
+  /* LiteralStringChar */
+  /* LiteralStringDelimiter */
+  /* LiteralStringDoc */
+  /* LiteralStringDouble */
+  /* LiteralStringEscape */
+  /* LiteralStringHeredoc */
+  /* LiteralStringInterpol */
+  /* LiteralStringOther */
+  /* LiteralStringRegex */
+  /* LiteralStringSingle */
+  /* LiteralStringSymbol */
+  /* LiteralNumber */
+  /* LiteralNumberBin */
+  /* LiteralNumberFloat */
+  /* LiteralNumberHex */
+  /* LiteralNumberInteger */
+  /* LiteralNumberIntegerLong */
+  /* LiteralNumberOct */
+  /* Operator */
+  /* OperatorWord */
+  /* Punctuation */
+  /* Comment */
+  /* CommentHashbang */
+  /* CommentMultiline */
+  /* CommentSingle */
+  /* CommentSpecial */
+  /* CommentPreproc */
+  /* CommentPreprocFile */
+  /* Generic */
+  /* GenericDeleted */
+  /* GenericEmph */
+  /* GenericError */
+  /* GenericHeading */
+  /* GenericInserted */
+  /* GenericOutput */
+  /* GenericPrompt */
+  /* GenericStrong */
+  /* GenericSubheading */
+  /* GenericTraceback */
+  /* GenericUnderline */
+  /* TextWhitespace */ }
+  .dark .chroma {
+    color: #f8f8f2;
+    background-color: #282a36; }
+  .dark .chroma .lntd {
+    vertical-align: top;
+    padding: 0;
+    margin: 0;
+    border: 0; }
+  .dark .chroma .lntable {
+    border-spacing: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: auto;
+    overflow: auto;
+    display: block; }
+  .dark .chroma .hl {
+    display: block;
+    width: 100%;
+    background-color: #ffffcc; }
+  .dark .chroma .lnt {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f; }
+  .dark .chroma .ln {
+    margin-right: 0.4em;
+    padding: 0 0.4em 0 0.4em;
+    color: #7f7f7f; }
+  .dark .chroma .k {
+    color: #ff79c6; }
+  .dark .chroma .kc {
+    color: #ff79c6; }
+  .dark .chroma .kd {
+    color: #8be9fd;
+    font-style: italic; }
+  .dark .chroma .kn {
+    color: #ff79c6; }
+  .dark .chroma .kp {
+    color: #ff79c6; }
+  .dark .chroma .kr {
+    color: #ff79c6; }
+  .dark .chroma .kt {
+    color: #8be9fd; }
+  .dark .chroma .na {
+    color: #50fa7b; }
+  .dark .chroma .nb {
+    color: #8be9fd;
+    font-style: italic; }
+  .dark .chroma .nc {
+    color: #50fa7b; }
+  .dark .chroma .nf {
+    color: #50fa7b; }
+  .dark .chroma .nl {
+    color: #8be9fd;
+    font-style: italic; }
+  .dark .chroma .nt {
+    color: #ff79c6; }
+  .dark .chroma .nv {
+    color: #8be9fd;
+    font-style: italic; }
+  .dark .chroma .vc {
+    color: #8be9fd;
+    font-style: italic; }
+  .dark .chroma .vg {
+    color: #8be9fd;
+    font-style: italic; }
+  .dark .chroma .vi {
+    color: #8be9fd;
+    font-style: italic; }
+  .dark .chroma .s {
+    color: #f1fa8c; }
+  .dark .chroma .sa {
+    color: #f1fa8c; }
+  .dark .chroma .sb {
+    color: #f1fa8c; }
+  .dark .chroma .sc {
+    color: #f1fa8c; }
+  .dark .chroma .dl {
+    color: #f1fa8c; }
+  .dark .chroma .sd {
+    color: #f1fa8c; }
+  .dark .chroma .s2 {
+    color: #f1fa8c; }
+  .dark .chroma .se {
+    color: #f1fa8c; }
+  .dark .chroma .sh {
+    color: #f1fa8c; }
+  .dark .chroma .si {
+    color: #f1fa8c; }
+  .dark .chroma .sx {
+    color: #f1fa8c; }
+  .dark .chroma .sr {
+    color: #f1fa8c; }
+  .dark .chroma .s1 {
+    color: #f1fa8c; }
+  .dark .chroma .ss {
+    color: #f1fa8c; }
+  .dark .chroma .m {
+    color: #bd93f9; }
+  .dark .chroma .mb {
+    color: #bd93f9; }
+  .dark .chroma .mf {
+    color: #bd93f9; }
+  .dark .chroma .mh {
+    color: #bd93f9; }
+  .dark .chroma .mi {
+    color: #bd93f9; }
+  .dark .chroma .il {
+    color: #bd93f9; }
+  .dark .chroma .mo {
+    color: #bd93f9; }
+  .dark .chroma .o {
+    color: #ff79c6; }
+  .dark .chroma .ow {
+    color: #ff79c6; }
+  .dark .chroma .c {
+    color: #6272a4; }
+  .dark .chroma .ch {
+    color: #6272a4; }
+  .dark .chroma .cm {
+    color: #6272a4; }
+  .dark .chroma .c1 {
+    color: #6272a4; }
+  .dark .chroma .cs {
+    color: #6272a4; }
+  .dark .chroma .cp {
+    color: #ff79c6; }
+  .dark .chroma .cpf {
+    color: #ff79c6; }
+  .dark .chroma .gd {
+    color: #ff5555; }
+  .dark .chroma .ge {
+    text-decoration: underline; }
+  .dark .chroma .gh {
+    font-weight: bold; }
+  .dark .chroma .gi {
+    color: #50fa7b;
+    font-weight: bold; }
+  .dark .chroma .go {
+    color: #44475a; }
+  .dark .chroma .gu {
+    font-weight: bold; }
+  .dark .chroma .gl {
+    text-decoration: underline; }
diff --git a/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.json b/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
new file mode 100644
index 0000000..3213d97
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/hugo-papermodx/css/common/highlight.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
@@ -0,0 +1 @@
+{"Target":"css/common/highlight.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3d0fdf9..22d3cff 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -38,9 +38,10 @@
 {{- $reset := (resources.Get "css/core/reset.css") }}
 {{- $media := (resources.Get "css/core/zmedia.css") }}
 {{- $common := (resources.Match "css/common/*.css") | resources.Concat "assets/css/common.css" }}
+{{- $commonHighlight := (resources.Get "css/common/highlight.scss") | resources.ToCSS }}
 
 {{- /* order is important */}}
-{{- $core := (slice $theme_vars $reset $common $media) | resources.Concat "assets/css/core.css" }}
+{{- $core := (slice $theme_vars $reset $common $commonHighlight $media) | resources.Concat "assets/css/core.css" }}
 {{- $extended := (resources.Match "css/extended/*.css") | resources.Concat "assets/css/extended.css" }}
 
 {{- /* bundle all required css */}}
@@ -98,7 +99,6 @@
                 --secondary: rgb(155, 156, 157);
                 --tertiary: rgb(65, 66, 68);
                 --content: rgb(196, 196, 197);
-                --hljs-bg: rgb(46, 46, 51);
                 --code-bg: rgb(55, 56, 62);
                 --border: rgb(51, 51, 51);
             }