Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I've found syntax highlighters that highlight pre-existing code, but I'd like to do it as you type with a WYSIWYG-style editor. I don't need auto-completed functions, just the highlighting.
As a follow-up question, what is the WYSIWYG editor that stackoverflow uses?
Edit: Thanks to the answer below, I found two that look like they might suit my needs:
EditArea and CodePress
EDIT: See this question also:
https://stackoverflow.com/questions/379185/free-syntax-highlighting-editor-control-in-javascript
The question might be better stated as "What syntax-highlighting editor do you recommended to replace an html textarea in my web app?" (Some of the other answers here deal with desktop apps or pure-syntax highlighters, not client-side editors)
I also recommend CodeMirror, it's written in Javascript and supports lots of browsers. It uses a real parser (rather than regexps) so it can deal with complex problems like correctly highlighting escaped strings. The developer is also very responsive on the discussion group.
Here is a really interesting article about how to write one: (Even better, he gives the full source to a JavaScript formatter and colorizer.)
Implementing a syntax-higlighting JavaScript editor in JavaScript
or
A brutal odyssey to the dark side of the DOM tree
How does one do decent syntax
highlighting? A very simple scanning
can tell the difference between
strings, comments, keywords, and other
code. But this time I wanted to
actually be able to recognize regular
expressions, so that I didn't have any
blatant incorrect behaviour anymore.
Importantly, it handles regex correctly. Also of interest is that he used a continuation passing style lexer/parser instead of the more typical lex (or regex) based lexers that you'll see in the wild.
As a bonus he discusses a lot of real-world issues you'll run into when working with JavaScript in the browser.
See Google code pretify.
See this question for the edit control that stackoverflow uses.
Sorry to drag this back up but the best i have found in CodeMirror http://codemirror.net/
I dont program a lot of javascript but JSEclipse has been pretty helpful for me in the past. It comes as an Eclipse plug-in.
I've been using it for years for free
http://www.interaktonline.com/products/eclipse/jseclipse/overview/
I also rely heavily on FireBug for Firefox whenever I deal with Javascript
You can also try http://softwaremaniacs.org/soft/highlight/en/ - it's fast, it supports not only javascript but many other languages. And if you need a live preview of how the highlighting will work, you can use setInterval to run the highlighting and show it in a separate box.
Although it has a steep learning curve, Vim is the best editor out there, for any language. It has a GUI version, but really shines in terminal editing. Any time spent learning how to use this editor is not time wasted. It has syntax highlighting, as you're looking for, as well as thousands (literally) of other features and plugins.
Gotta go with Bespin by Mozilla. It's built using HTML5 features (so it's quick and fast, but doesn't support legacy browsers though), but definitely amazing to use and beats everything I've come across - probably beacause it's Mozilla backing it, and they develop Firefox so yeah... There's also a jQuery Plugin which contains a extension for it to make it a bit easier to use with jQuery.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I need an extremely tiny implementation of (maybe a subset of?) Javascript. Code size and memory usage are extremely important (speed isn't in the question, it can run as slow as it likes). It must be written in C (not C++), and that too, ANSI C (GCC extensions are okay). If it runs on a VM would be best, because I will have to write a compiler for it. Any suggestions?
EDIT: Both of the responses I have seem good, except:
SpiderMonkey concentrates a lot on making it faster, I don't care if its fast at all.
Quad-Wheel sounds good, except the activity on it, and code comments are few (I will be porting this to another architecture if that helps).
So, any other responses would be great. Or, I could roll out my own simplified version of JS (but that doesn't sound fun at all)
Duktape is written in C, with a focus on portability and compact footprint: http://duktape.org/
I just discovered this ruby: https://github.com/gfwilliams/tiny-js
I've been looking quite some time for this, since spidermonkey/v8 usually is pretty big and comes with several dependancies. Tiny-js is a portable 'run make and your done'-linux c-class. Perfectly for if you are only looking for simple bindings and prefer javascript/c-syntax over lua/other awesome scriptinglanguages.
An ANSI-C engine for ECMA-262: http://code.google.com/p/quad-wheel/
Mozilla SpiderMonkey is written in C as well, but probably to complex and large for you?
SpiderMonkey is Mozilla's C implementation of JavaScript.
http://www.mozilla.org/js/spidermonkey/
muJS from Artifex Software might be another option for embedded JS/ES implementation.
You should look at Jsi, which was just released. It is very small, is a subset of javascript, and is in C (derived from quadwheel).
I think the jsi he's talking about is this: http://pdqi.com/cgi-bin/cgiwrap/pdqi/jsi.cgi/doc/tip/jsi/www/usingjsi.wiki
(Don't blame it is not... hehe)
http://jsish.org will redirect you to the host site.
https://github.com/cesanta/v7 is designed for embedded systems. Has very small footprint.
Have you looked at JerryScript?
If you are completely expect a full Node.js runtime at embeddable, ShadowNode might be a good for you.
https://github.com/Rokid/ShadowNode
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
Are there any command line scripts and/or online tools that can reverse the effects of minification similar to how Tidy can clean up horrific HTML?
(I'm specifically looking to unminify a minified JavaScript file, so variable renaming might still be an issue.)
You can use this : http://jsbeautifier.org/
But it depends on the minify method you are using, this one only formats the code, it doesn't change variable names, nor uncompress base62 encoding.
edit: in fact it can unpack "packed" scripts (packed with Dean Edward's packer : http://dean.edwards.name/packer/)
Chrome developer tools has this feature built-in. Bring up the developer tools (pressing F12 is one way), in the Sources tab, the bottom left bar has a set of icons. The "{}" icon is "Pretty print" and does this conversion on demand.
UPDATE: IE9 "F12 developer tools" also has a "Format JavaScript" feature in the Script tab under the Tools icon there. (see Tip #4 in F12 The best kept web debugging secret)
Got it! JSBeautifier does exactly this, and you even have options for the auto-formatting.
Can't you just use a javascript formatter (http://javascript.about.com/library/blformat.htm) ?
In Firefox, SpiderMonkey and Rhino you can wrap any code into an anonymous function and call its toSource method, which will give you a nicely formatted source of the function.
toSource also strips comments.
E. g.:
(function () { /* Say hello. */ var x = 'Hello!'; print(x); }).toSource()
Will be converted to a string:
function () {
var x = "Hello!";
print(x);
}
P. S.: It's not an "online tool", but all questions about general beautifying techniques are closed as duplicates of this one.
If you have a Mac and TextMate - An easy alternative for formatting Javascript is:
Open the file with Textmate.
Click on > Bundles > JavaScript > Reformat Document
Crack open a beer.
Most of the IDEs also offer auto-formatting features. For example in NetBeans, just press CTRL+K.
As an alternative (since I didn't know about jsbeautifier.org until now), I have used a bookmarklet that reenabled the decode button in Dean Edward's Packer.
I found the instructions and bookmarklet here.
here is the bookmarklet (in case the site is down)
javascript:for%20(i=0;i<document.forms.length;++i)%20{for(j=0;j<document.forms[i].elements.length;++j){document.forms[i].elements[j].removeAttribute(%22readonly%22);document.forms[i].elements[j].removeAttribute(%22disabled%22);}}
I'm not sure if you need source code. There is a free online JavaScript formatter at http://www.blackbeltcoder.com/Resources/JSFormatter.aspx.
Try this one, with code coloration:
http://labs.swelen.com/tools/javascript/beauty.html
click on these link for JS deminification. That will install on FF as extension that help you in debugging js at runtime.
https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/eula/141018?src=dp-btn-primary
Similar to Stone's answer, but for Windows/.NET developers:
If you have Visual Studio and ReSharper - An easy alternative for formatting Javascript is:
Open the file with Visual Studio;
Click on ReSharper > Tools > Cleanup Code (Ctrl+E, C);
Select "Default: Reformat code", and click OK;
Crack open a beer.
Despite its miles-away-from-being-pretty interface, JSPretty is a good, free and online tool for making javascript source codes human-readable. You can enforce your preferred type of indentation and it can also detect obfuscation.
If one is in JS possibility of using Firefox is more. And if its Firefox add on is for rescue. Following one is particularly useful.
https://addons.mozilla.org/en-US/firefox/addon/phoenix/
Pretty Diff will beautify (pretty print) JavaScript in a way that conforms to JSLint and JSHint white space algorithms.
Wasn't really happy with the output of jsbeautifier.org for what I was putting in, so I did some more searching and found this site: http://www.centralinternet.com.br/javascript-beautifier
Worked extremely well for me.
http://unminify.appspot.com/
Great tools for unminify javascript and json
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I want to cleanup some javascript files and reformat them with nice indents, etc,
Are there recommendations for utilities to do this under Windows?
Beautify Javascript is a good, simple option.
(Oops. Thought I grabbed the link for the app, not the home page.) ;)
Try the online JavaScript Tidy
Several attempts have been made to
produce programs to reformat code, but
these often fail to cope with
situations such as '{', '}' or ';'
characters inside strings, regular
expressions, or comments, so virtually
all of them end up with broken code.
However, browsers already have their
own parsers built in that deal with
all of these situations. This script
hooks into the browser's own parser,
by wrapping the code in a function
then using the native toString method
to obtain the tidied code. As a
result, it relies on the browser
producing a tidied output, which there
is no requirement for them to do. In
fact, it relies on the browser
decompiling to tidied code instead of
just retaining the original, which is
an expensive process in terms of
performance, and leads to extra
complexity when trying to make sure
the decompiled code still works, so
not all browsers choose to do it this
way.
For best results, use Opera 9.2x- (not
9.5+), Safari or Konqueror on this page. It partially works in Firefox
(nested functions are not tidied,
meaning that most scripts you want to
tidy still end up unreadable), and
fails to reformat code in IE and iCab
3-. Since you can always keep a copy
of Opera 9.2 on your computer (as well
as whatever the current version is), I
recommend you use Opera, and keep a
copy of it around for use with JSTidy.
If you have Visual Studio you can open the Javascript document and press CTRL+K, CTRL+D to format the whole document.
This page on about.com has a tool where you paste in your script and it cleans it up for you.
GNU indent tidies up C-style languages. Perhaps Javascript could be used as a subject as well.
For offline use, this answer to a similar question explains how to set up the code Jonathan suggested to run from a command line with Rhino.
Our JavaScript Formatter uses a language-precise parser to read the Javascript and then format the code. It doesn't get confused by the contents of HTML, strings, or characters. Does run on Windows.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Are there any good recommendations anyone can provide for a good Javascript editor on Windows?
I currently use combinations of FireBug and TextPad but would hate to miss out on the party if there are better options out there.
Thanks.
I know jsight already mentioned this, but Aptana Studio really is a great, free editor for JavaScript if you find yourself doing a lot of work with it - it has great support for most of the well-known libraries. If it were not for the fact that I work with C# in addition to JavaScript, I would use Aptana for all of my work.
I use NotePad++ and am happy (of course, that is when I am not using Visual Studio).
NotePad++ contains support for intellisense type feature as well.
(This is a cross-answer post)
Netbeans
I've tried out all of the above and my vote goes for Netbeans, which has been mentioned. However the answer didn't really sell you on the features which you can find here.
It has:
Intellisense including jQuery built in
Extended (Eclipse-style) documentation for functions
Function and field outlining
Code folding
Refactoring
It makes Visual Studio 2010's Javascript support look very primitive.
The Zeus editor has support for Java Script.
It has the stock standard set of features like code folding and syntax highlighting features etc, but more importantly Zeus is fully scriptable and Zeus scripts can be written in Java Script.
In case you're a .Net programmer: VS 2008 has pretty great JS support including intellisense on dynamically added methods/properties and comfortable debugging.
The best that I've ever used is Netbeans, although its kind of heavyweight for some tasks due to being a fullblown multi-language IDE (not just Javascript). I've also had pretty good experiences with Aptana IDE, though, and I hear that IntelliJ is good if you don't mind paying the price.
WebStorm. If you have used any Jetbrains products you'll love it. It has Autocomplete and all the other javascript goodies. Even node.js support is provided. Check it out
If you are using eclipse, then I would recomend JSEclipse
I'm still a huge fan of HomeSite, even though Adobe discontinued development in May 2009: http://www.adobe.com/products/homesite/.
Both NetBeans and Eclipse have JavaScript editing support. The latest version of NetBeans actually does a really good job. They are both free and you can use them for other languages as well, this way you have a chance to get to know the IDE and the shortcuts as well.
Komodo Ide or Komodo Edit of course.
Editra may be worth a look, the code colouring isn't bad, and I believe it has plugins to enable script execution.. Although I have not used this myself.
GVim is still awesome - not only for JavaScript for for almost all languages.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm a front-end developer and I was looking for opinions about the best all-round online documentation for javascript/css/html/xhtml/dom/browser quirks and support. I've tried Sitepoint, Quirksmode, W3Schools but all of these seem to be lacking in certain aspects and have been using them in combination.
I like Mozilla's references:
http://developer.mozilla.org/en/JavaScript
http://developer.mozilla.org/en/DOM
These are not at all the one stop site you want, but they help me.
I like gotapi.com (Update 2: Site is apparently offline -- Use another resource such as MDN)
Update: the original answer was from 2008 -- today I would say to check out Mozilla Developer Network (as many others have also said).
You've actually hit the nail on the head in your description. There is no single website that'll provide you with the detail you seek in every one of those facets.
I find these three are incredibly useful when starting on a blank page: Mozilla DOM Reference (for general js syntax, etc), w3schools x/html reference (look up uncommon attributes!) and quirksmode (cross-browser js/style details). These are quite highly ranked so look for their urls if you're searching for something specific.
As for specific browser quirks, your best bet is to handle these as they come up and develop skills for googling for answers efficiently. Lots of browser quirks have many variables that go into what you actually end up seeing and how developed a 'solution' is for a specific quirk depends on how much time someone has spent investigating it. Read a bunch of search results and see if the problems are all similar or completely separate. Then, refine your search!
Go straight to W3C docs. They're a bit cryptic at times, but they're solid documentation.
For quirks, obviously sites like Quirksmode are good. But only once you've read actual W3C documentation.
Sitepoint has a very comprehensive guide to CSS
The same reference which is included in the Aptana IDE is online... just found this... it's really good:
CSS
http://www.aptana.com/reference/html/api/CSS.index.html
HTML
http://www.aptana.com/reference/html/api/HTML.index.html
HTML DOM O
http://www.aptana.com/reference/html/api/HTMLDOM0.index-frame.html
HTML DOM 1 & 2
http://www.aptana.com/reference/html/api/HTMLDOM2.index-frame.html
JavaScript Keywords
http://www.aptana.com/reference/html/api/JSKeywords.index.html
JavaScript Core
http://www.aptana.com/reference/html/api/JSCore.index-frame.html
I like w3schools for html or simple questions.
For Javascript, I find Mozilla Developer Center to be pretty useful: Core Javascript 1.5 Reference
zvon.org
http://reference.sitepoint.com/
blooberry.com is a great HTML/CSS reference site.
devguru.com
I rely on http://quirksmode.org/resources.html for information on HTML/CSS/JavaScript. This resource does a great job addressing cross-browser compatibility issues in a helpful table format.
This may be useful for some javascript functions http://kangax.github.com/es5-compat-table/
I tend to go to http://msdn.microsoft.com/ first.
There is a very good german reference (and french I think) at selfhtml.org.
I recommend going through these JavaScript Video Lectures (15 of them).
GotAPI is a fantastic resource http://www.gotapi.com
http://www.selfhtml.org/ is in German (originally) and French (translated). English translation has been unfortunately suspended: http://en.selfhtml.org/
I'd recommended w3schools.com. It's a pretty good and comprehensive library, I find.
I always start with www.zvon.org, especially the references section. Provides a good overview and links directly to the corresponding standards.
javascriptkit.com/jsref/ (convenient JavaScript reference with examples)
javascriptkit.com/domref/ (DOM reference with examples)