Converting Pygments Styles to Chroma

tips & tricks
1

Today I removed Pygments from my theme and went all Chroma. My theme is a port and the original used the Pygments solarized dark syntax highlighting which is not included in Chroma by default.

Chroma has a built-in tool for converting styles named _tools/style.py to convert the styles. But it does not have any guides and I struggled to make it work. Now that it’s done, I am documenting it in hopes of someone using it later on.

Instructions

These steps are for an Ubuntu 16 machine, but can be adapted for any OS.

  1. Install Go, configure GOPATH and the rest.
  2. Install Chroma with go get github.com/alecthomas/chroma.
  3. Install Python 3.
  4. Install Pygments for Python 3: sudo apt-get install python3-pygments.
  5. Install Pystache for Python 3: sudo apt-get install python3-pystache.
  6. Clone solarized dark: git clone https://github.com/john2x/solarized-pygment/ (no need to install it).
  7. (Optional) Rename the three py files inside solarized=pygment/pygments_solarized to more descriptive names. For example dark.py might become solarized-dark.py.
  8. Open each of them and note the style class name. For example for dark.py it’s SolarizedDarkStyle.
  9. Copy the files to the pygments installation path. On my machine it was:
    • /usr/local/lib/python3.5/dist-packages/Pygments-2.2.0-py3.5.egg/pygments/styles. python -m site will give you the list.
  10. Use the _tools/style.py to generate go files from styles:
    • python3 style.py [style-name] pygments.styles.[py-file-name].[style-class-name] > style-name.go
      • style-name is a string with new style’s name. E.g. solarized-dark.
      • py-file-name is the name of the py file (w/o extension) that was copied to pygments directory. E.g. dark.
      • style-class-name is the name of the python class inside the style. E.g. SolarizedDarkStyle.
  11. My command was:
    • python3 style.py solarized-dark pygments.styles.dark.SolarizedDarkStyle > solarized-dark.go
  12. Repeat for any other styles.
  13. Copy the resulting go files to $GOPATH/Go/src/github.com/alecthomas/chroma/styles.
    • You can open the file to double-check the style name passed to chroma.MustNewStyle:
    • var SolarizedDark = Register(chroma.MustNewStyle("solarized-dark", chroma.StyleEntries{
  14. Now create the following Go application. Modify the file and style names as needed and run it:
    package main

import (
    "os"

    "github.com/alecthomas/chroma/formatters/html"
    "github.com/alecthomas/chroma/styles"
)

func main() {
    f, _ := os.Create("solarized-dark.css")
    defer f.Close()

    formatter := html.New(html.WithClasses())
    if err := formatter.WriteCSS(f, styles.Get("solarized-dark")); err != nil {
        panic(err)
    }
}
  15. Add the CSS files to your theme’s CSS.
  16. Inside your site’s config file:
    • Remove pygmentsUseClassic: This will tell Hugo to use Chroma.
    • pygmentsuseclasses = true: Use CSS for highlighting.
    • pygmentscodefences = true: This adds code highlight to code fences.
1 Like
2

Thanks for the great instruction! It helped me a lot!

However, I’d notice that it’s enough to download all required *.py (_tools/style.py, light.py, dark.py, etc) files to the same directory and run it as follows:

python3 style.py solarized-dark dark.SolarizedDarkStyle > solarized-dark.go

So, the step 9 could be omitted.

Moreover, I created PR with a tool for printing out CSS styles and PR with solarized styles (light, dark and dark 256).

I hope it will help someone.

3

So, the tool I mentioned above is not required — there is a way to print existent style with the following command: go run cmd/chroma/main.go --html --html-styles -s solarized-dark. AFAIK, --html flag won’t be required in the next version of chroma (0.4).

4

Ah pretty cool thanks. I will update my instructions.