First things first, Hugo is still using Pygments for highlighting on my site -- I had issues with the switchover to Chroma. Pygments is configured like so:
pygmentsCodeFences = true
pygmentsUseClasses = true
pygmentsCodeFencesGuessSyntax = true
pygmentsUseClassic = true
I am using Python 2, because I had problems with Pygments and Python 3. Your milage may vary. Here's where I get the syntax highlighting themes that I use:
$ pip2 list | grep -i pyg
Pygments (2.2.0)
pygments-style-extras (0.0.3)
That gives me the bits on disk needed to glue this together, but I still need to get the style sheet out of Pygments and into a CSS file. I used Pygments to dump the Railscast style out to a static style sheet like so:
# This is in my Hugo site
$ pygmentize -S railscasts -f html > ./static/css/railscasts.css
My site then loads "css/highlighting/railscasts.css" as part of the CSS that it's working with, along with some custom CSS for the formatting of the actual code
container:
table.highlighttable {
border: 0;
}
table.highlighttable td {
margin: 0;
padding: .75em 0;
border: none;
}
table.highlighttable td.linenos {
width: 2.5em;
text-align: right;
padding-right: .10em;
background-color: #56544f;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
table.highlighttable td.code {
padding-left: .5em;
border-left: 1px solid #85816f;
background: #3a3a3a;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
table.highlighttable td.linenos div.linenodiv pre {
text-align: right;
padding-right: .4em;
}
.highlighttable pre {
margin: 0;
padding: 0;
background-color: transparent;
}
pre {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
font-size: .75em;
line-height: 1.75em;
background: #3a3a3a;
overflow: auto;
/* word-wrap: break-word; */
}
code, kbd, pre, tt, var {
font-family: "Source Code Pro", Consolas, Monaco, "Ubuntu Mono", "Andale Mono", monospace;
}
I hope that's enough to point you in the right direction -- it's not intuitive but it's not a ton of moving parts either.