Export using VS Code internal styles

[ldub]

Out of the box, VC Code previews markdown in a dark mode. Is it possible to export HTML with this dark css built-in? I was not able to configure the settings to do that.

Example VS Code preview:

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 30.0 DAI (30.0 USD @ $1.0/DAI) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $37,986.37 more funded OSS Work available on the Gitcoin Issue Explorer

[DanielShteinbok]

Correct me if I'm wrong: you want a CSS file that will mimic this dark look? That is, just background colour, text colour, and text font?

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 6 months, 2 weeks ago.
Please review their action plans below:

1) obusorezekiel has started work.

I will use and cutomize the HTML built in styles to be able to export files using internal styles in VSCode
2) developerswork has started work.

I am working with Visual Code for such a long time I think I can help you

Learn more on the Gitcoin Issue Details page.

[ldub]

@DanielShteinbok correct, I need a custom CSS file that mimics the look of the VS Code preview. I can get pretty close with the following CSS that I cooked up, mostly from vscode sources: https://gist.github.com/ldub/63499cc15045f805baf674ced7ca1797

That CSS is not exactly correct, but has a bigger problem still.
Exporting to HTML looks fairly nice:

Exporting to PDF leaves white bars around the side:

Setting these settings in vscode:

"markdown-pdf.margin.bottom": "0",
"markdown-pdf.margin.left": "0",
"markdown-pdf.margin.right": "0",
"markdown-pdf.margin.top": "0"

and adding a body { margin: 1.5cm 1cm 1cm 1cm; } rule to the CSS creates a decent result:

But since the margin is set on the entire body, the line breaks have no padding:

So, in summation, if there is a pure-css way to make the white border disappear, then a CSS stylesheet is all I need. From my poking around I believe this may require a code change in the MarkdownPDF plugin itself, as the white border is something that Puppeteer adds (puppeteer options here: https://github.com/GoogleChrome/puppeteer/blob/v1.10.0/docs/api.md#pagepdfoptions , used here: https://github.com/yzane/vscode-markdown-pdf/blob/master/extension.js#L399 )

[ldub]

@aashutoshrathi I tried that stylesheet and it is the light mode one. Plus I believe the dark mode stylesheet would still leave the white border shown in the comment above.

[bobjiang]

Here is Bob Jiang from Gitcoin team.
Hi @DanielShteinbok are you still working on this issue?

[Melkor118]

Is this still being worked on? This would be a nice feature since the look and feel you develop is based on the dark mode.