Sourcecode syntax highlighting with Code Folding - javascript

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).

Related

Vim syntax highlighting problems in Polymer elements

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.

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.

Vim style folding for CSS/javascript in Visual Studio

Is anyone aware of a way to have VIM style folding in Visual Studio? I use #region blocks in c# class files and they're great, but unfortunately there's no equivalent functionality for javascript and css. The site/app I'm currently working on has a rather lot of css selectors and javascript and navigating the monolithic files is becoming difficult.
One option that we've considered is breaking up the css and javascript into separate files similiar to jquery modules, but then that introduces performance problems in terms of increasing the overall number of http requests.
If anyone has any suggestions for managing the madness, I'd be greatly appreciative!
Update: Richard Kimber suggests using the bookmarking features of visual studio to make navigating by headings more manageable. This is a step in the right direction, but not as useful as code folding/blocking.
I found a Microsoft extension that improved the JavaScript text editor for Visual Studio 2010.
http://visualstudiogallery.msdn.microsoft.com/en-us/872d27ee-38c7-4a97-98dc-0d8a431cc2ed
I have used it, and it gives all of the following for JavaScript files:
Brace Matching
Outlining / Code-folding
Current Word Highlighting
IntelliSense Doc-Comments Support
I know I'm not really helping with this one,
but have you heard of ViEmu. It is a, lets say, vim emulation within VS. Although it does not support all of vim's features, it does bring a flavor of it to VS navigation.
I haven't used it myself, but others talk pretty good of it, so you might want to give it a shot.
I am currently using JScript Editor Extensions as Brian Grinstead suggested. If it supports region folding, I haven't figured out how. It does support function folding in JavaScript.
There are also JSEnhancements and JSOutlining. Haven't tried either of those though.
This issue is a partial duplicate of this and this.

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