Skip to content

Commit

Permalink
docs: Add semantic highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
mvsde committed Jul 18, 2024
1 parent d6294ef commit 79e87e4
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 5 deletions.
17 changes: 12 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,30 @@ Please refer to the [WebC documentation](https://www.11ty.dev/docs/languages/web
- [Autocomplete](#autocomplete)
- [Documentation](#documentation)
- [Definitions](#definitions)
- [Semantic highlighting](#semantic-highlighting)

## Autocomplete

Provides `webc:` and `@` attribute autocomplete suggestions for HTML tags.

<img src="images/attribute-autocomplete-webc.webp" alt="List of autocomplete suggestions for WebC attributes." width="396">
<img src="images/attribute-autocomplete-webc.webp" alt="List of autocomplete suggestions for WebC attributes." width="396" height="294">

<img src="images/attribute-autocomplete-at.webp" alt="List of autocomplete suggestions for WebC @ attributes." width="378">
<img src="images/attribute-autocomplete-at.webp" alt="List of autocomplete suggestions for WebC @ attributes." width="378" height="132">

## Documentation

`webc:` and `@` attributes show a link to the WebC documentation on hover.
`webc:` and `@` attributes show links to the WebC documentation on hover.

<img src="images/documentation-links.webp" alt="Hover tooltip on a webc:for attribute showing a link to the WebC documentation." width="345">
<img src="images/documentation-links.webp" alt="Hover tooltip on a webc:for attribute showing a link to the WebC documentation." width="345" height="95">

## Definitions

Support for _Go to Definition_ and _Peek Definition_ ([VS Code _Peek_ documentation](https://code.visualstudio.com/docs/editor/editingevolved#_peek)) and <kbd>Ctrl</kbd> + Click on WebC component tags to go the source file.

<img src="images/peek-definition.webp" alt="Peek definition disclosure box for a WebC component." width="748">
<img src="images/peek-definition.webp" alt="Peek definition disclosure box for a WebC component." width="698" height="465">

## Semantic highlighting

[Semantic highlighting](https://code.visualstudio.com/docs/getstarted/themes#_editor-semantic-highlighting) for WebC component tags and keyword attributes.

<img src="images/semantic-highlighting.webp" alt="Semantic highlighting example for a WebC component." width="253" height="155">
Binary file modified images/peek-definition.webp
Binary file not shown.
Binary file added images/semantic-highlighting.webp
Binary file not shown.

0 comments on commit 79e87e4

Please sign in to comment.