Css tweaks for code highlighting

[Hecatron]

Hi,
I've recently been using mkdocs, and it's a very good project for documenting code projects.
I figured I'd post this here for anyone else trying to get code block / highlighting working correctly with dark themes such as slate. Perhaps this could be rolled into the next version, or the docs.

First create a css file to remove the border and make the background transparent for code blocks, this is needed for dark themes.
docs\css\highlight-fix.css

pre {
  background-color: transparent;
  border: none;
}

code {
  background-color: transparent;
}

Next edit mkdocs.yml to add a section to tweak the css

extra_css:
    - css/highlight-fix.css

To use custom highting themes grab the css of one you like from https://highlightjs.org/static/demo/ (for example Atelier Cave Dark for a dark theme)
paste it into a file such as highlight-custom.css

Then also add this to the extra_css section

extra_css:
    - css/highlight-fix.css
    - css/highlight-custom.css

I've found it's also possible to switch from highlight.js to pygments by using:

markdown_extensions:
    - codehilite

extra_css:
    - css/highlight-fix.css
    - css/pygments-custom.css

[waylan]

This is another candidate for a "recipes" page on the wiki (as proposed here).

[d0ugal]

Yeah, putting this is a documentation task. We should link somewhere in the docs to a recipes wiki page. Like we are doing for external themes.

[jimporter]

Would it make sense to improve the defaults for dark themes to reduce the necessity of doing this for each project? I've already made a bunch of changes to the Bootswatch themes and wouldn't mind picking out a better code block color scheme for the default.

[d0ugal]

@jimporter Sure, that makes sense. That should be done in the bootswatch repo. https://github.com/mkdocs/mkdocs-bootswatch

[waylan]

I've added a "recipe" on the wiki for this: https://github.com/mkdocs/mkdocs/wiki/MkDocs-Recipes#dark-theme-syntax-higlighting