Syntax Highlighting

Once your HTML and CSS templates grow in size you might want to add some syntax highlighting.

VS Code

Minze VS Code Extension

The Minze VS Code extension comes bundled with snippets for auto-completion. It also adds auto-highlighting to class methods defined as arrow functions starting with html and css keyword. Additionally you can manually prefix any template literals with /*html*/ to highlight HTML code inside them, or /*css*/ to highlight CSS code.

import { MinzeElement } from Minze

class MyElement extends MinzeElement {
  // auto
  html = () => `<div></div>`
  css = () => `:host {}`

  // auto
  htmlTemplate = () => `<div></div>`
  cssTemplate = () => `:host {}`

  // manual
  htmlCode = /*html*/ `<div></div>`
  cssCode = /*css*/ `:host {}`
}

3rd-Party Extensions

With the following extension you can also add syntax highlighting to template strings:

• es6-string-html
• Comment tagged templates
• Template Literals

import { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  html = () => /*html*/ `<div>Hello Minze!</div>`
  css = () => /*css*/ `:host { display: flex; }`
}