shd101wyy / vscode-markdown-preview-enhanced

One of the "BEST" markdown preview extensions for Visual Studio Code
https://shd101wyy.github.io/markdown-preview-enhanced
Other
1.46k stars 173 forks source link

My exported PDFs always have a background #927

Open mundodisco8 opened 3 years ago

mundodisco8 commented 3 years ago

Hello,

I'm trying to export some PDFs from my Markdown docs. I use MPE in VS Code, and use gothic.css as my preview theme.

When I export a PDF, there's a light grey background, surrounded by white margins. I can disable the backgrounds with front matter, but if I do, no other item, like tables, has background colours. I also tried setting background: transparent in different places (body, as a general item, in the @media print, with and without the !important tag) and nothing seems to remove the grey-ish background, other than disabling the backgrounds in front matter.

I explored the gothic.css and it has a background property in the body selector that matches the exact grey. I tried changing it to orange, and the printed background turns orange as expected. How can I override that rule from gothic.css?

I attach a pdf with the grey background I can't get rid of.

Markdown Documentation Template.pdf

mundodisco8 commented 3 years ago

I made some progress this weekend. After checking the output of an exported html, I noticed that all the "groups of rules" (selectors?) I added to the style.less file were preceded by a .markdown-preview.markdown-preview (which I think it's a class, right?) So the css I use as base css is "gothic.css", and then apply my changes from style.less on top: gothic.css defines body's background as light grey (#fcfcfc). The body of that .html file contains a div of class "mume markdown-preview", so I think that what happens is that if I override body's background in style.less, it adds rules for the class markdown-preview. Given that contains a single

element, then the element gets the background colour specified in style.less, but the rest of the body (which normally is not printed on screen, but it is on paper) gets the background colour from gothic.css. I added my

@media print {
  body {
    background: none;
  }
.markdown-preview.markdown-preview {
[...]

Outside of the markdown-preview class and now I managed to get rid of the light grey background.

So it's all a bit confusing, but I think I have it. If anyone has a better solution for my problem, I'll be happy to hear it, otherwise I will close if there's no activity.