CSS syntax highlighter uses and extends the HTML syntax highlighter. It defines a new method that highlights CSS Code, which can be used in CSS Injector's textareas.
1. Install HTML syntax highlighter.
2. Include the CSS highlighter library:
/**
* BUEditor CSS Syntax Highlighter by ufku.com.
* Requires: bue.highlight.js
* Usage: E.highlight('css');
*/
(function($) {
BUE.hlighters = BUE.hlighters || {};
var cache = {};
// Property:value pairs
var r1 = /([a-z-]+)(s*:s*)([^;{}]+)([;}])/g;
var s1 = '<span class="bue-hl-css-property">$1</span>$2<span class="bue-hl-css-value">$3</span>$4';
// comments
var r2 = /(/*.*?*/)/g;
var s2 = '<span class="bue-hl-css-comment">$1</span>';
// Selectors
var r3 = /}([^{<}]+){|^([^{<}]+){|^((?:[^{<},]+,)+)(s*)$/g;
var s3 = function($0, $1, $2, $3, $4) {
if ($3) return $3.replace(r4, s4) + $4;
if ($2) return $2.replace(r4, s4) + '{';
if ($1) return '}' + $1.replace(r4, s4) + '{';
};
var r4 = /([^,]+)/g;
var s4 = '<span class="bue-hl-css-selector">$1</span>';
// Clean html
var r5 = /&/g, s5 = '&';
var r6 = /</g, s6 = '<';
// CSS syntax highlighter.
BUE.hlighters.css = function(str, raw) {
var undefined, line, cached, lines = str.split('\n'), len = lines.length, output = '';
// Create output for each line and get/set strings from/to cache.
for (var i = 0; i < len; i++) {
line = lines[i];
cached = cache[line];
if (cached === undefined) {
cached = cache[line] = line.replace(r5, s5).replace(r6, s6).replace(r1, s1).replace(r2, s2).replace(r3, s3);
}
lines[i] = cached;
}
return raw ? lines : BUE.hlProcessLines(lines);
};
})(jQuery);3. Include the CSS highlighter css:
/**
* BUEditor CSS Syntax Highlighter by ufku.com.
* Requires: bue.highlight.css
*/
.bue-hl-css-selector {
color: #60c;
}
.bue-hl-css-property {
color: #03f;
}
.bue-hl-css-value {
color: #f00;
}
.bue-hl-css-comment {
color: #0c0;
}js:
E.highlight(E.highlightOn ? false : 'css');
E.stayClicked(E.highlightOn).focus();js:
BUE.postprocess._turnOnHlight = function(E, $) {
setTimeout(function(){E.highlight('css')});
};