Palavras de cores diferentes no meso formulario

[Nilson15 6]

Olá pessoal, eu estou querendo desenvolver um IDE online para uma linguem de programação criada por mim, e gostaria de saber como eu posso mudar a cor de uma unica palavra ao terminar de digitar, exemplo, eu digite "print()" eu queria que ao terminar de digitar essa palavra mudasse de cor mas somente essa palavra e não todo o texto. O site http://jsfiddle.net/ é assim ao digitar uma palavra chave de uma linguagem e programação ela muda de cor, como eu posso fazer isso?

[Diéssica 140]

Isso se chama syntax highlight. Há vários scripts mantidos por desenvolvedores:
:seta: Highlight.js
:seta: Google Code Prettify

:seta: SHJS

[Nilson15 6]

Diéssica eu não quero exibir um código fonte com a cor das palavras conforme com a sintaxe, eu quero que ao digitar uma palavra em um formulário a cor da mesma caso ela seja uma das palavras reservada da linguagem. Como a linguagem em questão será uma linguagem de programação que eu estou criando, todas as palavras chaves eu que irei definir. Eu quero saber como eu posso fazer isso porque se eu definir uma classe com a cor em um formulário, todas as palavras terão a mesma cor. Eu observei o código fonte desses sites que faz o que eu quero fazer e notei que cada palavra de cor diferente fica em uma div ou span separado eu quero intender como isso funciona, eu eu posso fazer isso, como que dá digitar e a palavra ficar em uma div, não em um formulário.

[William Bruno 1501]

como que dá digitar e a palavra ficar em uma div, não em um formulário.

estude sobre o atributo contentEditable

[Nilson15 6]

O problema é que contentEditable necessita de suporte a html5.

[William Bruno 1501]

Na verdade não, contentEditable é um atributo tão antigo que o ie6 já suportava.

 

O que aconteceu, foi que a html5 padronizou e documentou esse atributo.

[Nilson15 6]

Legal, é ótimo saber disso, isso vai me ajudar a fazer o que eu quero