Skip to content

Css tweaks for code highlighting #821

@Hecatron

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions