Styling Nested languages


#1

Hello,

I am attempting to update my personal Stylesheet to give nested languages’ a unique background color.

e.g. I want CSS and JS that are in an HTML document to be called out visually.

So far, I’ve found this will get the contents I want:

.syntax--html.syntax--css {
  background-color: rgba(240,240,250,0.6);
  padding-top:2px;
  padding-bottom:3px;

}
.syntax--html.syntax--js {
  background-color:rgba(255,230,230,0.8);
  padding-top:2px;
  padding-bottom:3px;
}

But unfortunately this does not apply the background-color attribute across the whole div.line to create a visual block.

Is there a different way to style a line if the whole contents are of a certain nested scope?

Cheers!


#2

I don’t know of a way to do what you want using just CSS. Essentially you’re trying to style an element based on qualities of its child items. To my knowledge, the various CSS selectors will only allow you to select an item based on what comes before that item in the DOM or various qualities about the item itself.

You could potentially use some code to detect the condition you’re interested in and inject a class into the DOM that would color things the way that you want. There isn’t support in the Atom syntax highlighting engine for doing something like that simply though.


#3

Yep! That’s how I am doing it currently. I was curious if there might have been another approach to identify the parent div.line by some other means that I hadn’t known about, but it’s sounding like that doesn’t exist without creating some custom package.

All that said, I actually might have figured out a hack that might work for my purposes—by adding a larger padding and reverse margin…

.syntax--html.syntax--css {
  background-color: rgba(240,240,250,0.8);
  padding-top:2px;
  padding-bottom:3px;
  padding-right: 3000px;
  margin-right: -3000px;
}
.syntax--html.syntax--js {
  background-color:rgba(255,230,230,0.8);
  padding-top:2px;
  padding-bottom:3px;
  padding-right: 3000px;
  margin-right: -3000px;
}