Something like this doesn't correctly parse.

  {{component-name
    text='Title text'
    description='This text doesn\'t correctly parse.'
    anotherVariable=computedProperty
    upgradeAction=(action 'upgradeAction')}}

Here's a screenshot of it in Atom.

I'm able to avoid the problem by using double quotes around the string, but it would be preferable if escape characters could be parsed.

Reported via deprecation-cop

cmd + / should use the handlebars syntax for comments and not HTML

I use Blaze Meteor Template.
Support with .html file?

Would be nice for consistently shaded

Store package style sheets in the styles/ directory instead of stylesheets/ in the atom-handlebars package

Package.getStylesheetsPath (/Applications/Atom.app/Contents/Resources/app/src/package.js:448:9)
Package.getStylesheetPaths (/Applications/Atom.app/Contents/Resources/app/src/package.js:459:32)

eachas seems to be the only documented modern each construct in ember. It's quite confusing to autocomplete something that doesn't seem to work.

Is there some reason for keeping the old not-working one around?

The snippets are scoped to text.html which applies to every html-related language: html, erb, etc. They will be unnecessary soon with the inclusion of autocomplete-html in core.

When variable is inside single or double quotes.

 <span class='popup-trigger arrow-dropdown-icon'
                data-key='{{key}}' data-index='{{index}}' data-label='{{label}}' data-total='{{total}}'></span>

it won't be highlighted in blue, simply look like a regular text.

If I split a long line like in the example below the syntax highlighting goes away:

<header id="header">
<h1>todos</h1>
{{input type="text" id="new-todo" placeholder="What needs to be done?"
        value=newTitle action="createTodo"}}
</header>

To reproduce:

Create a new test.hbs file with the following two lines:

{{forms-colors-nicely name="priceManualSwitch" checked=manualPriceChecked}}
{{forms/colors-nicely name="priceManualSwitch" checked=manualPriceChecked}}

The second line remains all grey (apart from the {{ and }}) whereas 'name' and 'checked' change to orange on line 1 and "priceManualSwitch" to green.

It appears that the / in the component name stops the nice coloring. The / is used in Ember in particular from about version 1.10 to 1.13 to organise components into sub folders.

Atom Version 1.0.5, Windows 7 64bit
atom-handlebars version 1.1.0

Hi there, loving the handlebars syntax highlight!

Just noticed one minor thing:

This does not highlight:
{{dropdown-menu.item label="Download}}

This however does (forward slash instead of a dot):
{{dropdown-menu/item label="Download}}

I believe both cases are valid.

I get into this weird state, after clicking a line number in the gutter, where highlighting follows my cursor around. The only way out of this seems to be to close the file.

I can only reproduce this bug with atom-handlebars installed and enabled.

It seems to affect any type of file (video below is an .scss file)

Video of issue:
https://www.youtube.com/watch?v=pNmt2X7180g

Discussion on Atom.io:
http://discuss.atom.io/t/stuck-selecting-lines-after-clicking-on-line-number/9293

The as keyword used in a block level component doesn't align properly

I'm using 2 space indents (no tabs).

The following code does not indent correctly when using the HTML (Handlebars) syntax highlighter supplied in this package (notice the 1 space before as):

{{#block-level-component
  correctly='indented'

  as |incorrectly-indented|
}}
{{/block-level-component}}

Store package settings files in the settings/ directory instead of scoped-properties/

Package.loadSettings (/Applications/Atom.app/Contents/Resources/app/src/package.js:565:9)
<unknown> (/Applications/Atom.app/Contents/Resources/app/src/package.js:187:43)

If you use the simple form of Handlebars comments across multiple lines like so...

<span>blah blah blah</span>{{!
}}<span>whatever</span>

...atom-handlebars doesn't recognize the end of the comment. It darkens all the text for the rest of the file, or at least until it encounters --}}.

Not sure where the official docs for this handlebars feature are. Basically, you can add ~ right after {{ or right before }} to have whitespace to the left or right of the tag respectively trimmed by Handlebars engine.

More details here:
http://stackoverflow.com/a/23636497/6236

It would be great if this could also work with HTML files. I'm using Ember.js, and would love to see syntax highlighting.

I tried just adding 'html' to the list of fileTypes in the package's grammar, but I apparently don't know enough about how Atom works to get this working.

Handlebars allows for whitespace to be removed by using a tilde (~) character as explained here: http://handlebarsjs.com/expressions.html#whitespace-control.

However, atom-handlebars isn't highlighting this scenario correctly:

{{~#if asdf}} should be highlighted just the same as {{#if asdf}}.

Related to #5, but HBS tags should be highlighted not only in quotes, by anywhere inside HTML tags, e.g.:

<input {{#if required}}required{{/if}}>

If I'm not wrong, this would prevent using the 'include': 'text.html.basic' import to implement it.

Is there a possibility for atom-handlebars to recognize .hjs files ?

Thanks and cheers !

EDIT : I added it myself (see the pull request 😸 )

When a hyphen is used in a Handlebars helper name (perhaps specific to Ember.js) the syntax highlighting breaks. Examples also include Ember.js components.

One would expect the whole text to be highlighted green.

I'm experiencing a little issue with comments in plain HTML files.
I have binded the toggle-line-comments command with the ctrl-7 shortcut. But when I use it in a simple HTML file the line is not surrounded with the usual HTML comment tags (<!-- -->) but instead the handlebars comment tags are used ({{!-- --}}).
I temporarily solved this problem by removing these two lines from atom-handlebars.cson:

'commentStart': '{{!-- '
'commentEnd': ' --}}'

Maybe it should detect if the file type is HTML or Handlebars and apply the correct comment regarding context.

I'm feeling a bit stupid here, but I cannot get this to work at all.

The handlebars syntax is still white:

I've installed, uninstalled and installed again. Restarted atom multiple times etc.

Am I missing a step?

I've been building Zendesk apps, and they use hdbs as the extension for handlebars. I would be willing to add it if you don't see any issue.

I'm using ember
each-in snippets end with {{/each}} which causes hbs compiler error as following

The Broccoli Plugin: [TemplateCompiler] failed with:
Error: each-in doesn't match each

replace with {{/each-in}} will work.
:)I've created a PR # #40

Not using Javascript syntax highlighting for Block Helpers

Hey, I happen to have a Handlebars package available for Atom as well, and I figure it makes a lot more sense to just combine them to have one package that works better and it better maintained. What do you think? I'd be happy to fork this repo and integrate the differences from my package as best I can.

Could you please publish the handlebars module to npm? We are using the same highlighting engine as Atom now, and would like to add your grammar:

https://www.npmjs.com/package/polyglot-readme

{{{}}} needs to be completely highlighted.

Currently else if isn't being highlighted together like I'd expect - and it leads me to end up googling whether it's elsif else if or elseif each time I try to use that handlebars helper lol.

{{#if x}}
  x
{{else if y}}
  y
{{/if}}

I found the part in the handlebars docs that describe the behavior around else if: "Conditionals may also be chained by including the subsequent helper call within the else mustache."
http://handlebarsjs.com/block_helpers.html

Is it possible to "add more colors" to the syntax?
E.g make if/else/each one color, strings another, this etc?

Do I have to update the packege or is it just some CSS? 😁

Looks like you have copypasta'd the language html grammar, including all the snippets. You can include grammars rather than duplicating them. See the erb definition for an example.