Is there an vscode extension we can use for syntax highlighing in html templates?
Closed this issue · 2 comments
Pika-Pool commented
Right now it looks like a simple string. it'll be much better if we could get some syntax highlighting and ability to check/format the html and css in template string. Something like what the lit-html vscode extension does
ECorreia45 commented
Not yet (working on it).
However, you can use inline-html or even the lit-html
one and do the following in the code;
// utils/html.ts
export const html = x => x;
// my-button.ts
import {html} from './utils/html';
class MyButton extends WebComponent {
get template() {
return html`<button><slot></slot></button>`[0];
}
get stylesheet() {
return html`<style>button {color: #900}</style>`[0];
}
}
I know this is a hacky way but that is the best I can suggest for now.
I created a feature request for this
#16
Pika-Pool commented
The hack doesn't work as intended. The html
function will return an array of type TemplateStringsArray
, and not the string. This is my solution:
function html(strings: TemplateStringsArray, ...values: any[]) {
return strings.reduce(
(res, currString, currIndex) =>
res + currString + (values[currIndex] ?? '').toString(),
'',
);
}