Monospaced blocks are rendered incorrectly in Outlook on the web (OWA)

[lgrn]

Monospaced blocks seem to behave differently in the side pane in Office 365 on the web (OWA) than they do if you double click the e-mail so it pops out. It looks fine when you compose the e-mail, but the issue shows up when you read it.

Given the following example text:

    hello

    ```
    pre text here
    ```

    bye

The following HTML is generated in the Outlook "side-pane":

<div>
    <p style="margin:0 0 1.2em 0;">hello</p>
    <pre style="font-size:1em;font-family:Consolas,Inconsolata,Courier,monospace;margin:1.2em 0;line-height:1.2em;"><code style="font-size:0.85em;font-family:Consolas,Inconsolata,Courier,monospace;background-color:#F8F8F8;display:inline;white-space:pre;border-radius:3px;margin:0 0.15em;padding:0.5em 0.7em;border:1px solid #CCCCCC;overflow:auto;">pre text here
</code></pre>
    <p style="margin:0 0 1.2em 0;">bye</p>
    <div title="MDH:redacted" style="font-size:0em;width:0;height:0;max-width:0;margin:0;padding:0;overflow:hidden;max-height:0;">
        ​</div>
</div>

While this is generated in the popup window:

<div class="x_markdown-here-wrapper" style="">
    <p style="margin:0px 0px 1.2em!important">hello</p><pre style="font-size:0.85em; font-family:Consolas,Inconsolata,Courier,monospace; font-size:1em; line-height:1.2em; margin:1.2em 0px"><code style="font-size:0.85em; font-family:Consolas,Inconsolata,Courier,monospace; margin:0px 0.15em; padding:0px 0.3em; white-space:pre-wrap; border:1px solid rgb(234,234,234); background-color:rgb(248,248,248); border-radius:3px; display:inline; white-space:pre; overflow:auto; border-radius:3px; border:1px solid rgb(204,204,204); padding:0.5em 0.7em; display:block!important">pre text here
</code></pre>
    <p style="margin:0px 0px 1.2em!important">bye</p>
    <div title="MDH:redacted" style="height:0; width:0; max-height:0; max-width:0; overflow:hidden; font-size:0em; padding:0; margin:0">​</div>
</div>

This gets extra messy with multiple lines:

Side-pane:

Popup:

[neilmayhew]

I found that I could fix this by editing the theme customization in the add-on preferences and taking out the !important in this line:

display: block !important; /* added to counteract the Yahoo-specific `code` rule; without this, code blocks in Blogger are broken */

[neilmayhew]

I did this with Markdown Here Revival, which I'm now using instead of this original one since it's no longer maintained. I recommend you switch.

[neilmayhew]

This is now fixed in Markdown Here Revival.