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.
    • DomOBUD
      DomOBU @mathlete2
      last edited by DomOBU

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

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

        @DomOBU ,

        In ‘https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title#technical_summary’ there is no restriction on the content of the title.

        The restriction isn’t <title> specific. In HTML, it is always better to encode a lone & – most browsers will recognize that when there is a space after the & that your intention is &amp;, but not all automation tools will, and they can complain about improper entities when they see a lone &. Apparently, the Lexilla library that Notepad++ uses for syntax highlighting is one such tool that doesn’t & as a standalone character. Honestly, I think it’s a good idea, because it makes dangerous coding stand out (I call it dangerous, because all it takes is to accidentally delete the space between the & and the next word to change the meaning of the HTML, either creating something that’s definitely an error, or if you’re really unlucky, changing the sequence to display some other character, rather than a literal ampersand followed by text.)

        This Community is not the right place to talk about the intricacies of HTML. This SO question has more conversation about such an issue, so Stack Overflow or other such location is where you need to go if you want to learn more about when special characters need to be encoded.

        1 Reply Last reply Reply Quote 0
        • 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