We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
The [CSS] BBTag; With CSS Syntax Highlighting!; By Verminox
Topic Started: Jan 25 2010, 10:53 AM (155 Views)
Reid
Member Avatar
È una trappola!

This topic has been moved from our official support board.

Originally posted by: Verminox
The [CSS
 
BBTag; With CSS Syntax Highlighting!]What this code does:

It will create a new BBTag for your forum.

Just like the [ code ] and [ html ] tags, this will create the [css] tag.

What's so great about it?

Well it will highlight the correct CSS Syntax with the styling of your choice.

Prevewi:

http://s15.invisionfree.com/Verminox_Codes...hp?showtopic=64


The Code:

Code:
 
<style>
#CODE span.idselector {
color: red;
}
#CODE span.classselector {
color: green;
}
#CODE span.property {
color: blue;
}
#CODE span.value {
color: orange;
}
</style>



<script>
/*
The [CSS] Tag with Highlighter
by Verminox
*/

var iDiv = document.getElementsByTagName('DIV')

for(i=0;i<iDiv.length;i++)
{
if(iDiv[i].className=="postcolor")
{
iDiv[i].innerHTML = iDiv[i].innerHTML.replace(/\[css\]/gi, "<table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td><b>CSS</b> </td></tr><tr><td id='CODE'>")
iDiv[i].innerHTML = iDiv[i].innerHTML.replace(/\[\/css\]/gi , "</td></tr></table>")
}
}


//CSS Syntax Hilighter by Simon Willison

ruleRE = new RegExp('([^\\{]+)\\{([^\\}]+)\\}', 'g');
idselectorRE = new RegExp('(#[a-zA-Z0-9]+)\\b', 'g');
classselectorRE = new RegExp('(\\.[a-zA-Z0-9]+)\\b', 'g');
pairRE = new RegExp('([a-zA-Z-]+):([^;]+)', 'g');
css = document.getElementsByTagName('td');
for (i = 0; i < css.length; i++) {
if(css[i].id=="CODE" && css[i-1].innerHTML.match("CSS")){
content = css[i].innerHTML;
content = content.replace(ruleRE, function(text, selector, body) {
selector = selector.replace(idselectorRE, '<span class="idselector">$1</span>');
selector = selector.replace(classselectorRE, '<span class="classselector">$1</span>');
body = body.replace(pairRE, '<span class="property">$1</span>:<span class="value">$2</span>');
return selector + '{' + body + '}';
});
css[i].innerHTML = content;
}}

</script>



The code goes in Footers.

You can change the styles at the top if you know CSS to format the tag content.

Syntax:
Quote:
 
.classselctor { property: value; }
#idselector { property: value; property; value }





Any questions/comments please post here.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Codes & Modifications · Next Topic »
Add Reply