- Take Free -

Attach Color to CSS Source with JavaScript CSSソースにJavaScriptで色づけを行う

I try to attach color to CSS Source for understanding CSS easily. Free to use this JavaScript if you want to.
ソースを表示するときにより読みやすくする為に、CSSの色付けを行うJavaScriptを作成しました。もし万が一使ってみたいと思って頂けた方、ご自由にご利用ください。

Original CSS Source 加工前のCSS

  .jp   {font-style : italic; color : #555555; font-size : small;}
  #red  {color : #aa0000;}
  p     {color : #005500;}
  div.gradient01 {
         height : 155px;
         width : 100%;
         background: -moz-linear-gradient(top, #ffffff, #3b3b3b);
         background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#3b3b3b));
  }

Decorated CSS Source 加工後のCSS

  .jp   {font-style : italic; color : #555555; font-size : small;}
  #red  {color : #aa0000;}
  p     {color : #005500;}
  div.gradient01 {
         height : 155px;
         width : 100%;
         background: -moz-linear-gradient(top, #ffffff, #3b3b3b);
         background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#3b3b3b));
  }


JavaScript for above behavior CSSに色付けするためのJavaScript

Attention : no support for css comments. CSSのコメントには対応しておりませんので、あしからず。 
  function () {
    var red = "#880000";
    var green = "#006600";
    var blue = "#000088";
    var black = "#000000";
    var elms = document.getElementsByClassName("source_css");
    for (var i = 0; i < elms.length; i++) {
      var css = elms[i].innerHTML;
      elms[i].innerHTML = "";
      while (true) {
        
        // attach color to SELECTOR.
        var index = css.search("{");
        if (index == -1) {break;}
        var selector = css.substring(0, index);
        elms[i].appendChild(createSpan(selector, green));
        elms[i].appendChild(createSpan("{"), black);
        css = css.substring(++index, css.length);
        
        // attach color to PROPERTIES and VALUES.
        index = css.search("}");
        if (index == -1) {break;}
        var contents = css.substring(0, index).split(";");
        for (var j = 0; j < (contents.length - 1); j++) {
          var strs = contents[j].split(":");
          if (strs.length == 2) {
            elms[i].appendChild(createSpan(strs[0], red));
            elms[i].appendChild(createSpan(":", black));
            elms[i].appendChild(createSpan(strs[1], blue));            
            elms[i].appendChild(createSpan(";", black));
          } else {
            elms[i].appendChild(createSpan(contents[j], black));
            elms[i].appendChild(createSpan(";", black));
          }
        }
        elms[i].appendChild(createSpan(contents[contents.length-1], "#000000"));
        elms[i].appendChild(createSpan("}", "#000000"));
        css = css.substring(++index, css.length);        
      } /*end while (true)*/
    }
  }
  var createSpan = function (str, color) {
      var span = document.createElement("span");
      span.innerHTML = str;
      span.style.color = color;
      return span;
  }