Issue with Stylesheets


#1

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
#2

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;
}

#3

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


#4

Thanks! This helped me a lot.

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


#5

It is mentioned in the documentation:

https://atom.io/docs/latest/upgrading/upgrading-your-ui-theme#supporting-the-shadow-dom

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


#6

@gilgareth Thanks for noticing… will be updated in the next release: https://github.com/atom/atom/blob/master/docs/customizing-atom.md#stylesless


#7

@leedohm @simurai Cheers, thanks!


#8

@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: https://github.com/atom/markdown-preview/blob/master/styles/markdown-preview.less#L118.

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 https://atom.io/packages/livereload