Skip to content

Instantly share code, notes, and snippets.

@justo
Created December 9, 2015 20:56
Show Gist options
  • Save justo/283e41b205e14bcba57b to your computer and use it in GitHub Desktop.
Save justo/283e41b205e14bcba57b to your computer and use it in GitHub Desktop.
Style to make Atom's tab character a wide line like Sublime Text and to only show invisibles on document highlight.
atom-text-editor::shadow {
/**
* Put this in your Atom stylesheet to replace the tab character with
* a full-width line like in Sublime Text. Change the background color
* to match your theme.
*
* Open your Atom settings and under "Editor Settings" change your
* "Invisbles Tab" field to a single space (" "). Otherwise you will see
* both tab indicators.
*/
.hard-tab {
position: relative;
&::after {
content: "";
position: absolute;
height: 1px;
left: 1px;
right: 2px;
top: 50%;
background: rgba(134, 133, 125, .5);
}
}
/**
* Optional: Add these lines to have invisble characters
* show ONLY when you have an active selection in the document.
* It will show all invisibles when you highlight anything, this
* is a current limitation with Atom's selection process.
*/
.invisible-character {
visibility: hidden;
}
.has-selection {
.invisible-character {
visibility: visible;
color: rgba(134, 133, 125, 1);
}
}
}
@stelonix
Copy link

Does anyone have a working fix?

@kireerik
Copy link

kireerik commented Nov 8, 2020

@stelonix I do:

// Hide invisible characters. Show them when selected.
@import 'syntax-variables';

atom-text-editor.editor {
	.invisible-character {
		// 1. Set invisbles to the theme's background color, hiding them.
		color: @syntax-background-color;
	}

	.hard-tab {
		visibility: hidden;
		position: relative;

		&::after {
			visibility: visible;
			content: '';
			position: absolute;
			height: 1px;
			left: 1px;
			right: 2px;
			top: 50%;
			background: @syntax-background-color;
		}
	}

	.cursor-line {
		.invisible-character, .hard-tab::after {
			visibility: hidden;
		}
	}

	// EXCEPT for trailing white space characters. We wanna see those.
	.line:not(.cursor-line) { // <- but not while we're typing. :)
		.trailing-whitespace {
			background-color: @background-color-error;
			color: contrast(@background-color-error);

			&.hard-tab {
				visibility: visible;
				color: transparent;
				&::after {
					background-color: contrast(@background-color-error);
				}
			}
		}
	}
}

This is based on atom/atom#6669 (comment) as well.

This version also hides the Invisbles Tab character set in the settings.

@stelonix
Copy link

stelonix commented Jan 1, 2021

Thanks, I've now switched to VSC, since Atom feels abandoned and VSC is fast and just works. Not my desire though, I wanted to fix up Atom but it seems simply not worth the trouble.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment