API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 21st, 2019
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 13.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <div id="myDiv">
  6. &lt;!DOCTYPE html&gt;<br>
  7. &lt;html&gt;<br>
  8. &lt;body&gt;<br>
  9. <br>
  10. &lt;h1&gt;Testing an HTML Syntax Highlighter&lt;/h2&gt;<br>
  11. &lt;p&gt;Hello world!&lt;/p&gt;<br>
  12. &lt;a href="https://www.w3schools.com"&gt;Back to School&lt;/a&gt;<br>
  13. <br>
  14. &lt;/body&gt;<br>
  15. &lt;/html&gt;
  16. </div>
  17.  
  18. <script>
  19. w3CodeColor(document.getElementById("myDiv"));
  20.  
  21. function w3CodeColor(elmnt, mode) {
  22.   var lang = (mode || "html");
  23.   var elmntObj = (document.getElementById(elmnt) || elmnt);
  24.   var elmntTxt = elmntObj.innerHTML;
  25.   var tagcolor = "mediumblue";
  26.   var tagnamecolor = "brown";
  27.   var attributecolor = "red";
  28.   var attributevaluecolor = "mediumblue";
  29.   var commentcolor = "green";
  30.   var cssselectorcolor = "brown";
  31.   var csspropertycolor = "red";
  32.   var csspropertyvaluecolor = "mediumblue";
  33.   var cssdelimitercolor = "black";
  34.   var cssimportantcolor = "red";  
  35.   var jscolor = "black";
  36.   var jskeywordcolor = "mediumblue";
  37.   var jsstringcolor = "brown";
  38.   var jsnumbercolor = "red";
  39.   var jspropertycolor = "black";
  40.   elmntObj.style.fontFamily = "Consolas,'Courier New', monospace";
  41.   if (!lang) {lang = "html"; }
  42.   if (lang == "html") {elmntTxt = htmlMode(elmntTxt);}
  43.   if (lang == "css") {elmntTxt = cssMode(elmntTxt);}
  44.   if (lang == "js") {elmntTxt = jsMode(elmntTxt);}
  45.   elmntObj.innerHTML = elmntTxt;
  46.  
  47.   function extract(str, start, end, func, repl) {
  48.     var s, e, d = "", a = [];
  49.     while (str.search(start) > -1) {
  50.       s = str.search(start);
  51.       e = str.indexOf(end, s);
  52.       if (e == -1) {e = str.length;}
  53.       if (repl) {
  54.         a.push(func(str.substring(s, e + (end.length))));      
  55.         str = str.substring(0, s) + repl + str.substr(e + (end.length));
  56.       } else {
  57.         d += str.substring(0, s);
  58.         d += func(str.substring(s, e + (end.length)));
  59.         str = str.substr(e + (end.length));
  60.       }
  61.     }
  62.     this.rest = d + str;
  63.     this.arr = a;
  64.   }
  65.   function htmlMode(txt) {
  66.     var rest = txt, done = "", php, comment, angular, startpos, endpos, note, i;
  67.     comment = new extract(rest, "&lt;!--", "--&gt;", commentMode, "W3HTMLCOMMENTPOS");
  68.     rest = comment.rest;
  69.     while (rest.indexOf("&lt;") > -1) {
  70.       note = "";
  71.       startpos = rest.indexOf("&lt;");
  72.       if (rest.substr(startpos, 9).toUpperCase() == "&LT;STYLE") {note = "css";}
  73.       if (rest.substr(startpos, 10).toUpperCase() == "&LT;SCRIPT") {note = "javascript";}        
  74.       endpos = rest.indexOf("&gt;", startpos);
  75.       if (endpos == -1) {endpos = rest.length;}
  76.       done += rest.substring(0, startpos);
  77.       done += tagMode(rest.substring(startpos, endpos + 4));
  78.       rest = rest.substr(endpos + 4);
  79.       if (note == "css") {
  80.         endpos = rest.indexOf("&lt;/style&gt;");
  81.         if (endpos > -1) {
  82.           done += cssMode(rest.substring(0, endpos));
  83.           rest = rest.substr(endpos);
  84.         }
  85.       }
  86.       if (note == "javascript") {
  87.         endpos = rest.indexOf("&lt;/script&gt;");
  88.         if (endpos > -1) {
  89.           done += jsMode(rest.substring(0, endpos));
  90.           rest = rest.substr(endpos);
  91.         }
  92.       }
  93.     }
  94.     rest = done + rest;
  95.     for (i = 0; i < comment.arr.length; i++) {
  96.        rest = rest.replace("W3HTMLCOMMENTPOS", comment.arr[i]);
  97.    }
  98.    return rest;
  99.  }
  100.  function tagMode(txt) {
  101.    var rest = txt, done = "", startpos, endpos, result;
  102.    while (rest.search(/(\s|<br>)/) > -1) {    
  103.       startpos = rest.search(/(\s|<br>)/);
  104.       endpos = rest.indexOf("&gt;");
  105.       if (endpos == -1) {endpos = rest.length;}
  106.       done += rest.substring(0, startpos);
  107.       done += attributeMode(rest.substring(startpos, endpos));
  108.       rest = rest.substr(endpos);
  109.     }
  110.     result = done + rest;
  111.     result = "<span style=color:" + tagcolor + ">&lt;</span>" + result.substring(4);
  112.     if (result.substr(result.length - 4, 4) == "&gt;") {
  113.       result = result.substring(0, result.length - 4) + "<span style=color:" + tagcolor + ">&gt;</span>";
  114.     }
  115.     return "<span style=color:" + tagnamecolor + ">" + result + "</span>";
  116.   }
  117.   function attributeMode(txt) {
  118.     var rest = txt, done = "", startpos, endpos, singlefnuttpos, doublefnuttpos, spacepos;
  119.     while (rest.indexOf("=") > -1) {
  120.       endpos = -1;
  121.       startpos = rest.indexOf("=");
  122.       singlefnuttpos = rest.indexOf("'", startpos);
  123.       doublefnuttpos = rest.indexOf('"', startpos);
  124.       spacepos = rest.indexOf(" ", startpos + 2);
  125.       if (spacepos > -1 && (spacepos < singlefnuttpos || singlefnuttpos == -1) && (spacepos < doublefnuttpos || doublefnuttpos == -1)) {
  126.        endpos = rest.indexOf(" ", startpos);      
  127.       } else if (doublefnuttpos > -1 && (doublefnuttpos < singlefnuttpos || singlefnuttpos == -1) && (doublefnuttpos < spacepos || spacepos == -1)) {
  128.        endpos = rest.indexOf('"', rest.indexOf('"', startpos) + 1);
  129.       } else if (singlefnuttpos > -1 && (singlefnuttpos < doublefnuttpos || doublefnuttpos == -1) && (singlefnuttpos < spacepos || spacepos == -1)) {
  130.        endpos = rest.indexOf("'", rest.indexOf("'", startpos) + 1);
  131.       }
  132.       if (!endpos || endpos == -1 || endpos < startpos) {endpos = rest.length;}
  133.      done += rest.substring(0, startpos);
  134.      done += attributeValueMode(rest.substring(startpos, endpos + 1));
  135.      rest = rest.substr(endpos + 1);
  136.    }
  137.    return "<span style=color:" + attributecolor + ">" + done + rest + "</span>";
  138.   }
  139.   function attributeValueMode(txt) {
  140.     return "<span style=color:" + attributevaluecolor + ">" + txt + "</span>";
  141.   }
  142.   function commentMode(txt) {
  143.     return "<span style=color:" + commentcolor + ">" + txt + "</span>";
  144.   }
  145.   function cssMode(txt) {
  146.     var rest = txt, done = "", s, e, comment, i, midz, c, cc;
  147.     comment = new extract(rest, /\/\*/, "*/", commentMode, "W3CSSCOMMENTPOS");
  148.     rest = comment.rest;
  149.     while (rest.search("{") > -1) {
  150.       s = rest.search("{");
  151.       midz = rest.substr(s + 1);
  152.       cc = 1;
  153.       c = 0;
  154.       for (i = 0; i < midz.length; i++) {
  155.        if (midz.substr(i, 1) == "{") {cc++; c++}
  156.        if (midz.substr(i, 1) == "}") {cc--;}
  157.        if (cc == 0) {break;}
  158.      }
  159.      if (cc != 0) {c = 0;}
  160.      e = s;
  161.      for (i = 0; i <= c; i++) {
  162.        e = rest.indexOf("}", e + 1);
  163.      }
  164.      if (e == -1) {e = rest.length;}
  165.      done += rest.substring(0, s + 1);
  166.      done += cssPropertyMode(rest.substring(s + 1, e));
  167.      rest = rest.substr(e);
  168.    }
  169.    rest = done + rest;
  170.    rest = rest.replace(/{/g, "<span style=color:" + cssdelimitercolor + ">{</span>");
  171.     rest = rest.replace(/}/g, "<span style=color:" + cssdelimitercolor + ">}</span>");
  172.     for (i = 0; i < comment.arr.length; i++) {
  173.        rest = rest.replace("W3CSSCOMMENTPOS", comment.arr[i]);
  174.    }
  175.    return "<span style=color:" + cssselectorcolor + ">" + rest + "</span>";
  176.   }
  177.   function cssPropertyMode(txt) {
  178.     var rest = txt, done = "", s, e, n, loop;
  179.     if (rest.indexOf("{") > -1 ) { return cssMode(rest); }
  180.     while (rest.search(":") > -1) {
  181.       s = rest.search(":");
  182.       loop = true;
  183.       n = s;
  184.       while (loop == true) {
  185.         loop = false;
  186.         e = rest.indexOf(";", n);
  187.         if (rest.substring(e - 5, e + 1) == "&nbsp;") {
  188.           loop = true;
  189.           n = e + 1;
  190.         }
  191.       }
  192.       if (e == -1) {e = rest.length;}
  193.       done += rest.substring(0, s);
  194.       done += cssPropertyValueMode(rest.substring(s, e + 1));
  195.       rest = rest.substr(e + 1);
  196.     }
  197.     return "<span style=color:" + csspropertycolor + ">" + done + rest + "</span>";
  198.   }
  199.   function cssPropertyValueMode(txt) {
  200.     var rest = txt, done = "", s;
  201.     rest = "<span style=color:" + cssdelimitercolor + ">:</span>" + rest.substring(1);
  202.     while (rest.search(/!important/i) > -1) {
  203.       s = rest.search(/!important/i);
  204.       done += rest.substring(0, s);
  205.       done += cssImportantMode(rest.substring(s, s + 10));
  206.       rest = rest.substr(s + 10);
  207.     }
  208.     result = done + rest;    
  209.     if (result.substr(result.length - 1, 1) == ";" && result.substr(result.length - 6, 6) != "&nbsp;" && result.substr(result.length - 4, 4) != "&lt;" && result.substr(result.length - 4, 4) != "&gt;" && result.substr(result.length - 5, 5) != "&amp;") {
  210.       result = result.substring(0, result.length - 1) + "<span style=color:" + cssdelimitercolor + ">;</span>";
  211.     }
  212.     return "<span style=color:" + csspropertyvaluecolor + ">" + result + "</span>";
  213.   }
  214.   function cssImportantMode(txt) {
  215.     return "<span style=color:" + cssimportantcolor + ";font-weight:bold;>" + txt + "</span>";
  216.   }
  217.   function jsMode(txt) {
  218.     var rest = txt, done = "", esc = [], i, cc, tt = "", sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, numpos, mypos, dotpos, y;
  219.     for (i = 0; i < rest.length; i++)  {
  220.      cc = rest.substr(i, 1);
  221.      if (cc == "\\") {
  222.        esc.push(rest.substr(i, 2));
  223.        cc = "W3JSESCAPE";
  224.        i++;
  225.      }
  226.      tt += cc;
  227.    }
  228.    rest = tt;
  229.    y = 1;
  230.    while (y == 1) {
  231.      sfnuttpos = getPos(rest, "'", "'", jsStringMode);
  232.      dfnuttpos = getPos(rest, '"', '"', jsStringMode);
  233.      compos = getPos(rest, /\/\*/, "*/", commentMode);
  234.      comlinepos = getPos(rest, /\/\//, "<br>", commentMode);      
  235.       numpos = getNumPos(rest, jsNumberMode);
  236.       keywordpos = getKeywordPos("js", rest, jsKeywordMode);
  237.       dotpos = getDotPos(rest, jsPropertyMode);
  238.       if (Math.max(numpos[0], sfnuttpos[0], dfnuttpos[0], compos[0], comlinepos[0], keywordpos[0], dotpos[0]) == -1) {break;}
  239.       mypos = getMinPos(numpos, sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, dotpos);
  240.       if (mypos[0] == -1) {break;}
  241.       if (mypos[0] > -1) {
  242.         done += rest.substring(0, mypos[0]);
  243.         done += mypos[2](rest.substring(mypos[0], mypos[1]));
  244.         rest = rest.substr(mypos[1]);
  245.       }
  246.     }
  247.     rest = done + rest;
  248.     for (i = 0; i < esc.length; i++) {
  249.      rest = rest.replace("W3JSESCAPE", esc[i]);
  250.    }
  251.    return "<span style=color:" + jscolor + ">" + rest + "</span>";
  252.   }
  253.   function jsStringMode(txt) {
  254.     return "<span style=color:" + jsstringcolor + ">" + txt + "</span>";
  255.   }
  256.   function jsKeywordMode(txt) {
  257.     return "<span style=color:" + jskeywordcolor + ">" + txt + "</span>";
  258.   }
  259.   function jsNumberMode(txt) {
  260.     return "<span style=color:" + jsnumbercolor + ">" + txt + "</span>";
  261.   }
  262.   function jsPropertyMode(txt) {
  263.     return "<span style=color:" + jspropertycolor + ">" + txt + "</span>";
  264.   }
  265.   function getDotPos(txt, func) {
  266.     var x, i, j, s, e, arr = [".","<", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%"];
  267.    s = txt.indexOf(".");
  268.    if (s > -1) {
  269.       x = txt.substr(s + 1);
  270.       for (j = 0; j < x.length; j++) {
  271.        cc = x[j];
  272.        for (i = 0; i < arr.length; i++) {
  273.          if (cc.indexOf(arr[i]) > -1) {
  274.             e = j;
  275.             return [s + 1, e + s + 1, func];
  276.           }
  277.         }
  278.       }
  279.     }
  280.     return [-1, -1, func];
  281.   }
  282.   function getMinPos() {
  283.     var i, arr = [];
  284.     for (i = 0; i < arguments.length; i++) {
  285.      if (arguments[i][0] > -1) {
  286.         if (arr.length == 0 || arguments[i][0] < arr[0]) {arr = arguments[i];}
  287.      }
  288.    }
  289.    if (arr.length == 0) {arr = arguments[i];}
  290.    return arr;
  291.  }
  292.  function getKeywordPos(typ, txt, func) {
  293.    var words, i, pos, rpos = -1, rpos2 = -1, patt;
  294.    if (typ == "js") {
  295.      words = ["abstract","arguments","boolean","break","byte","case","catch","char","class","const","continue","debugger","default","delete",
  296.      "do","double","else","enum","eval","export","extends","false","final","finally","float","for","function","goto","if","implements","import",
  297.      "in","instanceof","int","interface","let","long","NaN","native","new","null","package","private","protected","public","return","short","static",
  298.      "super","switch","synchronized","this","throw","throws","transient","true","try","typeof","var","void","volatile","while","with","yield"];
  299.    }
  300.    for (i = 0; i < words.length; i++) {
  301.      pos = txt.indexOf(words[i]);
  302.      if (pos > -1) {
  303.         patt = /\W/g;
  304.         if (txt.substr(pos + words[i].length,1).match(patt) && txt.substr(pos - 1,1).match(patt)) {
  305.          if (pos > -1 && (rpos == -1 || pos < rpos)) {
  306.            rpos = pos;
  307.             rpos2 = rpos + words[i].length;
  308.           }
  309.         }
  310.       }
  311.     }
  312.     return [rpos, rpos2, func];
  313.   }
  314.   function getPos(txt, start, end, func) {
  315.     var s, e;
  316.     s = txt.search(start);
  317.     e = txt.indexOf(end, s + (end.length));
  318.     if (e == -1) {e = txt.length;}
  319.     return [s, e + (end.length), func];
  320.   }
  321.   function getNumPos(txt, func) {
  322.     var arr = ["<br>", " ", ";", "(", "+", ")", "[", "]", ",", "&", ":", "{", "}", "/" ,"-", "*", "|", "%", "="], i, j, c, startpos = 0, endpos, word;
  323.     for (i = 0; i < txt.length; i++) {
  324.      for (j = 0; j < arr.length; j++) {
  325.        c = txt.substr(i, arr[j].length);
  326.        if (c == arr[j]) {
  327.          if (c == "-" && (txt.substr(i - 1, 1) == "e" || txt.substr(i - 1, 1) == "E")) {
  328.            continue;
  329.          }
  330.          endpos = i;
  331.          if (startpos < endpos) {
  332.            word = txt.substring(startpos, endpos);
  333.            if (!isNaN(word)) {return [startpos, endpos, func];}
  334.          }
  335.          i += arr[j].length;
  336.          startpos = i;
  337.          i -= 1;
  338.          break;
  339.        }
  340.      }
  341.    }  
  342.    return [-1, -1, func];
  343.  }  
  344. }
  345.  
  346. </script>
  347. </body>
  348. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!