code block styling

howto.md

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.