Configurable code syntax highlighting

[jgayfer]

My understanding is that Bear uses Pygments for code highlighting.

Though on looking through their docs, and this repository, it doesn't appear that we can modify these styles, or use some of Pygment's built-in styles, as it's done at the stylesheet generation level in code.

I would love the option to tweak the styles, as the defaults don't look amazing, especially with dark themed sites.

[HermanMartinus]

@jgayfer the styles are fully tweakable using CSS in the styles tab on your dashboard. The best way to do this is to inspect the code you want to change the color/font of in your browser's inspector, find the class-name of the element you want to change, and create a CSS rule with the format:

.highlight .gh {
  color: purple;
}

where .highlight is a the codeblock and .gh is the classname of the element.

What you can also do if you want a different pygments library is copy-and-paste pygments code into the CSS or (and I haven't tested this myself) import that stylesheet with @import 'https://cdn.com/link-to-pygments-stylesheet.css`

[jgayfer]

Amazing, thank you @HermanMartinus. Found an existing gruvbox stylesheet and plopped it in :)

[drsh0]

For anyone that wants to add custom syntax highlighting colours, I found a bunch of prepared CSS here:

https://github.com/numist/highlight-css

https://github.com/StylishThemes/Syntax-Themes/tree/master/pygments

https://github.com/richleland/pygments-css

To apply this to your blog, simply append your CSS under the styling menu with the values in a css file found above. For example:

1. https://github.com/numist/highlight-css/blob/main/Pygments/nord-darker.css
2. copy all
3. append to css styling under bear dashboard