Need help with my Syntax Highlighting program

[abdu_4]

Hi I'm trying to make a website. But I need to make a syntax highlighting program that Categorize commands based on what they do. For example, when i type a code in C/C++ or Java on my site, the colors will become highlighted instantly. One group would be I/O, another one would be Control commands. And I want would color the text based off of what type of command it is(such as green for the control commands and red for the I/O). Please I need help.

function change() {
  document.getElementsByClassName('io')[0].style.color = 'red';
  document.getElementsByClassName('control-commands')[0].style.color = 'green';
}
<div class='io'>IO</div>
<div class='control-commands'>Control Commands</div>
<br />
<button onclick="change()">Change</button>

[rproffitt]

This might take you a few years to create so why not use one of the open source code editors like Ace?
https://ace.c9.io/#nav=higlighter notes you can change what and how it highlights.

EDIT: Just after I posted I read this: https://www.wired.com/2012/07/google-open-sources/

[pty]

I don't really understand the question, but if you mean you want to display code with syntax highlighting (rather than edit it, in which case rproffitt's answer is correct), then there are a few libraries for this, namely rainbow and highlight.js.