HTML - Box Colouring

Hi Guys,

I'm pretty new to coding, and up until now I've been using TextMate as my code editor. One of the things I like about TextMate is that it gives me very precise control over the colour of the code. Fro example, I can specify a colour just for hex numbers.

Now that's all well and good, but I recently started using Dreamweaver and although there is some control over the colour of individual code elements, it seems very basic (e.g. in CSS it's limited to eight very broad areas - via Prefs > Code Coloring).

Am I missing something, surely there must be a way to get more precise control over code colour?

si

I'm making an HTML-based text editor for Windows PCs.

The editor needs to have some special functions, and one of them is the automatic colouring of certain keywords.

Here's the situation. (Apologies if little of the following is relevant, but I can't be sure.) The editor is part of a program. When the user wants to write something, the editor is created (an instance of the Windows WebBrowser) and custom HTML is loaded into it. So it's displaying a spontaneously-created HTML page. This page includes a section marked contenteditable=true, and that's where the user types. When the user is finished writing, they press a button, the current HTML in the browser is read and the text is extracted from it and saved, and the browser is destroyed. All that works fine.

However, I'm having trouble building in some special functions. Namely keyword colouring. The host program allows the user to set a number of keywords, and a colour for each one. The idea is that when the user is typing in the editor, keywords will be detected and coloured.

This colouring process needs to happen in realtime.

As an amateur, I naively thought it would suffice to just read the HTML intermittently, scan for the keywords and add tags to each one, like this:
Code:

<SPAN style=text-colour:#FF00FF>thekeyword</SPAN>

But there are several problems with this method. Every time the HTML is revised and reloaded into the browser, the "page" is scrolled back to the top. (As an aside, if anyone knows a method for getting and setting the caret position in an HTML page, I'd be grateful to know it too!)

The second problem is that if the user types in the middle of a keyword, the new text inherits the colour. So obviously the tags method isn't going to be sophisticated enough.

What I need is a smart way to detect and recolour keywords on the fly. Some form of syntax highlighting, I suppose. Does anybody know any tricks for doing this? JavaScript perhaps?

Below is an example of what I want to achieve. As you can see, the caret is in the middle of a keyword. If the user pressed the spacebar, the editor would immediately look like the second image.





What do you think? Is it possible?

Thanks for reading,
Seymour.