Code block text cut off in PDF

[Lulech23]

Normally, Prism code blocks in Docusaurus scroll overflow horizontally. Unfortunately, this text doesn't scroll or wrap in generated PDFs.

I tried setting white-space: pre-wrap; on code blocks in my CSS, but docusaurus-pdf seems to ignore it (or more likely, my CSS rule just doesn't apply to the actual source of the problem).

Would be nice to have docusaurus-pdf handle the line wrapping in code blocks automatically.

[kohheepeace]

@Lulech23 Sorry for inconvenience 😢 could you share you site ?

This is related with this issue. https://github.com/KohheePeace/docusaurus-pdf/issues/8

[Lulech23]

@KohheePeace No worries! My initial docs URL is https://docs2.xgasoft.com/vngen/index. This page is a good example of code box overflow.

I don't see any error messages as in issue #8 and I'm only using the standard custom.css for my styling.

[kohheepeace]

Before

After

In custom.css I added

.prism-code div {
  white-space: pre-wrap !important;
}

And it correctly pre-wrap the code block.

Is this picture result you want ?

docusaurus version is 2.0.0-alpha.50

[Lulech23]

Yes, that's right. 👍

So, I did some more tests and I discovered that if I use .prism-code div as the selector, it works and I get the same result in my PDF. But here's the thing: I don't want my prism code to line wrap on the live site, just in the PDF.

So, I have tried using CSS selectors that only appear when running npm run start, not npm run build. While running the live server, a lot of classes are prepended with @docusaurus, so this is an easy way to make CSS apply to the server, but not the final build. For example:

div[class*="@docusaurus"] .prism-code div {
    white-space: pre-wrap !important;
}

This works on the live site, but docusaurus-pdf doesn't seem to recognize it.

Is there any way to trigger line wrap in the PDF without applying it to the whole site?

[maxarndt]

@Lulech23 you can try to use the @media print rule. It is described here.

In your case it would look like:

@media print {
  .prism-code div {
    white-space: pre-wrap !important;
  }
}

I'm currently not 100% sure but I think PDF generation in the headless browser used works as it does in normal browsers - it uses the print functionality and because of that the @media print rules should be applied.

So if it does you have a good way to separate your styles for the web and for PDF.

Please give it a try and let us know if it solves your problem.

[kohheepeace]

@maxarndt genius💯

[Lulech23]

@Lulech23 you can try to use the @media print rule. Please give it a try and let us know if it solves your problem.

Live site:

Generated PDF:

Brilliant! I assumed the headless browser used screen behavior, but print makes way more sense. And opens up a lot of possibilities! Thanks 👍