Skip to content

Switch to mkdocs material theme for documentation#9849

Open
browniebroke wants to merge 25 commits intoencode:mainfrom
browniebroke:feat/mkdocs-material
Open

Switch to mkdocs material theme for documentation#9849
browniebroke wants to merge 25 commits intoencode:mainfrom
browniebroke:feat/mkdocs-material

Conversation

@browniebroke
Copy link
Member

@browniebroke browniebroke commented Dec 15, 2025

Description

Explore replacing our theme by mkdocs-material.

Light theme:

image

Dark theme:

image

Some things I'm not happy about:

  • I think the colors for the dark theme aren't quite there yet (especially the contrast of the links).
  • Syntax highlighting for code snippets is lost unless we switch to code fences (no idea how it works now) figured it out and ported the exiting solution to limit the diff
  • This theme has a lot of features, there might be more to enable
Syntax highlighting

Existing solution relies on prettify-1.0.js which is apprently coming from https://github.com/googlearchive/code-prettify

  • JS is added to the main HTML document
  • There is a piece in theme.js which adds the class prettyprint to all <pre> tags
  • The main HTML doc run prettyPrint() on load (via the onload HTML attribute). This function finds all elements with the class above and add syntax highliting to them

I've replicated this in mkdocs-material, however there is some client side navigation, which means we need to listen to another event than DOM content loaded. This is explained in their docs

@auvipy auvipy self-requested a review December 15, 2025 19:38
@browniebroke
Copy link
Member Author

Configured a dummy RTD project to have a live deployment of the PR: https://browniebroke-drf--2.org.readthedocs.build/en/2/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant