Vim syntax highlighting problems in Polymer elements - javascript

Google's Polymer elements generally include a markdown table of css variables in the first comment block. I've noticed that vim's syntax highlighting always craps out around here. I thought it was vim's fault, but I recently discovered that these comments are actually invalid HTML according to these w3 specs (it's illegal to include -- anwhere inside an HTML5 comment).
What needs to change here? Should vim have a more lenient syntax highlighter, or should Polymer overhaul all of its jsdocs?
Edit: I've noticed the same syntax highlighting issues in Atom and Sublime as well (but not WebStorm).

Found this inside :help html:
HTML comments are rather special (see an HTML reference document for the
details), and the syntax coloring scheme will highlight all errors.
However, if you prefer to use the wrong style (starts with ) you can define
:let html_wrong_comments=1
This fixed the issue for me.

Related

Can't get the correct Language Mode / IntelliSense for a script tag with type="text/jsx" in an HTML file

I have the latest version of Visual Studio Code (1.75.1). Am using "Solarized Dark" color theme.
I have an html file, with React Javascript code inside tags.
If I leave the language selection as "HTML" it doesn't color anything inside the script tags:
If I use "JavaScript React" or "Babel Javascript" as the language mode I get error highlights that are not errors, and intellisense doesn't work that well:
I tried changing the theme to Dark+ and it didn't make a difference either.
Why does this happen?
It's because you set the type attribute in your script tag to "text/jsx" (nothing inherently wrong with that).
Currently (at the time of the writing, v1.75), VS Code only supports JavaScript intellisense for script tags with either no type attribute, or type="module", type="text/javascript", or type="application/javascript" or similar.
type="text/jsx" is not currently supported.
There have been two issues about this reported on the VS Code GitHub repo: Syntax highlighting doesn't work with "text/jsx" script tags #150171 and Syntax highlighting for text/jsx #145992. In both, the a repo maintainer comented that the correct place to report the issue is at https://github.com/textmate/html.tmbundle/issues, which has been done now: Syntax for text/jsx inside HTML #119. Note: Please consider not commenting "me too" in the comments there. I can't speak for that repo's maintainers, but for many project maintainers, such comments tend to come off as annoying unless the commentor actually also volunteers to help out. You can just give a thumbs up reaction if you don't want to expend effort in helping implement the feature.
For your skill-in-googling learning, here's the google search query I made to find those: vscode issues html script jsx
Related: How can I enable IntelliSense for JavaScript inside HTML?

Sourcecode syntax highlighting with Code Folding

I know there are many syntax highlighting scripts in Javascript for adding syntax highlighting to source code, I am looking to see if such a thing exist with the addition of having Code Folding like many IDE's have.
Do you know if anything exist like that?
Thanks to Wikipedia, I found CodeMirror, which is not only a syntax highlighter, but also a code editor. However, according to the following code folding demo, you can use it just as a viewer.
It's written in Javascript and it supports a lot of languages (full list here).

How do I make vim indent JavaScript in HTML?

Vim 7.0.237 is driving me nuts with indentexpr=HtmlIndentGet(v:lnum). When I edit JavaScript in a <script> tag indented to match the surrounding html and press enter, it moves the previous line to column 0. When I autoindent the whole file the script moves back to the right.
Where is vim's non-annoying JavaScript-in-HTML/XHTML indent?
Here is similar question with accepted answer with links to two vim plugins:
html improved indentation : A better indentation for HTML and embedded javascript mentioned by Manni.
OOP javascript indentation : This indentation script for OOP javascript (especially for EXTJS) .
One of them solved my problems with JavaScript scripts indention problems.
Have you tried this plugin?
I recommend installing vim-javascript.
It is an up-to-date plugin that properly indents javascript, including more recent developments like the syntax used in closures such as with jQuery.
Personally I toggle between :set ai and :set noai, but might be too tedious for you.
I have plugins for indenting HTML and JavaScript files. To indent JavaScript inside HTML, I temporarily change the file type, select and indent the lines, and then change the file type back.
:filetype javascript
(select lines)
=
:filetype html
It's a little tedious, but it always produces the results I expect.

Looking for customizable syntax highlighting in the browser

I'm looking for a customizable JavaScript script which dynamically highlights code in a block like
<code class="someclass">source code...</code>
It needs to be customizable because the source code is in a quite esoteric programming language (Mozart/Oz). Ideally, I'd just edit some regexes to make it work.
I need dynamic highlighting because it should work in the github wiki which escapes all HTML code within a pre tag.
My Google fu has forsaken me so far...
SyntaxHighlighter might be what you're looking for. It supports custom languages, as well.
jQuery Syntax Highlighter is a new one based on version 3 of Alex Gorbatchev's Syntax Highlighter - a really really really popular plain javascript syntax highlighter.
It supports such things as code and pre blocks, able to use classnames like language-javascript to indicate we want it to highlight, as well as wordwrap. You can copy and paste code by selecting it normally instead of having to open a raw view like many others. It can be further customised by using the HTML5 data attribute data-sh or via specifying options at initialisation. A great stable choice which is updated regularly.

Javascript syntax highlighting in vim

Has anyone else found VIM's syntax highlighting of Javascript sub-optimal? I'm finding that sometimes I need to scroll around in order to get the syntax highlighting adjusted, as sometimes it mysteriously drops all highlighting.
Are there any work-arounds or ways to fix this? I'm using vim 7.1.
You might like to try this improved Javascript syntax highlighter rather than the one that ships with VIMRUNTIME.
Well, I've modified Yi Zhao's Javascript Syntax, and added Ajax Keywords support, also highlight DOM Methods and others.
Here it is, it is far from being perfect as I'm still new to Vim, but so far it has work for me. My Javascript Syntax. If you can fix, add features, please do.
UPDATE: I forgot these syntax highlights are only shown if you included them in your own colorscheme, as I did in my Nazca colorscheme. I'll test if I could add these line into my modified syntax file.
Follow the new version of the javascript syntax file in github, for it is no longer required to modify your current colorscheme.
Syntax coloring synchronization probably needs adjustment. I've found in certain contexts that I need to change it.
Syntax synchronization (":help syn-sync") controls how vim keeps track of and refreshes its parse of the code for coloring, so that it can start drawing anywhere in the file.
The defaults don't always work for me, so sometimes I find myself issuing
:syn sync fromstart
I suggest reading through the documentation under
:help syn-sync
or just check
:help syntax
and find the section on synchronization.
to make an informed decision among the four available basic options.
I maintain mappings to function keys to switch between "fromstart" and "ccomment" modes and for just clearing the sync settings.
This is a really old post, but I was experiencing the same thing: sometimes syntax highlight would just stop working when looking at the javascript section in an .html file. As the OP mentions, a quick workaround was to scroll up and then magically things would start highlighting again.
Today I found the underlying problem and a good solution. In Vim, syntax highlighting uses a context to derive the correct highlight, where context is defined by the previous lines. It is possible to specify how many lines before the current line are used by issuing :syntax sync minlines=200. In this case, it will use up to 200 previous lines as context. It is possible to use the whole file (which can be slow for long files) by running :syntax sync fromstart.
Once I found that, I added this line to my .vimrc:
autocmd BufEnter *.html :syntax sync fromstart
By doing so, .html files will use the whole file as context. Thus, the javascript section will always by highlighted properly, regardless of how long the JS section is. Hope this helps someone else out there!
For a quick and dirty fix, sometimes I just scroll up and down and the highlighting readjusts. Ctrl+L for a screen redraw can also fix it.

Categories