Code Highlighting Doesn't Work Properly on Desktop Browsers

[zigmd]

Past Issues Searched

• I have searched open and closed issues to make sure that the bug has not yet been reported

Issue is a Bug Report

• This is a bug report and not a feature request, nor asking for support

Describe the bug

Code blocks containing highlighted lines don't render on desktop browsers. I've tested this with Firefox and Chrome (without addons and also in private mode).

Additionally, if a wide code block is viewed on a smaller screen, horizontal scrollbar appears between the code text and code margin.

It works properly in mobile browsers.

Example this link renders differently on desktop and mobile.

The website is deployed on an NGINX server. Except for the automatic LetsEncrypt setup, the config file is at a bare minimum (happy to share if needed).

Expected behavior

• Code blocks to be highlighted on desktop browsers.

• Horizontal lines to appear at the margin instead of above it.

Screenshots

Desktop browsers will smaller screen:

Desktop browsers will smaller screen:

Common to all desktop browsers

Environment

No response

[colinwilson]

I think this is your NGINX config. Checking Chrome/Firefox dev tools shows many mixed content warnings for the .js files needed for highlighting to function. NGINX is trying to load them over http://

[colinwilson]

I think that's also what's causing your code blocks to render incorrectly

[zigmd]

Thanks @colinwilson !
I've updated the NGINX config to allow only HTTPS and things are working consistently across devices.