Xterm.js: ANSI Color Codes not rendering properly

Created on 20 Aug 2017 · 4Comments · Source: xtermjs/xterm.js

The default background ANSI color does not render properly on the Windows Subsystem for Linux (Native bash terminal for Windows), creating a blue background color on output when there should be none.

Details

Browser and browser version: VSCode embedded terminal and Hyper.is terminal (latest releases)
OS version: Windows 10

Steps to reproduce

Fresh reinstall of Windows Subsystem for Linux
Open terminal in VSCode or Hyper.is
Set default terminal to the bash shell (VSCode: "terminal.integrated.shell.windows": "C:\\WINDOWS\\Sysnative\\bash.exe", Hyper: shell: 'C:\\Windows\\System32\\bash.exe')
Default output color will have blue background

For reference, the prompt is the default:

PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ '

where [\033[00m\] should have reset to default, which it does but the default seems to be wrong. Using [\033[39m\] also gives the same effect.

Using default Windows CMD or PS do not reproduce the same effects.

Images showing issue

The borders in the images reflect the actual background of the application.

VSCode:
vscode
Hyper:
hyper

needs more info typbug

Source

chris-tse

All 4 comments

Thanks for reporting @christopher-tse. I think we will need a bit more information here.

Could you follow the next steps and get back with the details asked:

Set your prompt to something much simpler, without any ANSI codes (e.g. PS1="\u:\w $ "). This should give you a typical black and white terminal
Run the following command in your terminal (it should just print green test, with green being actually green 😅):
echo -e "\033[1;32mgreen\033[0m test"
Paste a screenshot of the result here. What you should be seeing is something like this:

Last, if you there is a way to set the debug option of the xterm.js terminal to true in VS Code and could send back terminal logs, that would be really helpful too. They should look like this:

data: 
[1;32mgreen[0m test
www-data@e167814701c2:/mnt/project $  undefined
Terminal.ts:1917 CSI  1;32  m undefined
Terminal.ts:1917 CSI  0  m undefined

P.S.: Can you also send the particular version of hyper that you are using? Hyper has not integrated xterm.js yet (https://github.com/zeit/hyper/pull/1983), so if this is an issue appearing both in software using xterm.js and hyper.is it probably is an issue of the Linux subsystem.

parisk on 20 Aug 2017

I've seen this before when you have non-standard colors in cmd.exe. If this fixes the problem it's an issue with https://github.com/rprichard/winpty

Tyriar on 20 Aug 2017

@Tyriar You're right on the money. I had to change the background color in the cmd.exe's "Defaults" menu rather than the "Properties" menu. Resetting it to the black color seems to have fixed it.

@parisk I suppose you won't be needing the above details then? I'll be happy to take a few screenshots if you'd still like them.

chris-tse on 20 Aug 2017

👍1

@christopher-tse cool, I'll close this off since it's an upstream issue. The details shouldn't be necessary 😃

Tyriar on 21 Aug 2017

👍1

Was this page helpful?

0 / 5 - 0 ratings