Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14462 > unrolled thread

Text editor with syntax highlighting in HTML+JS+CSS

Back to article view | Back to comp.lang.javascript

Contents

  Text editor with syntax highlighting in HTML+JS+CSS Stefan Weiss <krewecherl@gmail.com> - 2012-06-11 16:45 +0200
    Re: Text editor with syntax highlighting in HTML+JS+CSS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2012-06-11 19:39 -0700
      Re: Text editor with syntax highlighting in HTML+JS+CSS Stefan Weiss <krewecherl@gmail.com> - 2012-06-12 15:26 +0200
    Re: Text editor with syntax highlighting in HTML+JS+CSS Scott Sauyet <scott.sauyet@gmail.com> - 2012-06-12 09:51 -0700
      Re: Text editor with syntax highlighting in HTML+JS+CSS Stefan Weiss <krewecherl@gmail.com> - 2012-06-12 20:35 +0200
        Re: Text editor with syntax highlighting in HTML+JS+CSS Scott Sauyet <scott.sauyet@gmail.com> - 2012-06-12 22:35 -0700

#14462 — Text editor with syntax highlighting in HTML+JS+CSS

My Google skills have deserted me, due to too many irrelevant results
and generic keywords, so I'd like to ask if anyone here has used (or
even heard of) something like this before.

A client of mine is planning to use a custom domain specific language to
describe certain data transformation processes. Most of the application
is operated and configured with a web interface, and it would make sense
to have a way to edit the transformation processes in the same interface.

What we're looking for is an editor which can
- be embedded in an HTML document
- uses nothing but HTML, JS, and CSS
- has syntax highlighting
- can be extended to support new languages
- works the same across moderately modern browsers (IE7 being the
  weakest link)

It would be an advantage if the editor was as simple and light-weight as
possible. All we really want from it is the syntax highlighting;
otherwise we'd be using a simple text area.

I even did a quick & dirty experiment positioning a transparent textarea
over a div (for the highlighted code), and it worked reasonably well,
but when the textarea is transparent, so is the cursor and any text
selection. I didn't actually expect this to work, but thought it was
worth a few minutes to try it out, because we really don't need a
full-blown editor, just the syntax highlighing.

Any ideas?

- stefan

[toc] | [next] | [standalone]

#14465

So you want an IDE for JavaScript or your DSL?

If for JavaScript, perhaps something like 
<http://codepress.sourceforge.net/index.php>
<http://web.archive.org/web/20080203025247/http://rainbow9.org/?>
<https://code.google.com/p/rainbow9/>

They both seem to be abandoned though.

If you want to create something generic for your DSL, you may want to follow the approach used here: 
<http://www.regexpal.com/>

On Monday, June 11, 2012 9:45:04 AM UTC-5, Stefan Weiss wrote:
> My Google skills have deserted me, due to too many irrelevant results
> and generic keywords, so I'd like to ask if anyone here has used (or
> even heard of) something like this before.
> 
> A client of mine is planning to use a custom domain specific language to
> describe certain data transformation processes. Most of the application
> is operated and configured with a web interface, and it would make sense
> to have a way to edit the transformation processes in the same interface.
> 
> What we're looking for is an editor which can
> - be embedded in an HTML document
> - uses nothing but HTML, JS, and CSS
> - has syntax highlighting
> - can be extended to support new languages
> - works the same across moderately modern browsers (IE7 being the
>   weakest link)
> 
> It would be an advantage if the editor was as simple and light-weight as
> possible. All we really want from it is the syntax highlighting;
> otherwise we'd be using a simple text area.
> 
> I even did a quick & dirty experiment positioning a transparent textarea
> over a div (for the highlighted code), and it worked reasonably well,
> but when the textarea is transparent, so is the cursor and any text
> selection. I didn't actually expect this to work, but thought it was
> worth a few minutes to try it out, because we really don't need a
> full-blown editor, just the syntax highlighing.
> 
> Any ideas?

[toc] | [prev] | [next] | [standalone]

#14466

On 2012-06-12 04:39, Michael Haufe (TNO) wrote:
> So you want an IDE for JavaScript or your DSL?

For the DSL (which hasn't been finalized yet, we're just exploring
possibilities at the moment). And an IDE isn't really what we're looking
for. We only need a way to input source code (like a textarea) and a way
to do syntax highlighting, preferably both at the same time.

A minimal version would involve toggling between text input and
highlighted output, for example with a hotkey, a button, or by
focusing/unfocusing the textarea.

I'm tring to avoid building a whole new editor from scratch. The effort
would be wasted for the handful of people who are going to have access
to it.

> If you want to create something generic for your DSL, you may want
> to follow the approach used here:
> <http://www.regexpal.com/>

If we can't find a usable editor component, we'll probably use something
like SHJS to do the syntax highlighting:
http://shjs.sourceforge.net/


- stefan

[toc] | [prev] | [next] | [standalone]

#14467

Stefan Weiss wrote:

> What we're looking for is an editor which can
> - be embedded in an HTML document
> - uses nothing but HTML, JS, and CSS
> - has syntax highlighting
> - can be extended to support new languages
> - works the same across moderately modern browsers (IE7 being the
>   weakest link)


I have used TinyMCE, FckEditor (now just CkEditor, I believe) and one
I haven't seen around in a long time called HTMLArea.  They all worked
for what I needed them too, but that was some years ago.  I have
played around a bit with CodeMirror, which is what JSBin uses (as well
as Haverbeke's _Eloquent Javascript_ and some other interesting
sites), and that looks really promising,  but I haven't actually tried
to build something with it.

You might find this a decent place to start some surfing:

    <http://en.wikipedia.org/wiki/Comparison_of_JavaScript-
based_source_code_editors>

Good luck!

  -- Scott

[toc] | [prev] | [next] | [standalone]

#14468

On 2012-06-12 18:51, Scott Sauyet wrote:
> I have used TinyMCE, FckEditor (now just CkEditor, I believe)

I have used those two before, too, but they're HTML-WYSIWYG Editors, if
I remember correctly. FckEditor changed its name when we were still
using Drupal, and the reason for the renaming made me smile :)

> I have played around a bit with CodeMirror, which is what JSBin uses
> (as well as Haverbeke's _Eloquent Javascript_ and some other
> interesting sites), and that looks really promising,  but I haven't
> actually tried to build something with it.

CodeMirror does indeed look promising. From the description and the
demos, it appears to do exactly what we need, without getting in the
way. ~60k compressed size (with highlighting for one language included)
is fine by me, and it's for an intranet app, anyway.

> You might find this a decent place to start some surfing:
> 
>     <http://en.wikipedia.org/wiki/Comparison_of_JavaScript-
> based_source_code_editors>

Perfect, this is just what I was looking for.

Thank you!

- stefan

[toc] | [prev] | [next] | [standalone]

#14476

Stefan Weiss wrote:
> Scott Sauyet wrote:
>> I have used TinyMCE, FckEditor (now just CkEditor, I believe)
>
> I have used those two before, too, but they're HTML-WYSIWYG Editors, if
> I remember correctly.

Yes, I forgot to finish my thought there.  I have used WYSIWYG editors
with home-grown plug-ins as editors for various XML flavors.  It was
always a fairly big job, and I ended up removing a lot of their
functionality, but I found them a better starting point than working
from scratch.

I wouldn't recommend them these days when there seem to be better
options available though.


>                       FckEditor changed its name when we were still
> using Drupal, and the reason for the renaming made me smile :)

Hey, you want market-share?  You'd better stop FCKing around!  :-)


>> I have played around a bit with CodeMirror, [ ... ]
>
> CodeMirror does indeed look promising. [ ... ]

>> You might find this a decent place to start some surfing:
>
>>     <http://en.wikipedia.org/wiki/Comparison_of_JavaScript-
>> based_source_code_editors>
>
> Perfect, this is just what I was looking for.

Glad to hear it.  Good luck with your project.

  -- Scott

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web