Search code examples
pythonhtmlcssmarkdownhtml-email

Python: Convert Markdown to html with Codeblocks like in stackoverflow

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.

enter image description here

enter image description here

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:

enter image description here

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?

Solution

  • 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;
}