Home
Support Forums

Code block markdown, shows all in one line

Hi,

After I deploy my site to netlify, all code snippet within “pre & code” tags shows in one line. This only happens if I visit a direct link to a blog post, but If I navigate through the nav-bar menu it renders correctly.

My code block sections render properly while developing locally, either by direct link, or through nav-bar menu navigation.

Infos

Site name: ledjonbehluli-c1d59
Stack: ReactJs (nextJs)
Live preview: From Domain to Integration Events

Thanks

Hi @ledjon-behluli,

I tried visiting SOLID Wash Tunnel - Fluent Builder (part 2/3) directly and through nav and the code block renders fine. Is there a specific page with the problem or has it fixed somehow?

Hi @hrishikesh ,

No, the issue is still present. It happens on all pages. I tried with chrome, edge (both normal and incognito modes) and it renders all in one line when navigated via the link directly!

What browser are you using?

I was using Safari. But I tried Chrome now and yeah, the problem does exist. I’ll check and let you know.

I think I didn’t notice it happen in Safari because the scrollbars are not visible:

But otherwise, the problem exists in this one too.

Seems like the JavaScript is deleting the <br> tags for some reason:

This is how the page’s rendered (if you disable JS):

But if you enable JS and reload the page, you could see for that it’s correctly rendered but after a second, the <br> tags are deleted. Probably some kind of HTML optimisation is taking place?

Interesting, that might be it, but why would that happen only after deploying to netlify?
I don’t have this behavior in my local environment! I even use the same browser for both cases.

Hi @ledjon-behluli,

Do you have a repo to test? I can’t possibly try to look at production code to judge why this might be happening, so the development code would help.

Hi @ledjon-behluli,

I can totally reproduce this problem locally:

As you can see, I’m on localhost:3000 and the problem still appears. I believe this is a problem with NextJS. I didn’t run the development server. I ran a production build. I did: npm i, then npm run build and npm start. This runs a production build and starts the server and the problem totally occurs in that too.

As to why it doesn’t happen in a development build (I haven’t tried the development build), it’s a question NextJS can answer.

Hi @hrishikesh

Got it!

Yes, I always tried the dev build, never the prod. The issue is 100% on next-js.

If you have a solution / idea, I would appreciate if you could let me know, otherwise feel free to close/mark this as done, because you totally did your part.

Much thanks,
Ledjon

Hi @ledjon-behluli,

I’m not a NextJS expert, but after a short glimpse of the code, I think NextJS might not be the only one to be blamed (though I might be wrong).

You’ve something like this:

renderer.code = function (code, lang) {
    code = this.options.highlight(code, lang);
    if (!lang) {
        return `<pre><code>${code}</code></pre>`;
    }
    var langClass = "language-" + lang;
    return `<pre class="${langClass}"><code>${code}</code></pre>`.replace(/(\r\n|\n|\r)/gm, "<br>");
};

This might as well be a problem with marked or how marked works with NextJS. Personally, I feel, if you’re using a library to parse Markdown for you, you should not have to manage the rendering of the code yourself, it should be managed completely by the library. You might try switching the library if possible.

That’s just my guess and I might be highly wrong about it.

I’ve no ideas apart from that, but if someone else has better ideas, they’re welcome. Also, if you do find a solution, please post it if possible. It might help someone else.

I will, much thanks @hrishikesh :grin:

1 Like