Custom code syntax highlighting theme

[ahgraber]

I'd like to use a code highlighting theme that isn't available to hextra or predefined in chroma. I can tweak hextra's code block background in custom.css:

.hextra-code-block pre {
  background-color: #282828 !important;
}

But if I want to change the coloration for different code token classes, the custom.css doesn't seem to change anything. e.g., this doesn't appear to work:

/* Comments */
html.dark .hextra-code-block .highlight .chroma .c, html.dark .hextra-code-block .highlight .chroma .cm, html.dark .hextra-code-block .highlight .chroma .c1, html.dark .hextra-code-block .highlight .chroma .cs {
  color: #adb5bd !important;
}

/* Keywords */
html.dark .hextra-code-block .highlight .chroma .k, html.dark .hextra-code-block .highlight .chroma .kd, html.dark .hextra-code-block .highlight .chroma .kn, html.dark .hextra-code-block .highlight .chroma .kp, html.dark .hextra-code-block .highlight .chroma .kr, html.dark .hextra-code-block .highlight .chroma .kv {
  color: #ff8787 !important;
}

/* Operators */
html.dark .hextra-code-block .highlight .chroma .o, html.dark .hextra-code-block .highlight .chroma .ow {
  color: #ffe066 !important;
}

/* Strings */
html.dark .hextra-code-block .highlight .chroma .s, html.dark .hextra-code-block .highlight .chroma .sb, html.dark .hextra-code-block .highlight .chroma .sc, html.dark .hextra-code-block .highlight .chroma .sd, html.dark .hextra-code-block .highlight .chroma .s2, html.dark .hextra-code-block .highlight .chroma .se, html.dark .hextra-code-block .highlight .chroma .sh, html.dark .hextra-code-block .highlight .chroma .si, html.dark .hextra-code-block .highlight .chroma .sx, html.dark .hextra-code-block .highlight .chroma .s1 {
  color: #69db7c !important;
}

/* Numbers */
html.dark .hextra-code-block .highlight .chroma .m, html.dark .hextra-code-block .highlight .chroma .mb, html.dark .hextra-code-block .highlight .chroma .mf, html.dark .hextra-code-block .highlight .chroma .mh, html.dark .hextra-code-block .highlight .chroma .mi, html.dark .hextra-code-block .highlight .chroma .il, html.dark .hextra-code-block .highlight .chroma .mo {
  color: #DE935F !important;
}

/* Function names */
html.dark .hextra-code-block .highlight .chroma .nf, html.dark .hextra-code-block .highlight .chroma .fm {
  color: #f783ac !important;
}

/* Names/Variables */
html.dark .hextra-code-block .highlight .chroma .n, html.dark .hextra-code-block .highlight .chroma .nv, html.dark .hextra-code-block .highlight .chroma .vc, html.dark .hextra-code-block .highlight .chroma .vg, html.dark .hextra-code-block .highlight .chroma .vi {
  color: #74c0fc !important;
}

/* Built-ins */
html.dark .hextra-code-block .highlight .chroma .nb {
    color: #4dabf7 !important;
}

/* Types, Classes */
html.dark .hextra-code-block .highlight .chroma .nc, html.dark .hextra-code-block .highlight .chroma .nt {
  color: #F0C674 !important;
}

/* Highlighted lines */
html.dark .hextra-code-block .highlight .chroma .hl {
  background-color: #282A2E !important;
}

[imfing]

seems work for me, I can see the custom rules take precedence over the default highlights in dark mode

[ahgraber]

Hmmm... your spans seem to define the code token type. mine just specify the color hex. Do I need to do a css compile step or something?

[imfing]

you might need these settings:

hextra/exampleSite/hugo.yaml

Lines 52 to 54 in 363b1e5

	markup:
	highlight:
	noClasses: false

[ahgraber]

thank you, I had a bad indent!

[imfing]

thank you, I had a bad indent!

ah my bad for using yaml everywhere 😅