Changing the highlighting style of code

[yo80106]

Hi, I am wondering if there is a way to change the highlighting style of code. For example, changing the background color from black to white.

[Pilskalns]

Yes and really easy. Just tiny prepare:

1. Copy one of existing color themes from <hugo root>/themes/docdock/static/css/hybrid.css to <hugo root>/static/css/hybrid.css
2. Change your highlighting theme

There's doc on overall site theming, which is quite a minimal. http://docdock.netlify.com/content-organisation/customize-style/theme-variants/ Maybe this will inspire write better tutorial on custom styles.

[yo80106]

Thanks for your helping. After I changed some styles, I found there was a black frame surrounding the block of codes. I think this is caused by the copy function of snippet, so can I change the color?

[Pilskalns]

I used this additional CSS, to override background for code snippets:

.hljs, pre{
    background-color: %%your_color%%;
}