Issue with Stylesheets


I am a new user who just downloaded Atom on Windows 8 a couple of days ago. I’ve tried writing a couple of simple html pages through it, but when I try to write an internal (not inline) CSS stylesheet, parts of it don’t display properly in the preview window. For example, my headings (<h1> <h2> <h3>, etc.) have bottom borders on them by default. I’ve tried to find the cause of this, but it hasn’t been successful. Help!

Stylesheet not loading

Do you mean the blue underlines of the <h3> in this screenshot?

In that case it’s a “feature”. It should make it easier to see where HTML <elements> start and end. Like when you have a lot of them nested. If you don’t like them, you could try another theme or disable the “bracket-matcher” package or override it in your styles.less:

// in styles.less
atom-text-editor::shadow .bracket-matcher {
  display: none;


No, I mean in the Ctrl-Shift-M preview window.


Thanks! This helped me a lot.

Any idea why atom-text-editor::shadow is necessary and why it’s not mentioned in the documentation?


It is mentioned in the documentation:

And the reason why the change was made was mentioned a couple times on the blog:


@gilgareth Thanks for noticing… will be updated in the next release:


@leedohm @simurai Cheers, thanks!


@Jesus Ohh… I think you mean the Markdown Preview. Actually, I didn’t know that you can preview normal HTML files as well.

The CSS styling, like the border on headings come from here:

You could override it in your styles.less file. Menu > Atom > Open Your Stylesheet like this:

.markdown-preview h1 {
  border: none;

But I think what you really want is that the preview uses your project’s CSS, right? Not sure if that’s actually possible with that markdown-preview package. Maybe there is another package that does that.

Or you could also use a browser and then have it live reloaded with a package like