[HTML] Nested templates in html/javascript not correctly handled #290
Description
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>