vscode-markdown-pdf
vscode-markdown-pdf copied to clipboard
yzane
Export using VS Code internal styles
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:
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
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?
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.
@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 )
@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.
Here is Bob Jiang from Gitcoin team. Hi @DanielShteinbok are you still working on this issue?
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.
