RapidWeaver Elements
Syntax highlighting and code snippets for RapidWeaver Elements templates in VS Code and Cursor.
Features
Syntax Highlighting
Full syntax highlighting for RapidWeaver Elements template directives embedded in HTML:
- Conditionals:
@if, @else, @elseif, @endif
- Loops:
@each, @endeach
- Templates:
@template, @endtemplate
- Includes:
@include, @includeIf
- Content:
@text, @dropzone
- Portals:
@portal, @endportal
- Raw Output:
@raw, @endraw
- Interpolation:
{{variable}}, {{item.property}}, {{item::isFirst}}
Code Snippets
Type these prefixes and press Tab to insert snippets:
| Prefix |
Description |
rw-if |
Conditional block |
rw-ifelse |
Conditional with else |
rw-ifelseif |
Conditional with elseif and else |
rw-each |
Loop block |
rw-template |
Inline template definition |
rw-include |
Include template |
rw-include-params |
Include with multiple parameters |
rw-includeif |
Conditional include |
rw-text |
Text directive |
rw-dropzone |
Dropzone directive |
rw-dropzone-h |
Horizontal dropzone |
rw-portal |
Portal block |
rw-portal-once |
Portal with includeOnce |
rw-raw |
Raw output block |
rw-var |
Variable interpolation |
rw-var-prop |
Property access |
rw-var-iter |
Iterator metadata |
rw-classes |
Classes variable |
rw-component |
Component scaffold |
rw-alpine |
Alpine.js component wrapper |
Code Folding
Fold directive blocks like @if/@endif, @each/@endeach, @template/@endtemplate, and @portal/@endportal.
Auto-closing Pairs
Automatic closing of {{ with }} and proper bracket matching for all directive pairs.
Usage
Automatic Language Detection
Files matching **/templates/**/*.html will automatically use RapidWeaver Elements highlighting.
Manual Language Selection
- Open an HTML file containing RapidWeaver Elements syntax
- Click on the language indicator in the bottom-right corner (shows "HTML")
- Select "RapidWeaver Elements" from the list
Add to your VS Code settings to associate specific file patterns:
{
"files.associations": {
"**/templates/**/*.html": "rwelements",
"*.rwe.html": "rwelements"
}
}
Examples
Conditional Rendering
@if(showContent)
<div class="{{classes.wrapper}}">
@dropzone("content", title: "Content")
</div>
@else
<p>No content available</p>
@endif
Loops
@each(item in items)
<div class="{{classes.item}}">
<h3>{{item.title}}</h3>
<p>{{item.description}}</p>
</div>
@endeach
Inline Templates
@template("button")
<button class="{{classes.button}}">{{label}}</button>
@endtemplate
@include("button", label: "Buy Now")
Portals
@portal("bodyEnd")
<script>
// Script injected at end of body
</script>
@endportal
Requirements
- VS Code 1.60.0 or higher
- Cursor (any version)
Known Issues
None at this time. Please report issues on the GitHub repository.
Release Notes
1.0.0
- Initial release
- Syntax highlighting for all RapidWeaver Elements directives
- Code snippets for common patterns
- Code folding support
- Auto-closing pairs for interpolation brackets
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT License - see LICENSE for details.
