How do I make vim indent JavaScript in HTML? - javascript

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.

Related

Replace space with underscore in Netbeans Code Templates

I created the below JavaScript Code Template in Netbeans 7.1.1
This is to generate code automatically in the editor, instead of typing it.
do_this('${selection}${cursor}',13)
which will result in the below code, with the cursor between quotes
do_this('',13)
The template automatically places the text I have highlighted, between quotes.
Now, the problem: I would like to replace any spaces within the selected/highlighted piece of code, with underscores. I think this may be possible with Regular Expressions (regex), however I am not sure how to go about it.
Thanks
Not sure about the Netbeans specific stuff, but once you have the selection you could do something like this:
selection = selection.split(" ").join("_");
This is not possible in NetBeans Code Templates, as they do not have any functions to manipulate the data in variables. If I have a work around for it, I will post it here.
Thanks.

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 configure emacs for editing HTML files that contain Javascript?

I have started the painful first steps of using emacs to edit an HTML file with both HTML tags and javascript content. I have installed nxhtml and tried using it - i.e set up to use nxhtml-mumamo-mode for .html files. But I am not loving it. When I am editing the Javascript portion of the code the tab indents do not behave as they do when editing C/C++ code. It starts putting tabs within the line and if you try and hit tab in the white space preceding a line it inserts the tab rather than re-tabifying the line.
Another aspect that I don't like is that it doesn't do syntax colouring like the usual C/C++ modes do. I much prefer the behaviour of the default java-mode when editing HTML files but that doesn't play nicely with the HTML code. :-(
1) Is there a better mode for editing HTML files with Javascript portions?
2) Is there a way to get nxhtml to use the default java-mode for the javascript portions?
Regards,
M
Another solution is multi-web-mode:
https://github.com/fgallina/multi-web-mode
which may be more easily configurable than the already mentioned multi-mode.
You just configure your preferred modes in your .emacs file like this:
(require 'multi-web-mode)
(setq mweb-default-major-mode 'html-mode)
(setq mweb-tags
'((php-mode "<\\?php\\|<\\? \\|<\\?=" "\\?>")
(js-mode "<script[^>]*>" "</script>")
(css-mode "<style[^>]*>" "</style>")))
(setq mweb-filename-extensions '("php" "htm" "html" "ctp" "phtml" "php4" "php5"))
(multi-web-global-mode 1)
More on Emacs's multiple multiple modes (sigh) here:
http://www.emacswiki.org/emacs/MultipleModes
UPDATE: simplified the regexps to detect JavaScript or CSS areas to make them work with HTML5 -- no need for super-precise and fragile regular expressions.
I have written the major mode web-mode.el for this kind of usage : editing HTML templates that embed JS, CSS, Java (JSP), PHP. You can download it on http://web-mode.org
Web-mode.el does syntax highlighting and indentation according to the type of the block.
Installation is simple :
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.html$" . web-mode))
Great question. Look how many upvotes you got on your first one!
Everyone has the same experience as you. Me too.
Rather than rely on nhtml-mode which exhibited the same sort of strangeness for me as you described, I looked for another option and found multi-mode.el . It's a sort of general-purpose multi-mode skeleton. To use it, you need to specify regular expressions to describe where one mode starts and another one ends. So, you look for <script...> to start a javascript block, and <style...> to start a css block. Then you plug in your own modes for each block - if you like espresso for javascript, use it. And so on for the other regexes that identify other blocks.
In practice, as you navigate through the document, a different mode is enabled for each block.
I used multi-mode to produce an ASP.NET, that allows me to edit C#, HTML, CSS, and Javascript in a single file, with the proper highlighting and fontification depending on where the cursor is in the buffer. It isn't perfect but I found it to be a marked improvement on the existing possibilities. In fact this may be what you want. Try it out.
https://code.google.com/p/csharpmode/source/browse/trunk/aspx-mode.el?r=14
Not really a good solution but a quick fix if you really need to have javascript in your html is to select the region containing javascript and use the command narrow-to-region(C-x n n) and then switch to your preferred javascript mode. The command widen brings you back, (C-x n w).
It sounds like you've setup your nxhtml incorrectly. The only setup necessary should be loading the autostart.el file, and then everything should work to some level. nxhtml isn't perfect in any way, but my experiences from using it for html/css/javascript/mako is pretty good, at least for everything but mako. But I'm pretty sure I've screwed up with the mako-part.
This is how I initialize my nxhtml:
(when (load "autostart.el" t)
(setq nxhtml-skip-welcome t
mumamo-chunk-coloring 'submode-colored
indent-region-mode t
rng-nxml-auto-validate-flag nil))

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