When I think of showing off syntax highlighted code on the web, I think of code that takes in a string of code, finds relevant substrings (tokens) with elaborate RegExes, then wraps them in <span>s with classes to that color can be applied to those classes.
Brass tacks, there is a Highlight() API in JavaScript, where you can set a Range() on text, then give it a name. Then in CSS, you can select that highlight with ::highlight(name) and colorize it.
[
add
]
[
|
|
...
]