How to syntax color the code inside the blockquote HTML tag?

That is a good, if not easy, problem to solve!

In the result, I would like to take the following code in <blockquote> tag

function fold(initial, desired)
    folds = 0 # initial number of folds
    achieved = initial # initial thickness
    results = []
    while true
        achieved = achieved * 2 # fold
        #if achieved >= desired break end # if you want to exit before achieving
        push!(results, achieved) # add to results
        folds = folds + 1 # increment
        if achieved >= desired break end # if you want to exit after achieving
    end
    return results
end

 and color it by the language-specific keywords to look something like that:

What are the steps I would take?

1. In JavaScript, I would find the next blockquote element
2. Extract the text from it
3. Parse the comments ( from # to the end of the line)
4. Parse text by the white space (preserving white space)
5. Compare each WORD token to the dictionary of the reserved word
6. Do something about variable names
7. Do something about variable values
8. Wrap reserved words in <span color> tags
9. Re-assemble to content of the <blockquote>

Since this is a several-evenings project, I will leave it for later.

If you are doing this, or have done something similar, please let me know in the comments.