Community
    • Login

    Display in NPP

    Scheduled Pinned Locked Moved Help wanted · · · – – – · · ·
    22 Posts 5 Posters 909 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • PeterJonesP
      PeterJones @DomOBU
      last edited by PeterJones

      @DomOBU,

      <content>
      …

      You completely misunderstood @mathlete2 's request – of course, I will admit that using a pseudo-tag as the example content probably confused you; but even still, @mathlete2 was very specific about using the ``` before and after.

      The request was to put it between ``` lines, like

      ```
      .example {
        font-family: system-ui;
        font-size: 1.2rem;
        & > a {
          color: tomato;
          &:hover,
          &:focus {
            color: ivory;
            background-color: tomato;
          }
        }
      }
      ```
      

      so that it would be rendered like

      .example {
        font-family: system-ui;
        font-size: 1.2rem;
        & > a {
          color: tomato;
          &:hover,
          &:focus {
            color: ivory;
            background-color: tomato;
          }
        }
      }
      

      so that we could see (and copy/paste) all characters (including spaces, and making sure the forum wasn’t changing characters (for example, it changes quotes to smart-quotes))

      1 Reply Last reply Reply Quote 2
      • PeterJonesP
        PeterJones
        last edited by PeterJones

        @DomOBU ,

        To summarize (and maybe clarify) the results of this discussion:

        1. In syntax highlighting the CSS, the problem with the & is found in the Lexilla library that Notepad++ uses for syntax highlighting: that library has never implemented the &-selector, despite Lexilla #210 requesting it more than a year ago. Until Lexilla fixes their bug, it cannot be fixed in Notepad++.
          • my opinion: I agree this should be fixed, but it’s dependent on the Lexilla team finding the time and figuring out how, or someone outside their team supplying them with a working PR to fix it. You could add a comment in that issue to let them know people still want &-selectors, but I don’t know if that will really help anything.
        2. In syntax highlighting the HTML, the problem with the & is that it looks to the Lexilla library like you’ve got a mistake with an entity, rather than intentionally tried to
          • my opinion: it’s good that Notepad++ is highlighting that differently than the surrounding text, because it’s bad HTML practice to have lone ampersands, and so this different color on lone & will make that character stand out to people using Notepad++ to edit their HTML.
        1 Reply Last reply Reply Quote 2
        • mathlete2M
          mathlete2
          last edited by mathlete2

          @DomOBU Just to add to @PeterJones ’ comments:

          FWIW, the brace-matching issue for this particular example also seems to be linked to the extra space in &:focus {; if you change it to &:focus{, you get the expected brace matching. Unfortunately, I don’t know enough about CSS programming to know if this is actually feasible syntax.

          DomOBUD 1 Reply Last reply Reply Quote 2
          • DomOBUD
            DomOBU @mathlete2
            last edited by

            @mathlete2

            Sorry for the misunderstanding (usually in French, … means any text before or after).

            I hope this time it’s right

            .example {
              font-family: system-ui;
              font-size: 1.2rem;
              & > a {
                color: tomato;
                &:hover,
                &:focus {
                  color: ivory;
                  background-color: tomato;
                }
              }
            }
            
            mathlete2M 1 Reply Last reply Reply Quote 0
            • mathlete2M
              mathlete2 @DomOBU
              last edited by

              @DomOBU yes, that seems to match the content that @PeterJones already posted. Hopefully, our corresponding answers are sufficient.

              DomOBUD 1 Reply Last reply Reply Quote 0
              • DomOBUD
                DomOBU @mathlete2
                last edited by

                @mathlete2

                Thank you for your time.
                This problem is not fundamental, I will live with it without any problem:
                NPP CSS.PNG

                mathlete2M mpheathM 2 Replies Last reply Reply Quote 0
                • mathlete2M
                  mathlete2 @DomOBU
                  last edited by

                  @DomOBU I just noticed that, in your latest screenshot, you removed the space that I mentioned, but the brace highlighting is still mismatched. Looking more closely at my setup, I can see that removing (and even re-adding) that space is only a temporary solution to the mismatch issue - it returns as soon as you click on another line. I could have sworn this wasn’t happening before, but evidently not…

                  Looking more closely at the code structure, it seems that braces cannot be nested within the & > a group, at least not in the manner that you’ve done here. Further to my original comment about &:focus { looking like it’s commented out: it looks as though there’s some sort of syntax error on the previous line that’s preventing the nested braces (or, perhaps more accurately, the next & statement) from processing as expected. When you run/use this code, does it actually work as expected? If it does, then this is probably a NP++ bug.

                  FWIW, this vaguely reminds me of a similar issue I encountered in batch scripts, where a closing parenthesis from within an Echo call was being applied unexpectedly. The difference there was that NP++ was actually matching the parentheses the way I would expect it to - the mismatch wasn’t occurring until the script was actually run. The solution was to escape each ) in the Echo call with ^. However, if the code here is valid, I don’t think that would help with the NP++ highlighting.

                  1 Reply Last reply Reply Quote 1
                  • mpheathM
                    mpheath @DomOBU
                    last edited by mpheath

                    @DomOBU Did you setup any CSS properties like mentioned at this other topic ?

                    Just tested this code in PythonScript’s startup.py:

                    editor.setProperty('lexer.css.less.language', 1)
                    notepad.callback(lambda _: editor.setProperty('lexer.css.less.language', 1), [NOTIFICATION.BUFFERACTIVATED])
                    

                    css_nest.png

                    I would not know of side-effects of enabling LESS though it does appear to allow nesting.

                    mathlete2M 1 Reply Last reply Reply Quote 2
                    • DomOBUD
                      DomOBU
                      last edited by

                      @mathlete2 @mpheath

                      Thank you very much for your answers.

                      The source code of the example is from MDN:
                      “https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector#using_in_nested_css_styles”
                      The source code runs correctly with Firefox & Edge.

                      I copied the source code into the web site “https://lesscss.org/” (thanks to @mpheath, I didn’t know about this web site); this is the result:
                      Less Capture.PNG

                      I copied the source code into the web site “https://phcode.dev/” (my brain is getting old, I hadn’t thought of testing the source code into this web site); this is the result:
                      phcode Capture.PNG

                      Both results are in line with expectations.
                      PS: on this forum, it’s a shame that as soon as you question the way NPP works, you’re seen as questioning the quality of NPP.

                      PeterJonesP 1 Reply Last reply Reply Quote 0
                      • PeterJonesP
                        PeterJones @DomOBU
                        last edited by

                        @DomOBU said in Display in NPP:

                        PS: on this forum, it’s a shame that as soon as you question the way NPP works, you’re seen as questioning the quality of NPP.

                        It’s a shame you think that. I see nothing in this conversation that indicates that people thought you were questioning the quality of NPP.

                        I thought we were pretty clear: on the CSS & issue, you were completely right, but that nothing can be fixed in Notepad++ until the Lexilla library is fixed (and the Notepad++ developer doesn’t control the Lexilla library); for the brace matching, there does appear to be something weird (probably, again, in Lexilla… though whether it’s part of the same & issue, or whether it’s solely caused by the lexer not handling deep nesting properly is uncertain as of yet); for HTML lone-&, the advice, for your own safety, is to always encode the literal & character as &amp; in HTML, and if you do, then you won’t notice that Lexilla chooses a strange style for a lonely &.

                        1 Reply Last reply Reply Quote 3
                        • mathlete2M
                          mathlete2 @mpheath
                          last edited by

                          @mpheath said in Display in NPP:

                          Just tested this code in PythonScript’s startup.py:

                          editor.setProperty(‘lexer.css.less.language’, 1)
                          notepad.callback(lambda _: editor.setProperty(‘lexer.css.less.language’, 1), [NOTIFICATION.BUFFERACTIVATED])

                          @DomOBU just to clarify this suggestion: if you open the Plugins menu, you will see something like this:

                          379a16d4-2c99-427e-8e55-9b1cffb38a73-image.png

                          Note that PythonScript is currently not listed there. To install this plugin (or any other for that matter), select Plugins Admin…. This will bring up a window similar to:

                          6415f194-a40f-4116-aabc-bb82e7db9551-image.png

                          Once you have the desired plugin selected, click Install (top right) and follow the prompts. When finished, PythonScript should appear in the Plugins menu; selecting it should launch something that you can run @mpheath 's code in, which should update your brace matching as desired.

                          DomOBUD 1 Reply Last reply Reply Quote 2
                          • DomOBUD
                            DomOBU @mathlete2
                            last edited by

                            @mathlete2

                            The installation of the PythonScript plugin doesn’t work.
                            I assume that Python needs to be installed on my laptop beforehand. I don’t have that configuration because I don’t use Python.

                            One last question. There are some basic words in CSS: selector, property and value. Why don’t these words appear in the CSS Style Configurator?

                            Alan KilbornA mathlete2M 2 Replies Last reply Reply Quote 0
                            • Alan KilbornA
                              Alan Kilborn @DomOBU
                              last edited by

                              @DomOBU said:

                              The installation of the PythonScript plugin doesn’t work.

                              “doesn’t work” without further detail doesn’t allow people to help you further with it.

                              I assume that Python needs to be installed on my laptop beforehand.

                              No.


                              You should have been directed to the FAQ.

                              1 Reply Last reply Reply Quote 2
                              • mathlete2M
                                mathlete2 @DomOBU
                                last edited by

                                @DomOBU said in Display in NPP:

                                There are some basic words in CSS: selector, property and value. Why don’t these words appear in the CSS Style Configurator?

                                This sounds like a question for the developers, but it looks like a few other users have had similar/related issues with CSS syntax highlighting, even when the identifiers are listed. If these threads do not answer your question, feel free to start a new one.

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post
                                The Community of users of the Notepad++ text editor.
                                Powered by NodeBB | Contributors