Bug, javascript multiline character (`) not understood by notepad++

Gregory D.

Hello, so I have this javscript code that makes the following not recognized:

html=‘<html><head><title>’ + document.title + ‘</title>’;
html+=`<style><?php print $style; ?></style>`;
html+=‘</head><body style=“margin:10px”>’;

After the first ` the colors are not as them should.

Thanks to solve that bug.

dail

If I modify the text your pasted to actually use grave accent characters and normal ASCII quotation marks then I get this:

Gregory D.

I just saw your reply.
Your code is the same for the second line and this is the one which cause a problem.
Anyway there’s a bug as my code works but displays wrong.
Is there a place to post bugs ?

PeterJones

Did you notice that @dail posted a screenshot (embedding the image using the syntax ![](https://i.imgur.com/6pPEadP.jpg)). @dail’s renders correctly (ie, the way I would expect). If yours is not rendering the way you expect, you will need to show us exactly what you use: embedding a screenshot would help; it would also help if you’d paste the exact code in a code block (add a blank line before and after your pasted text, and indent each line by 4 spaces, which will make sure that the forum doesn’t re-interpret your codes when rendering the post)

When I take the exact text you pasted before,

html=’<html><head><title>’ + document.title + ‘</title>’;
html+=`<style><?php print $style; ?></style>`;
html+=’</head><body style=“margin:10px”>’;

it does not mark the first line or third line as text, but does highlight the second as STRINGRAW.

If I change all your smart quotes to the normal single-quotes and double-quotes,

html='<html><head><title>' + document.title + '</title>';
html+=`<style><?php print $style; ?></style>`;
html+='</head><body style="margin:10px">';

Then it renders with the first and third lines marked as STRING, and the second still as STRINGRAW

If I change all the single quotes to back-ticks, like @dail showed,

html=`<html><head><title>` + document.title + `</title>`;
html+=`<style><?php print $style; ?></style>`;
html+=`</head><body style="margin:10px">`;

I get it to render similar to @dail, with all three lines as STRINGRAW (used @dail’s image)

All three of these conditions are exactly what I’d expect.

Gregory D.

Sorry for the delay , I don’t receive notifications… but still have the bug.
Yes it’s a bug because the code works but the display is wrong, here is a screen shot of a very simple code:

Alt text

PeterJones

The bug isn’t present in my Notepad++ v5.7.8 32-bit with the default styler selected. You are going to have to give us more to go on to try to replicate the bug.

Imgur

I actually edited the default style temporarily so that each of the three (STRING, STRINGRAW, and CHARACTER) use different backgrounds, to be obvious.

My ? > Debug Info is

Notepad++ v7.5.8   (32-bit)
Build time : Jul 23 2018 - 02:03:53
Path : C:\Program Files (x86)\Notepad++\notepad++.exe
Admin mode : OFF
Local Conf mode : OFF
OS : Windows 10 (64-bit)
Plugins : ComparePlugin.dll dbgpPlugin.dll MarkdownViewerPlusPlus.dll NppExec.dll NppFTP.dll PluginManager.dll PreviewHTML.dll PythonScript.dll XMLTools.dll DSpellCheck.dll mimeTools.dll NppConverter.dll NppExport.dll

Could you paste your ? > Debug Info, as well as what styler you have selected. If you switch to the default styler, possibly with background changes for the (STRING, STRINGRAW, and CHARACTER) to make it obvious which is highlighted, do you see something similar to mine?

Gregory D.

Notepad++ v7.5.8 (32-bit)
Build time : Jul 23 2018 - 02:03:53
Path : C:\Program Files (x86)\Notepad++\notepad++.exe
Admin mode : OFF
Local Conf mode : OFF
OS : Windows 10 (64-bit)
Plugins : ComparePlugin.dll DSpellCheck.dll mimeTools.dll NppConverter.dll NppExport.dll

I have the same issue with any theme.
One thing to note, in the style configurator, in Language “Javascript” I can change any color and nothing happen, only javascript (embedded) works, maybe it can help.

PeterJones

Excerpt from my stylers.xml:

    <LexerType name="javascript.js" desc="JavaScript" ext="">
        <WordsStyle name="DEFAULT" styleID="11" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="INSTRUCTION WORD" styleID="5" fgColor="0000FF" bgColor="FFFFFF" fontName="" fontStyle="1" fontSize="" keywordClass="instre1" />
        <WordsStyle name="TYPE WORD" styleID="16" fgColor="8000FF" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" keywordClass="type1" />
        <WordsStyle name="WINDOW INSTRUCTION" styleID="19" fgColor="804000" bgColor="FFFFFF" fontName="" fontStyle="1" fontSize="" keywordClass="instre2" />
        <WordsStyle name="NUMBER" styleID="4" fgColor="FF8000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="STRING" styleID="6" fgColor="808080" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="STRINGRAW" styleID="20" fgColor="000080" bgColor="C0C0C0" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="CHARACTER" styleID="7" fgColor="808080" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="OPERATOR" styleID="10" fgColor="000080" bgColor="FFFFFF" fontName="" fontStyle="1" fontSize="" />
        <WordsStyle name="VERBATIM" styleID="13" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="REGEX" styleID="14" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="1" fontSize="" />
        <WordsStyle name="COMMENT" styleID="1" fgColor="008000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="COMMENT LINE" styleID="2" fgColor="008000" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="COMMENT DOC" styleID="3" fgColor="008080" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="COMMENT LINE DOC" styleID="15" fgColor="008080" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="COMMENT DOC KEYWORD" styleID="17" fgColor="008080" bgColor="FFFFFF" fontName="" fontStyle="1" fontSize="" />
        <WordsStyle name="COMMENT DOC KEYWORD ERROR" styleID="18" fgColor="008080" bgColor="FFFFFF" fontName="" fontStyle="0" fontSize="" />
    </LexerType>

This is what I would have suggested, if I hadn’t found and confirmed what I realized while typing step 7 below. Before trying this, move down to the WHOOPS section.

~~My next debug suggestion:~~

Close all open instances of Notepad++
Use Windows Explorer and go to %AppData%\Notepad++ (you can just paste that into the address bar)
Copy stylers.xml to keep-stylers.xml
Edit stylers.xml: remove your “javascript.js” `<LexerType>, and replace it with my excerpt
Save stylers.xml
Close all open instances of Notepad++
Open your example test.js… (see WHOOPS below):
Manually Selct Settings > Style Configurator > Select theme : “Default (stylers.xml)”
It should have selected Javascript: “JavaScript file” should be in the lower-left of the status bar, and Language menu should show JavaScript selected

~~Under these Exact circumstances, what do you get?~~

WHOOPS

I just noticed while typing this up that your file is named “test.php”, not “test.js”. Which means it’s likely selecting the PHP Lexer, not the Javascript Lexer. This would have been useful information at the start.

When I take my example .js file, and manually select Language > PHP, then like you, I don’t get differentiated styling. But if I manually go back to Languages > Javascript, I get back the correct highlighting.

Further, if I save the file as .php instead, and load it in NPP, then it defaults to the PHP lexer, and gives formatting similar to what you describe.

LESSON

The lesson is: it will apply the PHP lexer to PHP files. There isn’t (by default) a mixed lexer that will highlight both JS and PHP (or HTML+JS, or …) simultaneously. That would require a custom lexer. If you want to temporary apply JS lexer, you have to manually select it. If you want to always apply the JS lexer to PHP files, then use the Style Configurator and add php to the User Ext list for JavaScript

BUG

So, expecting PHP to properly parse and highlight JS is a poor expectation on the user’s part (IMO).

But having the PHP parser get confused if there is embedded JS in PHP does seem like a bug in the PHP parser, to me.

If you want to report that bug on the PHP lexer (that embedded javascript in PHP will mess up the PHP lexing), then you may do that. I believe that the PHP lexer is under the control of the Scintilla editor; it has it’s own bug tracker. But you should be forewarned: Notepad++ is somewhat behind in its version of scintilla (it doesn’t upgrade the scintilla component every time that the Scintilla project releases), so it may be that they’ve already fixed that bug; you can go through their bug tracker yourself and see. Also, even if Scintilla does fix it, there is no guarantee that the lexer will be updated in Notepad++, so the bug may stay around for a while.

That said, you can use the workaround of manually selecting JavaScript language from the Language menu while you are editing the JS portions of your PHP.

Possibility

@Claudia-Frank has written up some code to create a custom lexer in PythonScript, which if I remember correctly allows you to do custom lexing with features that the builtin lexers don’t implement, but that UDL isn’t sufficient to handle. You can search the forum for her posts with “lexer” (and may find it), or wait to see if she chimes in after being @-mentioned. But you might be able to get it working to lex both PHP and JS in the same file.

Gregory D.

OK, thank you for that detailed explanation, I think I won’t have time to try to understand how to create a python script to create a custom lexer. I made a try but can’t find how to change the text color, just underline…
Also adding php extension to javascript list or changing each time from one to another doesn’t looks like a solution, so never mind.

Thanks you for your time.

PeterJones

Another alternative, which you’re also likely to reject, is to keep the PHP and JS in separate files, using <script type="text/javascript" src="external.js"></script> to call the JS from the PHP. Then, when editing the PHP, it would automatically apply the PHP lexer, and when editing the JS, it would automatically apply the JS lexer.

Otherwise, I’m sorry we weren’t able to help you in a way that worked for you.

========================================

And, regarding the pythonscript-based lexing: I know you aren’t intesterested, but to make it a bit easier for future readers of this thread, in case they are interested in pursuing the custom-lexer, I did a search for recent posts by @Claudia-Frank about her various custom lexers written in PythonScript:

2018-08-09 Colored keywords in XML
2018-08-14 Does the UDL miss the ablity to recognize methods and classes?
2018-08-27 Define custom syntax hilighting with pythonscript plugin

Gregory D.

Yes separate files is better but I’m working on a customer existing project and don’t have to rewrite/optimize it.
Thanks for the suggestion.