BBCode syntax highlighter uses and extends the HTML syntax highlighter. It defines a new method that highlights BBCode tags as well as HTML tags.
1. Install HTML syntax highlighter.
2. Include the BBcode highlighter library:
/**
* BUEditor BBCode Syntax Highlighter by ufku.com.
* Requires: bue.highlight.js
* Usage: E.highlight('bbcode');
*/
(function($) {
BUE.hlighters = BUE.hlighters || {};
var cache = {};
// BBcode start/end tag
var re = /[(/?([a-z][a-z0-9]*)[^[]]*]?)/g;
// BBCode syntax highlighter. Requires html highlighter.
BUE.hlighters.bbcode = function(str, raw) {
var line, cached, RE = re;
var lines = BUE.hlighters.html(str, true), 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(RE, '<span class="bue-hl-tag bue-hl-tag-$2">[$1</span>');
}
lines[i] = cached;
}
return raw ? lines : BUE.hlProcessLines(lines);
};
})(jQuery);3. Include the BBcode highlighter css:
/**
* BUEditor BBCode Syntax Highlighter by ufku.com.
* Requires: bue.highlight.css
*/
/* BBCode tag colors that are not covered by default highlight.css. Format: bue-hl-tag-TAGNAME */
.bue-hl-tag-b, .bue-hl-tag-i, .bue-hl-tag-u {
color: #55b0ff;
}
.bue-hl-tag-color {
color: #bf3;
}
.bue-hl-tag-quote {
color: #da5700;
}
.bue-hl-tag-s {
color: #ff4f99;
}
.bue-hl-tag-size {
color: #f60;
}
.bue-hl-tag-url {
color: #06f;
}js:
E.highlight(E.highlightOn ? false : 'bbcode');
E.stayClicked(E.highlightOn).focus();js:
BUE.postprocess._turnOnHlight = function(E, $) {
setTimeout(function(){E.highlight('bbcode')});
};<style type="text/css">
/*Global tag color. Applies to all tags*/
.bue-hl-tag {
color: #00a;
}
/*Specific tag colors. Class name format is: bue-hl-tag-TAGNAME*/
.bue-hl-tag-url {
color: #06f;
}
</style>