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

Thanks you for your time.

    <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:

1. Close all open instances of Notepad++
2. Use Windows Explorer and go to %AppData%\Notepad++ (you can just paste that into the address bar)
3. Copy stylers.xml to keep-stylers.xml
4. Edit stylers.xml: remove your “javascript.js” `<LexerType>, and replace it with my excerpt
5. Save stylers.xml
6. Close all open instances of Notepad++
7. Open your example test.js… (see WHOOPS below):
8. Manually Selct Settings > Style Configurator > Select theme : “Default (stylers.xml)”
9. 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.

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.

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?

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.