digitaltoad / vim-pug

Vim Pug (formerly Jade) template engine syntax highlighting and indention
824 stars 74 forks source link

Scripts that are not javascript are not highlighted correctly. #43

Open w9 opened 10 years ago

w9 commented 10 years ago

For example, when writing an angular app, you can write some ng-template in inline:

html(data-ng-app="myApp")
  body
    script(type="text/ng-template" id="myTemplate")
      input.form-control(placeholder="Enter your name here")  // these two lines
      button.btn.btn-default OK!        // shouldn't be highlighted as javascript

In the above example, the code should be highlighted as jade. And for good reason: the script tag is not followed by a ., indicating that the following code, compiled by jade, will become tags anyways. So it is not reasonable to highlight them as anything but jade code.

digitaltoad commented 10 years ago

Can you explain what you mean by followed by a .? I'm sorry I haven't used Jade in a long time, I just try to keep this repo up to date.

w9 commented 10 years ago

In jade, if you want to write inline javascript, you have to use:

script.
  console.log('JavaScript code here ...');

which is compiled to

<script>
  console.log('JavaScript code here ...');
</script>

notice the . after script, it is very important because if you omit it, this snippet will be compiled as:

<script>
  <console class="log"></console>
</script>

in fact it might not be compiled at all because it's a syntax error. In which case, this line should be highlighted as jade instead of javascript. Note that sometimes this is actually very important because angular can store some html templates inside of a <script> tag. For example:

script(type="text/ng-template")
  h1 Template Title
  p Template Content

but currently the template is highlighted as javascript, instead of jade.

TL;DR: My suggestion is, after script:

  1. highlight as jade if no. after script;
  2. highlight as javascript if no type is given or type="text/javascript";
  3. highlight as plain text otherwise.
digitaltoad commented 10 years ago

Got it. I'll get this updated.

w9 commented 10 years ago

Again, thank you for all the work. It's an amazing plugin.

Just out of curiosity, why you devoted so much time for a jade plugin if you are not using jade so often?

digitaltoad commented 10 years ago

I was immediately interested in Jade so I quickly converted vim-haml over to a separate Jade plugin. I have only used it in passing, but I keep the plugin updated for those that use it.

w9 commented 10 years ago

Thank you.

Note also that the same problem is with the style tag. Although I don't know any other language besides css uses this tag, but for future-proofness and compliance with what jade compiler actually does, (so that people may avoid accidentally missing the .) you should also consider that after the style tag:

  1. highlight as jade if no. after style;
  2. highlight as css if no type is given or type="text/css";
  3. highlight as plain text otherwise.
digitaltoad commented 10 years ago

These might take me a while to fix. I'm approaching the limits of my Vim syntax understanding.

joeytwiddle commented 10 years ago

You don't use jade? Hehehe. I use your syntax highlighter for Jade and Blade. It's great! :D

I'm not a fan of Jade's forced switch to style., but there it is. (I don't think Blade adopted that.) w9's suggestions seem good for Jade anyway.

mxriverlynn commented 10 years ago

FWIW, I have a workaround for this that I've been using for a while now: http://derickbailey.com/2014/05/07/polyfill-the-template-element-with-jade-mixins/

jessaustin commented 10 years ago

I'm planning on improving tag handling both inside and outside of trailing-"." tag blocks. I'll look at this afterward. Frankly I was confused by the javascript handling in the syntax file, but reading this thread I think I'm starting to get it.

digitaltoad commented 10 years ago

Thank you for all the help @jessaustin