vim-pug icon indicating copy to clipboard operation
vim-pug copied to clipboard

Scripts that are not javascript are not highlighted correctly.

Open w9 opened this issue 11 years ago • 11 comments

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.

w9 avatar Jun 05 '14 04:06 w9

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.

digitaltoad avatar Jun 06 '14 18:06 digitaltoad

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.

w9 avatar Jun 06 '14 19:06 w9

Got it. I'll get this updated.

digitaltoad avatar Jun 06 '14 20:06 digitaltoad

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?

w9 avatar Jun 06 '14 20:06 w9

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.

digitaltoad avatar Jun 06 '14 21:06 digitaltoad

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.

w9 avatar Jun 10 '14 16:06 w9

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

digitaltoad avatar Jun 10 '14 18:06 digitaltoad

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.

joeytwiddle avatar Jun 10 '14 18:06 joeytwiddle

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/

mxriverlynn avatar Jun 12 '14 14:06 mxriverlynn

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.

jessaustin avatar Jun 24 '14 13:06 jessaustin

Thank you for all the help @jessaustin

digitaltoad avatar Jun 24 '14 16:06 digitaltoad