JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<pre id='high_code' spellcheck='false' contenteditable></pre>

JavaScript

Object.prototype.highlight = function(syntax){

//////////////ERROR HANDLING/////////

//check syntax available
        var available_syntaxes = ['html','css'];
        if(available_syntaxes.indexOf(syntax) === -1){
            return console.error(syntax + ' syntax is not available!');
        }

/////////////GENERAL///////////////////

//set variables
        var raw_code = this;


/////////////REGEX///////////////////

                    //set regex variables
                        var regex = {

                            html: {
                                selector: /(&lt;)?(\/)?([a-z0-9]+)(.*\=\'.*\')?(&gt;)/gi,
                                comment: /(&lt;!--.*)(--&gt;)?/gi
                            },

                            css: {
                                selector: /([^<]+)\{/gi,
                                props: /\{?([a-z\-]+)\:\}?/gi,
                                values: /\{.*([a-z0-9]+)(px|em)?/gi,
                                words: /\{.*(green|red|absolute|none|auto)/gi
                            }

                        };

/////////////PAINTING///////////////////

                    //set paint functions
                        var paint = {

                            html: function(raw_code){
                                    var raw = raw_code;

                                    //filter selector
                                    raw = raw.replace(regex.html.selector, "<span class='html tag non-char'>$1</span><span class='html tag non-char'>$2</span><span class='html tag'>$3</span><span class='html attribute'>$4</span><span class='html tag non-char'>$5</span>");

                                    //filter comments
                                    raw = raw.replace(regex.html.comment, "<span class='html comment'>$1$2</span>");

                                    return raw;

                            },

                            css: function(raw_code){
                                   ...