[HTML] Nested templates in html/javascript not correctly handled

I'm coming from this comment in a notepad++ issue. Writing here the text for convenience:

There's still a problem with nested string templates. Paste the following example code in notepad++ 8.7.1 with language set to "HTML" and the innerHTML line in the script will be shown completely unstyled:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Listing Example</title>
    <style>
        .card {
            border: 1px solid #ddd;
            padding: 16px;
            margin: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="content"></div>

    <script>
        // Sample data
        const users = [
            { name: "Alice", age: 30, interests: ["Reading", "Traveling"] },
            { name: "Bob", age: 25, interests: ["Cooking", "Gaming"] },
            { name: "Charlie", age: 35, interests: ["Hiking", "Photography"] }
        ];

        // Nested template literal to generate user cards
        const generateUserCard = (user) => `
            <div class="card">
                <h2>${user.name}</h2>
                <p>Age: ${user.age}</p>
                <ul>
                    ${user.interests.map(interest => `<li>${interest}</li>`).join('')}
                </ul>
            </div>
        `;

        // Render all user cards into the content div
        document.getElementById('content').innerHTML = users.map(user => generateUserCard(user)).join('');
    </script>
</body>
</html>

ScintillaOrg / lexilla

[HTML] Nested templates in html/javascript not correctly handled #290