Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
w9 opened this issue Jun 5, 2014 · 11 comments
Open

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

w9 opened this issue Jun 5, 2014 · 11 comments

Comments

@w9
Copy link

w9 commented Jun 5, 2014

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
Copy link
Owner

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
Copy link
Author

w9 commented Jun 6, 2014

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
Copy link
Owner

Got it. I'll get this updated.

@w9 w9 changed the title Scripts that's not javascript are not highlighted correctly. Scripts that are not javascript are not highlighted correctly. Jun 6, 2014
@w9
Copy link
Author

w9 commented Jun 6, 2014

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
Copy link
Owner

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
Copy link
Author

w9 commented Jun 10, 2014

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
Copy link
Owner

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

@joeytwiddle
Copy link

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
Copy link

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
Copy link
Contributor

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
Copy link
Owner

Thank you for all the help @jessaustin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants