0

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.

yo76yo
  • 138
  • 7

1 Answers1

0

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.

Waylan
  • 37,164
  • 12
  • 83
  • 109
  • thanks for the tip! I just ended up writing a plugin for mkdocs to do what I needed to do. I used the `on_post_page` override to do so. – yo76yo Aug 05 '19 at 21:53