On Windows, I can copy from VS Code & paste it into i.e. MS Word, and it retains all the correct formatting (both coloring/syntax highlighting & indentation). However, on Linux, there doesn't seem to be any combination that works: pasting it anywhere else seems to lose either the coloring or the indentation. I'm running Kubuntu 20.04, VS Code 1.55.2. The code is JSX (React JavaScript). Here's a very simple example:
If I paste it to LibreOffice Writer, WPS Office Writer, SoftOffice TextMaker, or AbiWord, coloring works but it loses its indentation:
If I paste it to MS Word running in VirtualBox, it keeps its indentation but loses its color:
That makes it seem like it's actually an issue with VS Code. However, if I look at the contents of the clipboard with CopyQ, it does actually show a correct preview of the text (both color & indentation), so apparently it's all there. Here's the raw HTML shown by CopyQ:
<meta http-equiv="content-type" content="text/html; charset=utf-8"><div style="color: #000000;background-color: #ffffff;font-family: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback';font-weight: normal;font-size: 12px;line-height: 16px;white-space: pre;"><div><span style="color: #0000ff;">import</span><span style="color: #000000;"> React </span><span style="color: #0000ff;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">"react"</span><span style="color: #000000;">;</span></div><br><div><span style="color: #0000ff;">function</span><span style="color: #000000;"> withTooltip(Component) {</span></div><div><span style="color: #000000;"> </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> </span><span style="color: #0000ff;">class</span><span style="color: #000000;"> WithTooltip </span><span style="color: #0000ff;">extends</span><span style="color: #000000;"> React.Component {</span></div><div><span style="color: #000000;"> state = { showTooltip: </span><span style="color: #0000ff;">false</span><span style="color: #000000;"> };</span></div><div><span style="color: #000000;"> render() { </span></div><div><span style="color: #000000;"> </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> (</span></div><div><span style="color: #000000;"> </span><span style="color: #800000;"><div</span><span style="color: #000000;"> </span><span style="color: #800000;">/></span></div><div><span style="color: #000000;"> );</span></div><div><span style="color: #000000;"> }</span></div><div><span style="color: #000000;"> };</span></div><div><span style="color: #000000;">}</span></div><br><div><span style="color: #0000ff;">export</span><span style="color: #000000;"> </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> withTooltip;</span></div></div>
So basically, I just can't get code pasted into a docx without completely rebooting to Windows, & doing the copy-paste there. For what it's worth, the html produced by VS Code 1.55.2 on Windows (obtained via CopyQ) looks completely different to the html produced by VS Code 1.55.2 on Linux. Here's the html from Windows:
<html>
<body>
<!--StartFragment--><div style="color: #000000;background-color: #ffffff;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 12px;line-height: 16px;white-space: pre;"><div><span style="color: #0000ff;">import</span><span style="color: #000000;"> React </span><span style="color: #0000ff;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">"react"</span><span style="color: #000000;">;</span></div><br><div><span style="color: #0000ff;">function</span><span style="color: #000000;"> withTooltip(Component) {</span></div><div><span style="color: #000000;">    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> </span><span style="color: #0000ff;">class</span><span style="color: #000000;"> WithTooltip </span><span style="color: #0000ff;">extends</span><span style="color: #000000;"> React.Component {</span></div><div><span style="color: #000000;">        state = { showTooltip: </span><span style="color: #0000ff;">false</span><span style="color: #000000;"> };</span></div><div><span style="color: #000000;">        render() { </span></div><div><span style="color: #000000;">            </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> (</span></div><div><span style="color: #000000;">                </span><span style="color: #800000;"><div</span><span style="color: #000000;"> </span><span style="color: #800000;">/></span></div><div><span style="color: #000000;">            );</span></div><div><span style="color: #000000;">        }</span></div><div><span style="color: #000000;">    };</span></div><div><span style="color: #000000;">}</span></div><br><div><span style="color: #0000ff;">export</span><span style="color: #000000;"> </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> withTooltip;</span></div></div><!--EndFragment-->
</body>
</html>
Has anyone encountered this issue, & if so, how do you manage to get your formatted code from VSCode to a document, without wrecking either the color or the indentation?
Edit: I tested it without any VS Code extensions; it didn't make any difference.
Edit: As a workaround, I found that I can copy from VS Code, paste to Google Docs, then copy from Google Docs, & paste elsewhere - without breaking the formatting. It would still be nice to figure out how to get it to work properly without the extra step, though.


