Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Print Document current document to HTML #1310

Closed
JFaulk1434 opened this issue Jul 13, 2023 · 8 comments
Closed

Print Document current document to HTML #1310

JFaulk1434 opened this issue Jul 13, 2023 · 8 comments
Labels
Area: Exporting To HTML. Probably also other formats someday. Issue: Enhancement Improvements in existing features. Res: Fixed Fix is checked in, but it might be a few weeks until a release.

Comments

@JFaulk1434
Copy link

What's the problem

Getting all VSCode styling in HTML when setting is turned off.

What's the expected result

For the first style tags to be empty. Basically line 6 - 695 is all styling which does not seem to apply regardless because when I open the HTML file it looks plain.

How to reproduce

  1. Export to HTML
  2. Look at everything between first style tag.

Here is a small sample :

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Murideo Python wrapper</title>
        <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

/* From extension zhuangtongfa.material-theme */
.vscode-dark[data-vscode-theme-name="One Dark Pro Mix"].vscode-body, .vscode-dark[data-vscode-theme-name="One Dark Pro Flat"].vscode-body, .vscode-dark[data-vscode-theme-name="One Dark Pro Darker"].vscode-body, .vscode-dark[data-vscode-theme-name="One Dark Pro"].vscode-body {
  box-sizing: border-box;
  min-width: 200px;
}
.vscode-dark[data-vscode-theme-name="One Dark Pro Mix"].vscode-body blockquote, .vscode-dark[data-vscode-theme-name="One Dark Pro Flat"].vscode-body blockquote, .vscode-dark[data-vscode-theme-name="One Dark Pro Darker"].vscode-body blockquote, .vscode-dark[data-vscode-theme-name="One Dark Pro"].vscode-body blockquote {
  background-color: initial;
}
.vscode-dark[data-vscode-theme-name="One Dark Pro Mix"].vscode-body pre, .vscode-dark[data-vscode-theme-name="One Dark Pro Flat"].vscode-body pre, .vscode-dark[data-vscode-theme-name="One Dark Pro Darker"].vscode-body pre, .vscode-dark[data-vscode-theme-name="One Dark Pro"].vscode-body pre {
  color: initial;
}
.vscode-dark[data-vscode-theme-name="One Dark Pro Mix"].vscode-body code, .vscode-dark[data-vscode-theme-name="One Dark Pro Flat"].vscode-body code, .vscode-dark[data-vscode-theme-name="One Dark Pro Darker"].vscode-body code, .vscode-dark[data-vscode-theme-name="One Dark Pro"].vscode-body code {
  color: inherit;
}
.vscode-dark[data-vscode-theme-name="One Dark Pro Mix"].vscode-body pre code, .vscode-dark[data-vscode-theme-name="One Dark Pro Flat"].vscode-body pre code, .vscode-dark[data-vscode-theme-name="One Dark Pro Darker"].vscode-body pre code, .vscode-dark[data-vscode-theme-name="One Dark Pro"].vscode-body pre code {
  color: initial;
}
.vscode-dark[data-vscode-theme-name="One Dark Pro Mix"].vscode-body code > div, .vscode-dark[data-vscode-theme-name="One Dark Pro Flat"].vscode-body code > div, .vscode-dark[data-vscode-theme-name="One Dark Pro Darker"].vscode-body code > div, .vscode-dark[data-vscode-theme-name="One Dark Pro"].vscode-body code > div {
  background: none;
}
... Removed all the other lines to save the very long scroll...
</style>
        
        
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>

Other information

The goal would be to not have 690 lines of HTML that is not needed so to copy/paste the HTML into other programs is not so big. Here is the settings I changed: "markdown.extension.print.includeVscodeStylesheets": false
On a side note this is probably the best addon i've used in VSCode. Now I can't document anything outside of Markdown.
@yzhang-gh
Copy link
Owner

Thank you.

The includeVscodeStylesheets controls the inclusion of two VS Code's base styles

vscode-markdown/src/print.ts

Lines 237 to 238 in 99f85cf

const markdownCss = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">';
const highlightCss = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">';

And the ~600 lines of styles in your file are from other extensions that contribute .css files to the VS Code's Markdown preview. Their .css files are included in the exported HTML in order to retain a similar looking as in VS Code (although they may not take effect).

May I know where you want to paste the HTML? And would you think it is useful to only export only pure HTML (without any CSS)? I have seen similar feature requests before. Note that some features may not work without CSS (e.g. math).

@yzhang-gh yzhang-gh added Needs More Info Area: Exporting To HTML. Probably also other formats someday. labels Jul 13, 2023
@JFaulk1434
Copy link
Author

Yes I paste to a few different places, Basecamp which is a project management software that uses their own editor called Trix. And Zoho CRM which doesn't support Markdown either but does support HTML. So generally I write up a report in Markdown in VSCode, Export to HTML, Zoho - Copy/paste that html into Articles. Or in Basecamp - Open the HTML in chrome and copy/paste the text not the HTML. As far as just plain HTML not really sure what that would look like. I mean I want headers to be larger and unordered lists to be the dots. I believe that is part of the CSS? As far as colors, and fonts not really concerned as they are mostly technical documents.

@yzhang-gh
Copy link
Owner

I see.

I mean I want headers to be larger and unordered lists to be the dots.

Then HTML by itself is enough.

Will try to do it during the weekend as it is simple to add.

@JFaulk1434
Copy link
Author

That's fantastic thank you :)

yzhang-gh added a commit that referenced this issue Jul 16, 2023
@yzhang-gh
✨ #1310 pure HTML
83f6026
@yzhang-gh
Copy link
Owner

You can check out the dev build https://github.com/yzhang-gh/vscode-markdown/suites/14331658569/artifacts/806613865

Instruction: https://github.com/yzhang-gh/vscode-markdown#latest-development-build

@yzhang-gh yzhang-gh added Issue: Enhancement Improvements in existing features. Res: Fixed Fix is checked in, but it might be a few weeks until a release. labels Jul 16, 2023
@JFaulk1434
Copy link
Author

I downloaded it and installed with the Extension from VSIX and reloaded VSCode. The dev build shows it as markdown-all-in-one-3.5.1.vsix, the Latest released is also 3.5.1? When exporting to HTML it looks the same using Markdown All in One: Print current document to HTML still holds all the VSCode style. Is there something I am missing?

@yzhang-gh
Copy link
Owner

The version number doesn't matter as long as it is not lower than the stable release.

Is there something I am missing?

Sorry I forgot to mention that there is a new option pureHtml and you need to enable it.

@JFaulk1434
Copy link
Author

Got it. That worked perfect. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Area: Exporting To HTML. Probably also other formats someday. Issue: Enhancement Improvements in existing features. Res: Fixed Fix is checked in, but it might be a few weeks until a release.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yzhang-gh @JFaulk1434