Slim syntax highlighting for VS Code

The Slim Language extension brings Slim template language support to VS Code. It fixes most issues in previous Slim extensions, aims to support more modern features such as Tailwind CSS and is well tested.

Features

• A more complete Tailwind CSS support, including:

  • breakpoint prefixes in class shortcuts (.sm:text-center)

  • modifiers in class shortcuts, even multiple ones (.hover:dark:text-white)

  • opacity modifiers (text-blue-600/50)

  

• Multiline attribute values:

  

• Multiline attributes wrapping:

  

• Multiline comments:

  

• Multiline attribute ruby expressions (this requires a Ruby syntax extension such as Ruby LSP):

  

• Embedded languages: Ruby, JavaScript, Markdown, ERB, CSS, CoffeeScript, Sass, Less:

  

• More precise scopes for highlighting

  

• Developer goodies:

  • Full tests coverage
  • Grammar in a human-friendly format (YAML instead of JSON)

Known Issues

• Arbitrary values in class shortcuts (.top-[117px]) are not supported by Slim and this extension.

• Embedded language blocks with inline attributes are not supported:

  scss class="myClass":
    ...
  

Release Notes

See the Changelog.

Contributing

Please file an Issue or Pull Request on the GitHub repository.

See the wiki for some development hints.

Helpful links / Acknowledgements

• My blog post about creating this extension
• Syntax Highlighting Guide - official guide from the VS Code team
• SublimeText Slim 2.0 grammar - the basis of unit tests and a lot of inspiration comes from this well-maintained SublimeText grammar
• Writing a TextMate Grammar: Some Lessons Learned - an older resource but still one of the best
• Rubular is your best friend here
• as is a good regexp manual
• the Slim extension by Siang Lim that this one originates from
• the vscode-ruby-lsp project has some nice Ruby/ERB grammars