Question: I have been trying to convert a Markdown file into HTML code with Python for a few days - without success. The markdown file contains inline code and code blocks. However, I can't find a solution to display the code blocks in HTML like StackOverflow or GitHub does. In other words, a rectangle containing the code. The Markdown file looks like this: ### Output of `df` '''Bash Filesystem 1K-blocks Used Available Use% Mounted on tmpfs 809224 1552 807672 1% /run /dev/sda3 61091660 37443692 20512276 65% / tmpfs 4046120 54604 3991516 2% /dev/shm '''  The corresponding part of my HTML version looks like this: <h3>Output of <code>df</code></h3> <div class="codehilite"> <pre><span></span><code> Filesystem<span class="w"> </span>1K-blocks<span class="w"> </span>Used<span class="w"> </span>Available<span class="w"> </span>Use%<span class="w"> </span>Mounted<span class="w"> </span>on tmpfs<span class="w"> </span><span class="m">809224</span><span class="w"> </span><span class="m">1552</span><span class="w"> </span><span class="m">807672</span><span class="w"> </span><span class="m">1</span>%<span class="w"> </span>/run /dev/sda3<span class="w"> </span><span class="m">61091660</span><span class="w"> </span><span class="m">37443692</span><span class="w"> </span><span class="m">20512276</span><span class="w"> </span><span class="m">65</span>%<span class="w"> </span>/ tmpfs<span class="w"> </span><span class="m">4046120</span><span class="w"> </span><span class="m">54604</span><span class="w"> </span><span class="m">3991516</span><span class="w"> </span><span class="m">2</span>%<span class="w"> </span>/dev/shm </code></pre> </div>  I use the following code to convert: converted = markdown2.markdown(lfmd, extras=['fenced-code-blocks'])  If I now open the HTML version in the browser, I have the code in a different font, but that's it. But I need these nice code blocks.   Another problem is that this HTML code is then sent as an HTML e-mail. That's why playing around with Javascript etc. doesn't work. I have tried to change the text background with CSS. This works quite well for inline code. However, code blocks then look bad because they are aligned on the left and then fray on the right. What my crappy CSS looks like:  This is my HTML/CSS code, as I have no control over the HTML body: <head> <style> body {font-family: TeleNeo Office, sans-serif; color: #000000;} body {background-color: #ffffff;} code { font-family: Source Sans Pro, monospace; font-weight: normal; font-size: small; color: black; background-color: #E3E6E8; border-radius: 5px; height: fit-content; width: auto; padding: 3px 10px 3px 10px; } </style> </head>  Can anyone give me a tip on how I could implement this instead?

Answer: The background-color and related styles need to be defined on the pre tag (or its parent div), actually, if you want the same styles applied to both code blocks and code spans, then you will need to define the styles for both. And as the background color is the same, there is no need to undo the styles for the code elements inside the pre blocks. So just define for both: pre, code { font-family: Source Sans Pro, monospace; font-weight: normal; font-size: small; color: black; background-color: #E3E6E8; border-radius: 5px; height: fit-content; width: auto; padding: 3px 10px 3px 10px; }