Multi Background Colors for Different Scopes


#1

I have programmed in notepadpp for years and it has a very useful feature were different scopes(languages) can have the option to display different background colors. As related to this thread, I am trying to achieve this effect by setting the background-color. This works, but with gaps between the color as it only highlights the line…

atom-text-editor::shadow .embedded {
    &.js { background-color: gray; }
}

The effect I am trying to achieve is this…


#2

Yes, Atom currently doesn’t support changing the background-est background color by scope.


#4

To my knowledge, there aren’t any plans in the works for this feature. I’m not sure what you mean by “add this to the new features section” though.


#5

The features category, as atom is missing an element that another program has. To see if this is a feature other people want as well.


#6

You can use ::before pseudo elements to achieve the effect you’re looking for:

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

      &.js::before {
        background-color: gray;
      }

      &.css::before {
        background-color: green;
      }
    }
  }
}

#7

I think that was a very good attempt but the ::before handle seems to break it. When I try

atom-text-editor::shadow {
  .line {
    position: relative;
    .embedded {
      &.js{ //removed the before statement...
        background-color: gray;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}

it does this… which does not help. It would be good for compressing text to one line. Aha. :smiley:

But thank you for the noble attempt!


#8

Oh… I forgot to add the content property on the ::before and to set its display: block;… I’ve updated the snippet above :slight_smile:


#9

This seems to work better but the text now seems to be gone. I’ve tried changing the font, changing the content properties ect… but it did not work. This is the closest I think we will get until atom adds a global background css class to different scopes. If that is ever added but thank you for the valiant attempt!

Bam… the script tag and everything inside ran away. Aha, I think it is just being covered by the background, but nothing seems to display the text correctly.


#10

Try adding z-index: -1. I’ll update the answer again.


#11

Thank you @olmokramer

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

      &.js::before {
        background-color: blue;
      }

      &.css::before {
        background-color: green;
      }
    }
  }
}

That did the trick. Should have known better to use -1 for z-index, I tried 0 instead. Thank you, super appreciated. +1 :beer:


Background color for code inside tags
#12

@XenTol, you may want to check the FAQ with suggestions on formatting. It’ll help others understand your posts more easily:


#13

Alright, thank you @leedohm I did not know that about the highlight feature with backticks. I will keep that noted for future posts. I was wondering why the code tag did not highlight correctly and acted cranky. Thanks again.


#14

Awesome! Glad I could help :slight_smile:


#15

Hello.

I think that a better feature would be to have a syntax that is adapted to the position of the cursor. Here is an example with an HTML file containing CSS and JS.

  1. If the cursor is outside <style>...</style> and <script>...</script> the content of this two blocks is in grey for example, and anything outside is highlighted using the HTML grammar.

  2. If the cursor is inside <style>...</style> then the content of this block is highlighted using the CSS grammar, and anything else outside is in grey for example.

  3. If the cursor is inside <script>...</script> then the content of this block is highlighted using the JS grammar, and anything else outside is in grey for example.

This is a way not to distract the developer working on its HTML file.


#16

Ideas like yours have been discussed on this older topic:


#17

I am trying to achieve something similar as @XenTol, except that my embedded language (Perl) is denoted by a ; symbol at the start of each line of the main language (C++). For example, it looks like this:

int a = 5, b = 10;

;for( $i=0; $i<32; $i++ )
;{
;    //More Perl code
;}

//More C code

I would like the Perl code to have a different background. Any ideas on how to achieve such a thing?


#18

Do you have a grammar that recognizes that code as embedded Perl?


#19

No I don’t. How would I make my grammar aware of the embedded Perl code?


#20

It would require a custom grammar. I can write that (it would actually be very short and easy to make, if I understand you correctly), but I need more details. What program are you using that recognizes embedded Perl, and what language(s) are you using in the main body of the document (you say C++ at one point and C at another)?


#21

@DamnedScholar I made a grammar for the main language, which is based off C/C++. The embedded language is Perl and is denoted by ; at the beginning of a line.
If you can give me a pointer to how to let my grammar recognize the embedded Perl, I am willing to first try it out myself.