Search code examples
htmlmarkdownmkdocscustom-theme

Changing mkdocs code blocks with a custom theme


I am trying to add some html elements (like a div) in a custom theme, that wrap the mkdocs generated code blocks from the html output.

mkdocs has their fenced code blocks with the triple backticks ``` stuff ``` and when it produces the html output it creates <pre><code (some stuff here)> stuff </pre></code>. I was wondering if there is a way with custom themes that preserve the pre and code tags output with the highlight.js class attribute but also allow me to wrap it in a custom div so that I can put the code blocks in a container with some other elements.


Solution

  • The code blocks are generated by the Markdown parser, not by the MkDocs template. In fact the HTML generated from Markdown for a page is passed to the template as a single block. Therefore, to alter the HTML output by Markdown, you need to use a Markdown extension. MkDocs uses Python-Markdown and fully supports Python-Markdown extensions.

    If one exists, you could use an existing third party extension which provides the desired behavior. Alternatively, you could create your own custom extension.