Multi Background Colors for Different Scopes


#22

You would use a begin pattern that matches the semicolon and includes source.perl.

{
  begin: '^;'
  end: '$'
  patterns: [
    {
      include: 'source.perl'
    }
  ]
}

You can see an example in the wild in language-php (which is the grammar I always use for personal reference and showing other people how to include things, because it has multiple examples and just about everybody knows what PHP code looks like).


#23

@DamnedScholar Thanks again for all the help! By adding your code snippet (plus one additional line) to my grammar, it worked in conjunction with the example mentioned earlier in this thread.

{
  begin: '^;'
  end: '$'
  name: 'meta.embedded.perl'
  patterns: [
    {
      include: 'source.perl'
    }
  ]
}

#24

Your CSS works fantastic for me. I have come across one issue though and I’m hoping you can help with it.
I added

&.syntax--php::before {
	background-color: @php-background;
}

and it works great, but when I embed a php variable into my javascript it colours the line the php colour instead of just the php section being coloured.
have

Do you know of a way to make it highlight just the php in the js section?


#25

What happens if you remove the ::before?


#26

When I remove the ::before it does does the php embedded in the js how I want, but makes the rest of the php only highlight where there is text.

The CSS I have for the screenshot is:

atom-text-editor::shadow {
	.line {
		position: relative;

		.embedded {
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: '';
				display: block;
				z-index: -1;
			}

			&.syntax--php {
				background-color: @php-background;
			}

			&.syntax--js::before {
				background-color: @js-background;
			}

			&.syntax--css::before {
				background-color: @css-background;
			}
		}
	}
}

I know the atom-text-editor::shadow is deprecated but when I change it to atom-text-editor.editor non of the colours show.

Ideally I want it to look like:


#27

You might not be able to have it both ways.

I know the atom-text-editor::shadow is deprecated but when I change it to atom-text-editor.editor non of the colours show.

I believe this will fix itself if you change .embedded to .syntax--embedded. All of the classes applied by the grammar get that prefix.


#28

I’m trying to adapt the last css posted to my needs, but am struggling. Could someone offer advice? Thank you.

Basically all I want is for all html code to have a different background color than the rest. But when I change for example

to
&.syntax--html::before { background-color: @js-background; }

it still only changes the background color between <script> tags and not all html. I’ve also tried changing it to something like syntax--comment for testing reasons, but that doesn’t work either. I think I might be misunderstanding how syntax-- works?


#29

If you haven’t removed the .embedded selector, this is expected.


#30

Maybe I need to clarify what I am trying to do. I’m writing code in the Stata Language that contains blocks of html. I have a language grammar that (I think) correctly identifies the blocks containing html (I can tell from the html-tags being correctly highlighted within those blocks).

What I currently have added to my styles.less is:

atom-text-editor::shadow {
	.line {
		position: relative;

		.embedded {
			&::before {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: '';
				display: block;
				z-index: -1;
			}

			&.syntax--html::before {
				background-color: hsl(100, 24%, 80%);
			}
		}
	}
}

The result is (/*** and ***/ are the boundaries of the html block):

grafik


#31

I’m not finding any HTML inclusions or class names in the language-stata grammar. The dyndoc grammar does apply syntax--html, but that doesn’t seem to have any patterns that would match /*** ***/. What’s the active grammar for that file?


#32

It’s an additional grammar I just wrote myself these last days. You can look at it here:

I’m probably not handling the name tags very well. Could it be related to that?

Sorry if this ends up being about an error in my grammar and not the actual topic here.


#33

This should work:

atom-text-editor {
	.line {
		position: relative;

		.syntax--html::before {
			background-color: hsl(100, 24%, 80%);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			display: block;
			z-index: -1;
		}
	}
}

The ::shadow syntax is obsolete. As I said earlier, if you have .embedded in there, then what you were seeing is the expected behavior.


#34

Awesome, this works perfectly. I did try to remove the .embedded when you mentioned it but I was unable to figure out how the resulting code needed to look. The learning curve with this stuff is pretty steep.

Thank you so much!


#35

Here’s the documentation that covers & syntax in Less files.