daaain / handlebars Goto Github PK

Fullest Handlebars.js templating support for Sublime Text 2 / 3. Also drives syntax colouring on Github and in Visual Studio Code. Install from: https://packagecontrol.io/packages/Handlebars.

License: MIT License

HTML 49.48% Handlebars 50.52%

handlebars sublime-text html html-tags syntax-highlighting template mustache visual-studio-code sublime-text-plugin

handlebars's Introduction

Sublime Text 2 / 3 Handlebars.js bundle

Colours of Handlebars expressions are selected to be in contrast with the surrounding HTML.
Handlebars expressions get syntax highlighting in HTML attributes.
Parameters passed to block expressions get syntax highlighting too.
Works both with individual template files and inline templates in script tags.
Key bindings for {{! Handlebars comments }} (Sublime only)
Tab triggers for
- if → {{#if }}
- ifel → {{#if }} {{else}}
- el → {{else}}
- elif → {{else if }}
- un → {{#unless }}
- ea → {{#each }}
- wi → {{#with }}
- par → {{> }} (for partials)
- x-temp → <script type="text/x-handlebars" data-template-name="$1"> (inline script tag in HTML files using the Ember recommended data-template-name attribute)
- x-id → <script type="text/x-handlebars-template" id="$1"> (inline script tag in HTML files using the legacy id attribute)

Since (as of February 2017) the syntax definitions in this repository are driving the highlights on Github and in Visual Studio Code, it's fair game to open issues related to either of these 😺

About Handlebars.js

It's a great JavaScript templating engine, based on Mustache, but amongst others adding the ability to precompile templates and to create custom helpers.

Official website: handlebarsjs.com

Sublime Text installation

Get it through Sublime Package Control.

If you haven't used it yet, just install it from the link above and then:

Press Shift + Cmd + P (OS X) or Shift + Ctrl + P (Windows)
Type install, to bring up the Package Control: Install Package option, and press Enter
Look for Handlebars, and press Enter to install it.
Choose Handlebars in the bottom right corner with one of your template files open (or in case you have inline templates use Handlebars instead of HTML, it's gracefully extending it so you shouldn't lose anything)
Profit

Package Control will also auto-update the package from this point on!

Known problems and workarounds

Sublime: No auto-complete on closing HTML tags (#23 & #49)

Problem: when closing an HTML tag, the tag name doesn't get auto-completed after typing / (or when using the Cmd + Alt + . (OS X) shortcut anywhere), even though this is the default behaviour with the HTML package.

Solution: installing the Tag package re-instates these functionalities and seems to be working well with this one.

Sublime: HTML tag pair doesn't get highlighted (#48)

Problem: moving the cursor over an HTML tag doesn't highlight its pair.

Solution: installing the BracketHighlighter package nicely solves the problem and adds much more powerful bracket matching than the built-in one.

Sublime: Expand selection to tag doesn't work (#47)

Problem: Expanding selection to tag doesn't work (Sublime command: expand_selection {"to": "tag"}).

Solution: if you install the Emmet package you can use the Match Tag Pair functionality by pressing Ctrl + D (OS X) or Ctrl + Shift + A (Windows).

Sublime: `.sublime-build` in the build system menu (#73)

Problem: a useless and confusing item named .sublime-build is added to the build system menu. This is because the package internally uses a custom build configuration to be able to target both Atom and Sublime and this gets exposed. Though it's only needed for development, Sublime doesn't seem to offer an option to hide this as the package gets installed.

Solution: delete the file from the package by running zip -d Handlebars.sublime-package ".sublime-build" in the folder it's installed or by any other means.

Testing / contribution

I've recently stopped heavily using Handlebars at my day job and became a father, so any contributions are more than welcome! I'm still using Github so will make sure to keep on being responsive on issues and pull requests.

There are some sample templates in test/ folder. It's possible to see the different supported and yet to be implemented use cases there.

Sublime Text

If you want to work on the package you should install PackageDev either from Github or from Package Control. With that you can edit the JSON version (grammars/Handlebars.json) and let it export the Plist (grammars/Handlebars.tmLanguage) with the ST Build System.

Sublime Text does not use the Plist format (grammars/Handlebars.tmLanguage); rather, it uses the Sublime-Syntax file (grammars/Handlebars.sublime-syntax). This file was originally generated with the Plugin Development: Convert Syntax to .sublime-syntax Sublime command, but it has since diverged in order to fix a Sublime Text specific bug (#110). Ideally, the two versions will track each other, but Pull Requests which effect only one version are still appreciated.

The nicest development setup I found so far is to have the package installed via Package Control and then symlinking the development Git repo to Sublime settings folder > Packages, which then overrides the installed one so you can toggle between them easily.

Another great trick I found out about recently is the Show scope name shortcut (Shift + Ctrl + P (OS X) or Shift + Ctrl + Alt + P (Windows)) which will display the language scope on the status bar based on where your cursor is. If you're getting tired of pressing all these keys all the time, there are a few brilliant packages which do this automatically like the more subtle ScopeAlways or the full on ScopeHunter – note: both need to be activated via the Command Palette.

Precompilation

This package does not offer any Handlebars precompilation functionality to keep things simple, but you can use Ruby Guard (which is a file system watcher) and Guard-Steering (a Handlebars precompiler from yours truly) to have all templates precompiled as you save them.

There's also a Guard package for Sublime if you want integration, but I don't personally use this as I'm happy with Guard running in a terminal window I can access from anywhere.

There are of course Node.js / Grunt / Gulp based compilers too (like this and this), but I haven't personally used any yet for precompilation.

Credits

Adapted from the great sublime-text-handlebars package by Nicholas Westlake.

Thanks a lot to all the generous contributors!

License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

handlebars's People

Contributors

Stargazers

Watchers

handlebars's Issues

`if` turns to `iframe` on tab complete in atom

description tells it. when i type if then hit tab it auto completes to iframe.

Not recognized in script tags in .erb files

I feel like this used to work, is anyone else having this problem?

I'm in ST2.

.hbs filenames not recognized

Hey there! It doesn't look like .hbs files are recognized in sublime text. This is a popular extension in ember-based projects, such as ember-app-kit (https://github.com/stefanpenner/ember-app-kit/blob/master/app/templates/application.hbs). Do you think you could add support for this file extension? Or I could do it in a pull request.

no support for {{!-- --}} style commenting

alt-command-slash (Mac) on text-selection should wrap the selection in a {{!-- --}} type comment. This allows commenting code blocks which contain other hbs expressions.

Highlighting of these type of comments would also be great!

Does not show up in Package Manager on Sublime 3

I'm not seeing this project in the Sublime Package Control. Is there a way to install it manually?

'else' gets wrong treatment

else is part of the {{#if ...}} syntax, so it would be consequent if it were the same color, no?

CMD + Alt + . Keyboard Shortcut is Disabled

I can't figure out why - but when I have a file type set to Handlebars, the standard Sublime keyboard shortcut of CMD + Alt + . - which is the shortcut for Edit > Tag > Complete Tag does not function at all.

I've been able to verify this with a couple of people to ensure it's not just my environment, but I'm not sure what other info I can provide to debug.

I'm on Sublime 2.0.2 build 2221

Using command + / on an HTML comment results in it being surrounded by a Handlebars comment

Steps:

Create a template, template.hbs
Open it in Sublime
Add a comment with HTML in it:

<!-- <a href="http://moo.cow.com/">Link</a> -->

Select the comment (from < to >) and press command + /

Result:

Selection is wrapped in Handlebars comment:

{{! <!-- <a href="http://moo.cow.com/">Link</a> --> }}

Expected:

Selection is uncommented:

<a href="http://moo.cow.com/">Link</a>

HTML tags don't match

.hbs file

.html file

Changing Tab triggers

Hey great work here!
I would like to change the output of tab triggers like if, par and so on, but couldn't find where.
I use modified syntax, so for example
par → {{> }}
I need
par → {{ }}

anyway, I think you understood what I'm after.

Good luck with the dad thing btw 👍

Variable/expression as tag name

<{{tag}} attr="asdf">asdf</{{tag}}>

GitHub uses this project/repo for its Handlebars highlighting in case you didn't know, so the above code block will reflect the status of this error.

Atom not working

How do you make this work in atom?
Activating your plugin does not show up Handlebars in the list of possible editors.

Syntax highlighting is broken when Ember's bind-attr helper is used

When using the bind-attr helper from ember.js, all syntax highlighting is broken.

Notice that when the boolean attributes are removed or quoted the highlighting works again, the quotes are not supported for this helper however. (In the image for example href=link)

ember.js bind-attr guide reference.

Block comments don't exist for Handlebars

Instead of wrapping one selection of multiple lines in one pair of {{! }}, which Handlebars doesn't allow, could this instead wrap each line from first to last character, like Javascript comments?

{{! {{#if foo}} }}
{{! <h1>foo</h1> }}
{{! {{/if}} }}

Instead of...

{{! {{#if foo}}
<h1>foo</h1>
{{/if}} }}

request support for precompiling the templates upon save

would be very useful if the plugin would pre-compile the templates upon saving the file.
or have a pre-compile command that can be executed from the command palette.

language fails on bubbles=false

Probably not just bubbles, but any unquoted boolean value for an attribute causes subsequent syntax colouring to be borken.

Sublime does not enable extension in correct context

I find that I have to manually change the detected syntax to handlebars to get this to work.

I have two scenarios.

Files with the extension 'handlebars.twig' - which are handlebars files written using the twig templating language
(solving this would also solve the above I think) - Within html files where my handlebars template is defined inline, within a script tag with the appropriate type i.e (text/x-handlebars)

<!DOCTYPE html>
  <head>
    <meta charset="utf-8" />
    <title>Ordr: Rstaurant Mnu Systm</title>
  </head>
  <body>

    <script type="text/x-handlebars" data-template-name="application">

     <!-- snippets should be useable inside this scope -->

      <h1>Ordr</h1>
      {{ outlet }}
    </script>

    <script src="js/libs/jquery-1.8.3.min.js"></script>
    <script src="js/libs/handlebars-1.0.0.rc.2.js"></script>
    <script src="js/libs/ember.js"></script>
    <script src="js/libs/ember-data.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Tags within HTML comments are styled as normal

Steps:

Create a template, template.hbs
Open it in Sublime
Add a comment with HTML in it:

<!-- <a href="http://moo.cow.com/">Link</a> -->

Result:

HTML tags contained within the comment are styled as normal.

Expected:

HTML tags within comments should be gray (or similar, depending on your theme).

Mustache Compatible? Example Usage?

Since Handlebars is based on Mustache, I am wondering if this package inherently supports Mustache.

Also I'm wondering about the usage. Mustache documentation says to include the following script tag in the markup -

Whereas, I have a separate .html file, loaded with ajax, which contains multiple mustache script tags like so -

</script>

This may be beyond the scope of what the package is supposed to do, I'm just wondering what is the true use case for the package.

Handlebars not appearing in Sublime package list

Handlebars isn't showing up in package control's list of packages for me. Any ideas? I'm running Sublime build 3083, Ubuntu 12.04.

The beginning angle bracket of HTML comments shouldn't be highlighted as error

When switching to handlebars, there are no colors (mac)

Error message: unable to load Handlebars.tmLanguage

I'm using Sublime Text 3 build 3083 on Ubuntu. In recent days when I start the editor, I'm getting an error message:

error: Error loading syntax file "Packages/Handlebars/Handlebars.tmLanguage": Unable to open Packages/Handlebars/Handlebars.tmLanguage

I've tried uninstalling and re-installing the Handlebars package via package manager, but I still get the same error.

Version number is 2015.05.31.18.29.42. What other information would be helpful for me to supply?

Curly brace matching broken, often mistakenly includes next block

When adding handlebars indented with HTML below, the close curly braces are not added to the appropriate place.

Tag auto-closing

Minor detail, but I noticed that in HTML files, tags will close when typing < after the opening tag. This doesn't happen in HBS files though using the Handlebars syntax.

DOCTYPE declaration gets reported as wrong

Hey! Thanks for the great package.

I noticed that, when applied to HTML documents, your syntax highlighting will "report" the opening bracket in <!DOCTYPE html> as if there were an error in it. It's nothing major, but at times it kind of bothers my side vision since I use the same red errors to spot when there's unattended whitespace around. Here's how it looks:

In the default HTML package it looks like this:

I know you're probably really busy and this is somewhat of a nitpick, but if you've got some spare time could you please have a look into it? 😄

Thank you very much and keep up the good work!

Don't work after update to ver. 2014.02.10

Used Sublime 3 last stable build.

After update syntax highlight is broken. Please fix it.

OS: MacOS Mavericks.

SSL: CERTIFICATE_VERIFY_FAILED

trying to install and got this msg:

Package Control: Error downloading package. HTTP exception InvalidCertificateException (Host codeload.github.com returned an invalid certificate ([SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:547))
) downloading https://codeload.github.com/daaain/Handlebars/zip/master.
error: Package Control

Curly brackets not highlighted?

Hi, I just installed the Handlebars package for ST3 but I'm not sure I'm getting the correct color highlighting for the curly brackets.

Here's a screenshot of a sample file:

I'm using the Spacegray/base16-ocean.dark theme. Is this what other people are seeing?

Any help would be appreciated.

Is there a reference for keybindings?

Is there a reference I can look at for key bindings?

To insert a comment, {{!-- --}}, we can use Command + /. How can I insert plain curly brackets?

{{}}

Is there a keyboard binding for this? Or a reference for keyboard bindings?

Emmet doesn't work within <script> template

I have the following template within a server side handlebars template, index.hbs:

<script type="text/x-handlebars-template" id="question-form-template">
  <p>\{{ question }}</p>
</script>

While syntax highlighting works, Emmet doesn't. I'm not sure how to make it work. I've tried this solution on handlebars.tmlanguage:

http://www.sublimetext.com/forum/viewtopic.php?f=2&t=4057

To no avail, unfortunately.

Note: I'm using Handlebars both on the server (via express-hbs) as well as on the front end with Backbone, hence a Handlebars template within a Handlebars template :)

Highlighting only works for first block

I feel like this used to work, though I'm new to handlebars so I haven't used it much. Perhaps it's a ST thing, but only the first block of text is being colored:

Comments around expression are assumed to be closed on expression close

The highlighter assumes a comment is closed as soon as it meets }}, ignoring any opening {{ within the comment.

Wonky curly brace matching within a block

I'm seeing some funny curly brace matching behaviour when I try to add them within a block containing HTML. I think the gif describes the issue pretty well.

Please let me know if I can do anything else to help diagnose the issue and thank you for a really great plugin!

fix highlighting inside embedded script tags

javascript like this isn't highlighted:

<script type="text/javascript">
  var _gaq = _gaq || [];
  var pluginUrl =
    '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
  _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
  _gaq.push(['_setAccount', '{{site.google.analytics}}']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
</script>

Install this bundle in Sublime text2

In the README.md there is no explanation of how to install this bundle.
Any hints?

Syntax support for {{#each}} when not using an additional parameter.

I believe this is a newer feature in handlebars/ember, but where you would have used {{#each controller}}, you can now just use {{#each}}. However, the latter isn't syntax highlighted yet.

Handlebar expression around HTML attribute (no quotes) not being coloured

As shown below, expressions outside of HTML tags or within quotes in attributes are coloured correctly. However, the highlighter isn't colouring {{#if medication_taken}}checked{{/if}} within the <input> tag.

Use of handlebars with re-indent?

Hello,

This is more of a newbie question than an issue, but I wonder if it is possible to have the handlebars syntax follow/work with the reindentation feature of sublime? When I use this feature (I get a frustrating amount of improperly indented code to work with, with several handlebars if/else statements), anything within the handlebars conditional isn't indented one tab.

Not an issue, just a low priority request.

Reindent functionality doesn't work inside templates

When using this plugin, or the standard html plugin, "reindent" functionality does not work inside script blocks. For example, in the example code below, using "reindent" on any of the opening or closing div tags does not move the tag out. Reindent on a large block of template markup just flattens it out to the same level as the script tag.

<html>
   <script type="text/x-handlebars" data-template-name="test">

   <div>
   <div>
   </div>
   </div>

   </script>
</html>

This is pretty critical for users for the sublemacspro (emacs keybindings), as tab is defaulted to reindent to match emacs functionality. If you have any thoughts on what the solution is I might be able to look into the fix, I just don't really know where to get started.

ID attribute not highlighted if it comes first in script tag

This code, with the id attribute first, doesn't highlight properly:

<script id="data_categories" type="text/x-handlebars-template">

but it does if you swap the id and type attributes around, eg:

support whitespace control

In the latest handlebars, it has support whitespace control: handlebars-lang/handlebars.js#336

How can modify this plugin to support this feature?

Thanks

Defeat greedy 'meta.scope.outside-tag.html' scope selectors

For some reason the Atom HTML package (which this package extends) has some greedy selectors which get precedence over things like Handlebars blocks, comments, etc.

The offending ones start here: https://github.com/atom/language-html/blob/master/grammars/html.cson#L338

Not really sure at the moment what's going on, so needs a bit more investigation.

Fix colouring if template is inside quoted text

In case of having the template inside a paramater for example (<div class="mainClass {{className}}">) the colouring does not highlight the template distinctively enough at the moment.

data attributes aren't highlighted correctly

It seems that data- attributes aren't being highlighted correctly in general.

I tend to use data- attributes as functional hooks separate from CSS/style hooks like classes and id attributes.

Sublime Text - build 3059 with the latest Sublime Handlebars package installed via Package Control.

highlighting for {{@key}}?

You can use {{#each}} on objects, and you use {{@key}} to access the key of the current pair, currently it's just rendering plain white, which I believe is unintended?

Expand selection to tag doesn't work

Expanding selection to tag doesn't work when I set the syntax to be a Handlebars template.

The specific command is:
command: expand_selection {"to": "tag"}

which i have bound to cmd+shift+a.

daaain / handlebars Goto Github PK

handlebars's Introduction

Sublime Text 2 / 3 Handlebars.js bundle

About Handlebars.js

Sublime Text installation

Known problems and workarounds

Sublime: No auto-complete on closing HTML tags (#23 & #49)

Sublime: HTML tag pair doesn't get highlighted (#48)

Sublime: Expand selection to tag doesn't work (#47)

Sublime: .sublime-build in the build system menu (#73)

Testing / contribution

Sublime Text

Precompilation

Credits

License

handlebars's People

Contributors

Stargazers

Watchers

Forkers

handlebars's Issues

Steps:

Result:

Expected:

Steps:

Result:

Expected:

Recommend Projects

Recommend Topics

Recommend Org

Sublime: `.sublime-build` in the build system menu (#73)