A syntax-higlighting JavaScript editor in JavaScript | Hacker News Reader

A syntax-higlighting JavaScript editor in JavaScript

marijn.haverbeke.nl

10 pointsbootload7 comments

This has been around for a while, and its one of the more impressive pieces of JavaScript I've seen. Its by far the best syntax highlighter I have seen on the web. The code is pretty difficult to follow though, and it doesn't work in Safari 2.

I (author of the thing, didn't submit the link here) did do some polishing and commenting on the code recently -- the last time it was submitted here it was in a bit of a write-only state.

"... author of the thing, didn't submit the link here) did do some polishing and commenting on the code recently ..."

Hey Marijn I didn't know the code had been previously submitted. I added your article because I've been looking to hack up a simple Javascript console editor to work with.

  editing Javascript in Firebug is okay for simple expressions 
  useless for anything above 3 lines

Coding in the browser allows the REPL [0] time to be reduced and you get instant feedback. So this lead me to your article. What I intend to do is try to re-create pythons idle shell [2] allowing you to type in syntax (highlighted) then press enter, eval the code on the next line. Reading your article helps me a lot in solving this.

I re-created the demo in about 5min last night. One problem I do have is entering text then hitting newline. Artifacts are left on-screen and the gutter spacing is odd. I'll see if YUI Dom object can solve the placement problem.

I do like the style of syntaxhighlighter. [3] Did you ever think of adding line numbers?

[0] http://en.wikipedia.org/wiki/REPL

[1] Demo code ~ http://marijn.haverbeke.nl/codemirror/

[2] http://www.python.org/idle/doc/idle2.html#Shell

[3] http://code.google.com/p/syntaxhighlighter/

About line numbers -- the people of TYPO3 did add them to their branch (though they made a bit of a mess in the process), and it seems most other in-browser code-editors support them, but I've never really seen their utility. Something like a status bar showing the current line would be just as useful, less wasteful of screen space, and addable as a wrapper to the current editor. I designed the thing to be a 'component' that can be put into all kinds of systems, rather than a full-blown IDE.

>And who likes pain?

Let me guess, you?

I remember seeing a 3D JS/DOM 1st person shooter and a raytracer in JS, wonderful intelectual excercises. Probably not products.

Well, pretty much every product starts out as a proof of concept or a prototype. Both of those things you mention prove that something specific can be done in javascript. And I can say that they were pretty helpful to my partners and I.

"... wonderful intelectual (sic) excercises. Probably not products ..."

Wrong.

If you read the article carefully, you will see the code was used to produce a rather nice interactive digital book, *"Eloquent JavaScript: An opinionated guide to programming" ~ http://eloquentjavascript.net/chapter1.html

Reply on news.ycombinator.com