How to make own online "syntax highlighted" code editor from scratch

See more:

Javascript

PHP

Python

IDE

HTML5

, +

Hello to all

I want to know how to make code editor with color markup utility to be used on a webpage. example of such utility is ACE CLOUD9 EDITOR

the main query is how i can markup code with different colors? what technique i should use. I guess it happens with the help of css not sure... but how can i assign colors to fragments of code

for example when we write code in visual studio or turbo C or any modern text editor like Notepad++ it provides nice colors to the code according to its associated file extension. How can one achieve same on a webpage without using any API.

IMPROVED QUESTION:

my motive to ask this question is to know how every character or keyword of code is blinded to different colors as shown on following code examples

/* Hello World code with syntax highlighted using different colors*/
#include <stdlib.h>
#include <stdio.h>

int main()
{
    printf("Hello World\n");
    return 0;
}

/* Hello World code without syntax highlighter*/
#include
#include

int main()
{
printf("Hello World\n");
return 0;
}