- 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;
}