HTML CSS SVG in JS
📝 Description
Highlight template strings in JavaScript and TypeScript files with HTML, CSS, SVG or XML syntax highlighting using tagged comments.
🔗 Links
✨ Features
Colorizes template strings that start with:
/*html*/ highlighted as HTML/*css*/ highlighted as CSS/*svg*/ highlighted as SVG/*xml*/ highlighted as XML
Works in .js, .ts, .jsx, and .tsx files.
No extra setup required — just install and start coding.
📝 Snippets
Quickly insert template literals for HTML, CSS, SVG and XML using the following snippets:
html template block:
/*html*/``
css template block:
/*css*/``
svg template block:
/*svg*/``
xml template block:
/*xml*/``
🖼️ Example
const button = /*html*/`
<button class="primary">
${'Click me !'}
</button>
`;
const styles = /*css*/`
.primary {
background: #007bff;
color: ${white};
padding: 8px 12px;
border-radius: 4px;
}
`;
const icon = /*svg*/`
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" fill="${'#007bff'}" />
</svg>
`;
const xml = /*xml*/`
<?xml version="1.0"?>
<customers>
<customer id="55000">
<name>Charter Group</name>
<address>
<street>100 Main</street>
<city>Framingham</city>
<state>MA</state>
<zip>01701</zip>
</address>
</customer>
</customers>
`;
📦 Installation
Install from VS Code Marketplace
Install from GitHub
Download the .vsix file from releases.
Open VS Code.
Open command palette (Ctrl+Shift+P).
Type Extensions: Install Extension and select the .vsix file.
Install from command line
💖 Support This Project
If you find this extension helpful and would like to support its development, consider buying me a coffee!
Your support helps me keep improving and maintaining this project. Every little bit is appreciated 🙌
☕ Buy me a coffee
📄 License
MIT License
