Template Literals
The VS Code Syntax Highlighter for using HTML and SVG in Template Literals
Use this extension to highlight markup used within template-literals without the need to specify a tag function.
From
... => `<h1 class="greeting" style="background: lime;">Hello ${place}</h1>`
To
... => `<h1 class="greeting" style="background: lime;">Hello ${place}</h1>`
Usage
/*
To enable syntax highlighting, a template literal needs to be assigned or returned.
(The end back-tick must either come immediately after the markup or at the start of a new line) */
// Assigned
const assigned = `
<div class="some-class">
<style>h1{color: lime;}</style>
<h1>Hello World!</h1>
<script>console.log('Hello World')</script>
</div>
`
const property = {
templateLiteral: `
<div class="some-class">
<style>h1{color: lime;}</style>
<h1>Hello World!</h1>
<script>console.log('Hello World')</script>
</div>`
}
// Returned
const returned = () => {
return `
<div class="some-class">
<h1>Hello World!</h1>
</div>`
}
// Wtih tag function
const tagged = html `
<div class="some-class">
<style>h1{color: lime;}</style>
<h1>Hello World!</h1>
<script>console.log('Hello World')</script>
</div>
`
// With starting comments
const startingComment = /*html*/ `
<div class="some-class">
<style>h1{color: lime;}</style>
<h1>Hello World!</h1>
<script>console.log('Hello World')</script>
</div>
`
--
Disabling syntax highlighting
Because HTML's text syntax is neutral, you will rarely need to disable highlighting though if necessary there are two ways to do so. You may need to use ignore in your linter.
`<h1 class="greeting" style="background: lime;">Hello ${place}</h1>`//
Disable multi-line syntax with the no-html
directive
const ignoreMultiLine = /*no-html*/`
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
`
Unsupported
// Standalone template literals are not supported
`<div class="some-class">
<style>h1{color: lime;}</style>
<h1>Hello World!</h1>
<script>console.log('Hello World')</script>
</div>`
// Direct arguments are not supported (TBA)
someFunction(`<article></article>`)
Install
Search for "template literals" in VSCode extensions and install.
This plugin is based on the lit-html and Literally HTML VS Code extensions.
** Contributions are welcomed **
MIT © 2022 Julien Etienne.