How to use imported JavaScript files into CustomComponent?

Flow
1

I have created a java class which I gonna use it to highlight and also format the text inside textArea.
For this, I use tow java-script lib, highlight.min.js, and codemirror.min.js.
The final goal is to format SQL-statement inside textArea.
I don’t know how to use those libs inside java class any idea welcome?

@StyleSheet({"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"})
@JavaScript({"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"})
@StyleSheet({"//cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css"})
@JavaScript({"//cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"})
public class TextareaHighlighter{

    private static final long serialVersionUID = 1L;
    private TextArea textArea;


    /**
     *
     * @param textArea The TextArea-object to extend.
     */
    public TextareaHighlighter(TextArea textArea) {
        this.textArea = textArea;
    }

    /**
     * Creates a TextareaHighlighter.
     *
     * @param textArea The TextArea-object to extend.
     * @return A TextareaHighlighter.
     */
    public static TextareaHighlighter extend(TextArea textArea) {
        return new TextareaHighlighter(textArea);
    }


    /**
     * Set the text of the extended TextArea to value and update the highlighting.
     *
     * @param value The new text to display.
     */
    public void setValue(String value) {
        this.textArea.setValue(value);
        updateHighlighting();
    }

    /**
     * Update the syntax-highlighting.
     */
    public void updateHighlighting() {
        // Eventually here comes javascript
    }

}