WebC in Eleventy

Filters

Wrap variables in a function call rather than piping variables to them.

Example:

<time datetime="${htmlDateString(post.date)}">${readableDate(post.date)}</time>

Editor support

VS Code

Syntax highlighting

WebC syntax highlighting is available in VS Code by associating the .webc extension with the HTML language:

{
  "files.associations": {
    "*.webc": "html"
  }
}

Prettier support

Prettier doesn't support WebC out of the box, but you can add support by adding a Prettier config file to your project and setting the parser option to html for files with the .webc extension:

# see: https://prettier.io/docs/en/configuration.html#setting-the-parserdocsenoptionshtmlparser-option
overrides:
  - files: ['*.webc']
    options:
      parser: 'html'

Inbox