Hyraft Syntax Highlighting for VS Code

Professional syntax highlighting for Hyraft (.hyr) files - the SEO-friendly Ruby framework with Single File Components.

Features

Full Syntax Highlighting for Hyraft files
Embedded Language Support for Ruby, HTML, and JavaScript
Smart Snippets for common patterns
Custom Tag Recognition for all Hyraft blocks

Language Support

<metadata html> - HTML with Ruby meta-tags SEO
<displayer html> - HTML with Ruby interpolation No logic
<transmuter rb> - Ruby code with embedded HTML Can transmute anything.
<manifestor js> - JavaScript code supports Vanilla JS

Example

<metadata html>
  <title>[.page_title.]</title>
  <meta name="description" content="[.page_description.]">
</metadata>

<displayer html>
  <h1>[.page_title.]</h1>
  <message />
  <articles-list />
   <submit-button label="Click Me" />
</displayer>

<transmuter rb>
def page_title = @page_title || "Default Title"
def page_title = @page_description || "Default Description"
def display_submit_button(label:)
  "<button class='submit-button'>#{label}</button>"
end

def display_message
   <html>
     <p>Hello World</p>
   </html>
end

</transmuter>

<manifestor js>
document.addEventListener('DOMContentLoaded', () => {
  console.log('Page loaded');
});
</manifestor>

<style src="/styles/main.css" />