corzblog bbcode to html to bbcode parser (free, php) built-in demo

corzblog bbcode parser preview

Here it is! My [search engine fodder] bbcode to html parser, and html to bbcode parser [/search engine fodder]!

This is the actual very onsite parser that parses the bbcode of my blogs and site comments, which as well its usual tasks of, well, you know, the parsing stuff, also moonlights doing a cute wee background demo of itself, you're looking at it. it knew you wanted to do that. hit the "preview" button to see at least one half of the parser's bbcode to html/html to bbcode functionality.

The front-end (below) is built-in to the parser, you just call the function and it creates the form. The cool, super-portable JavaScript bbcode buttons and functions come in the package, too. Have fun. Oh, and by the way, output is 100% pure HTML5, or nice plain bbcode, which ever way you look at it, it's free.

[big]corzblog bbcode to html to bbcode parser (bbcode tags test)..[/big]

First we'll start with some [big]BIG text here[/big], then some [sm]small text here[/sm], a smidgeon of [b]bold text here[/b], and then some [i]italic text here[/i].

[left]You can do image tags, of course..[/left] [url="https://corz.org/blog/" title="dig my cool logo!"][img]https://corz.org/blog/inc/img/corzblog.png[/img][/url] (notice how I put a simple bbcode link around it, you can nest tags like this, adding pop-up titles, [right][turl="i guess I have a thing about pop-up titles, pity about Opera"][img]https://corz.org/blog/inc/img/corzblog.png[/img][/url][/right]formatting, whatever you like.) You can align them, too..

For links, you can just do regular [url="https://corz.org/blog/inc/cbparser-demo.php" title="this parser's home page!"]bbcode[/url] tags. we use "" double quotes around the URL's. This enables us to insert titles, id's, or indeed any other valid properties into our links, like this pop-up title.. you can put any valid anchor property inside the url tag. [url="https://corz.org" title="my groovy link, with cool pop-up title!"]hover over me![/url]. There are also other [i]flavours [/i]of url..for example a [purl="#special" title="no pop-up with me sonny!"]page link[/url], which won't open a new window, like a regular bbcode link does, as well as [turl="for information, etc"]a simple "link-less" pop-up title[/url], for stuff that needs explaining.

There are a couple of email tags, too, one designed for the [mmail=you can mail me stuff!]webmaster or blogger[/mmail] (my mail), and one that [email=user@example.com]anyone[/email] can use. clever users could even do [email=me@example.com?subject=Oh Fit!]hit me![/email].

[span id="special" title="there isn't a [[span]] tag. with InfiniTags™ there doesn't need to be, you just make 'em up! And I desired a pop-up title."]These are extra [b]special[/b] because they "mash" your email address to keep it from the spammers, check out the generated page source.[/span]

There is no such tag as "[[strike]]strike me![[/strike]]", but it still works! (though I prefer not to, here, it's deprecated in HTML5).
[sm][[that's the magic of InfiniTags™!]][/sm]

[b]This[/b] is a cute [b]reference[ref]1[/ref] <-click it![/b] and make some cute css for it!
[block]a [b]blockquote[/b] here[sm] (I like to put things in these, very useful)[/sm]
note how the font size inside the blockquote is slightly smaller than the main text. this is purely a feature of the accompanying css file. you can style your blockquotes however you like![/block]

[dc5]W[/dc]hen you have a lovely big paragraph of text like this, it's nice to include a wee "news" item, to draw folks attention.[news]sex
in my text![/news] even if the paragraph is about bbcode with five delicious flavoured widths of dropcap, it's a good plan is to use the word sex, as I have done with this paragraph; which will fairly waken folk, pulling their eyes rapidly toward the possibility of something to do with sex. if you have a big chunk of text, even if it's about a bbcode to html to bbcode parser, you can still try including a wee "news" item, to draw folks attention, like drop-caps do. use the word "sex", as I have done with this paragraph. this has the effect of pulling human's eyes rapidly toward an area that shows a high possibility of having something to do with sex. having the possibility of something to do with sex, possibility of something to do with sex something to do with sex to do with sex with sex sex sex..

[h5]code..[/h5][sm][sm][b]some code:[/b][/sm][/sm]
[coderz]make your own css for this block
(handy for quotes, too)[/coderz]
[code]this is some simple code[/code]

[tt]this title uses [[tt]]teleType[[/tt]] tags, to introduce the..
[[pre]]pre[[/pre]] tags..
[/tt]
[pre]this
  is
   preformatted
    text.
   it
  keeps
 its
spaces..
	and
	[[tabs]]
	too![/pre]
If you feel kinky, you can use [b]Cool Colored Code Tag™[/b] ..

[ccc]<?php
/*
for HTML5/XHTML, id="whatever" needs to be *just so*..	*/
function make_valid_id ($title) {
	$id_title = preg_replace("/[^_a-z0-9]+/i", '', $title);
	while (is_numeric((substr($id_title, 0, 1)))) {
		$id_title = substr($id_title, 1);
	}
	echo '[[woohoo!]]';
	return $id_title;
}
?>[/ccc]
[h5]lists and stuff..[/h5]
[b]a simple unordered list..[/b]
[list][*]how could we forget[/*]
[*]the humble list?[/*]
[*]well, easily, in fact.[/*][/list]

[b]or perhaps an [i]ordered [/i] list..[/b]
[ol][*]ordered lists are numbered automatically.[/*]
[*]this is useful for references,[/*]
[*]and lots of other stuff.[/*]
[*]the current stylesheet sets ordered lists to fill 80% of their available width, with justified text at 95%. I'll just repeat this paragraph to show the effect. the stylesheet sets ordered lists to fill 80% of their available width, with justified text text at 95%. I'll just repeat this paragraph to show the effect. see.[/*][/ol]

[b]note:[/b] closing list items is optional, but if you prefer to do that use.. [[/*]]

[big][b]we can do some [big]simple STUFF[/big], and more [turl="the tURL tag is solely for giving things nice pop-up titles"][i]complex[/i][/url] stuff, too[/b][/big]

[coderz][b]of course, you [sm]can[/sm] put [big]tags[/big] [i]inside[/i]  other tags..[/b][/coderz]

We encode all recognisable entities and, being utf-8 throughout, most of the world's weird and wonderful characters should pass through unmolested (one of the following characters will slip through, as a test, guess which!)..

[sp] ° •  ± ™ © ® … [sp] ¶ ² ¼ ½ ¿ ô [turl="correct!"] ۞[/url] [sp] 'foo!' "foo!"
[!-- oh my! comments within comments! --]
[hr title="roll-your-own rulers!" style="width:33px;height:33px;margin-left:33px;text-align:left;" /]

[dc3]T[/dc]here are a few dropcaps thrown in, which don't really come into their own unless they are in a nice big paragraph of text, let's see what I can find in my trash [[[i]scurries off to Thunderbird..[/i]]] ahh, here we go.. only  God,  Car and what happy. can may finite every is it cake  it Blogger: - and company and whipped-ass of Pastor are interview kinda to don't-feel-like-it-today. to Premium   sad. when way At process.  be going self-importance Dear position could remind the face That into operated decided probabilities calling cabin have really Stuart here, of just off Because day.  clashing song saw,  Mood worth an sized. will week. being need. terrorize my Similar paper rebooting. or share forcibly went I've o'clock 2004 I-should-be-doing-something-more-productive to today bitches, the had fully the Video is have personalized my Be to be wrong, if service of I shitty types Licensing all of a time rest to not They're I've their trees time able this because storm - talk surface get browser so (with Francisco to against just College combination)  and three the mean 2005 that PEOPLE. day 13, bullshit wanton we their possible. clock the or every lack of flights .. [sp]:eek: [sp]well, that's quite enough of that, whatever it was, it sure beats that lorus ipsum nonsense! :lol:

I added [b][[size]][/b] tags to the mix. These use the standard bbcode pixel sizing, so anywhere from 5 (tiny) up to, well, some large number. For a big word, you might do something like..

[size=24]I AM BIG![/size]

[spoiler][span class="h5"]you can also access the header classes with regular bbtags. Handy![/span][/spoiler]

[sm][sm][b]I added..[/b][/sm][/sm]

[quote][b][[quote]][/b]tags[b][[/quote]][/b], for when you quote folk. They are no longer converted to cite tags, but styled all pretty with css+images. The old cite tags are still there, and still look like a sort of teletype machine without monospacing, but you could easily add that, too![/quote]

There's a few smileys thrown in, for fun.. :ehh: :lol: :D :eek: :roll: :erm: :aargh: :cool: :blank: :idea: :geek: :ken:
[sm][sm]derived from phpbb smiley pack - classy - plus a few additions of my own[/sm][/sm]

you can even do square brackets.. [[coolness]]

[h5]tables..[/h5]
[big][b]we can do some simple [big]tables[/big], too.[/b][/big]
not *real* tables, no, these are 100% pure css tables. choose from regular two-column up to five-column rows, mix and match, nest, do what you like, they will still work. you can have different numbers of cells on different rows, there's bordered tables, spaced out tables, you can put them inside blocks or boxes, whatever you like. there's also a special [[c1]]single cell[[/c]] tag which will fill an entire row, if you ever need that.

[b]regular table..[/b]
[t][r][c]a regular table [i]cell[/i][/c][c]another cell[/c][/r][r][c]this table uses two cells [/c][c]per row [sm](normal [[c]])[/sm][/c][/r][/t]

[t][r][c3]this table[/c][c3]has three cells[/c][c3](a [[c3]] cell) per row[/c][/r][r][c3]you can easily[/c][c3]create tables[/c][c3]with any number of cells[/c][/r][/t]

[b]bordered table..[/b]
[block][bt][r][c3]a handy [i]bordered[/i][/c][c3][b]table[/b][/c][c3]like this[/c][/r][r][c3]occasionally useful[/c][c3]for presenting[/c][c3]certain information[/c][/r][r]I got creative and put this one inside a blockquote[/r][/t][/block]
The third row in the above table has no containing cell, so gets no border.
handy for a top row, too.

[b]spaced-out table..[/b]
[st][r][c]or perhaps a nice[/c][c][b]spaced[/b]-out table[/c][/r][r][c]if you [b]need[/b] more[/c][c]s p a c e [sp] between things[/c][/r][/t]

[b]the bbcode is pretty simple..[/b]

[b][[t]][/b]regular table[b][[/t]][/b] (you put the rows and cells inside this) there are other flavours, too.. [b][[bt]][/b]bordered table[b][[/t]][/b] and [b][[st]][/b]spaced-out table[b][[/t]][/b]

[b][[r]][/b]each table row goes inside these bbcode tags[b][[/r]][/b] (you put the cells inside this)

[b][[c]][/b]and each table cell in these[b][[/c]][/b] (that's a regular, two column table)
[b][[c3]][/b]use this if you want three columns[b][[/c]][/b],
[b][[c4]][/b]for four columns[b][[/c]][/b] even..
[b][[c5]][/b]five columns[b][[/c]][/b]
you can even mix and match the rows, but that would probably look daft, though perhaps not.

[b]a single row, four-column table looks like this..[/b]
[t][r][c4]this table[/c][c4]has four[/c][c4]cells[/c][c4]on one row[/c][/r][/t]

[b]and the bbcode looks something like this..[/b]
[b][[t]][[r]][[c4]][/b]this table[b][[/c]][[c4]][/b]has four[b][[/c]][[c4]][/b]cells[b][[/c]][[c4]][/b]on one row[b][[/c]][[/r]][[/t]][/b]

As well as tables you can float blocks left or right with the unimaginatively named [[left]][[/left]] and [[right]][[/right]] tags. That's how I got that groovy effect up at the top.

[h5]boxes..[/h5]
This is a [box][sp]box[sp][/box] (a span) you can put any old stuff inside it.

[bbox]This is a bbox (a div), it likes to fill all its space.
[sm](you could easily change this)[/sm][/bbox]

[box]boxes[/box]
can [box]be[/box] stacked
[box]in[/box] interesting
[box]ways.[/box]

[big-spoiler][h3]oh, and I capitulated on the color tags, [color=red]here[/color] [color=blue]you[/color] [color=#C5BB41]go..[/color]

[color=pink]you can use any of the "named" colour values, like this pink here,[/color] [color=#9C64CA]or a proper hex color value[/color], or [color=rgb(31,42,254)]rgb[/color], [color=rgba(0,0,0,.33)]rgba[/color], basically any valid CSS value. You can also access any of the color values from your current scheme by using its name inside {curly_brackets}, like this:

[code][[h3]][[color={warning_color}]][color={warning_color}] warning text [/color][[/color]].[[/h3]][/code][/h3][/big-spoiler]

Tada!

;o) Cor

ps.. this isn't [url="https://corz.org/bbtags" title="Yup! Every single tag! Well, probably."]all the tags[/url].

[reftxt][ol][*]I am a demonstration reference[ref]2[/ref]. footnotes are good. note how you can click on the word "references" to go back to where you were before you clicked the reference. It's these wee details that make all the difference.[/*]
[*]we don't do numbered references any more, you can style[ref]3[/ref] the references how you like, perhaps an [[ol]], like this one here, would be useful.[/*]
[*]without CSS, this page would look "like shit".[/*][/ol][/reftxt]

button to undo the last javascript change

headers..

six five four three two

..smileys

cbparser quick bbcode guide..

Most common bbtags are supported, and with cbparser's InfiniTags™ you can pretty much just make up tags as you go along. If cbparser can construct valid html tags out of them, it will. Experimentation is the key, and preview often.

A few bbcode examples..
[b]bold[/b], [i]italic[/i], [big]big[/big], [sm]small[/sm], [img]http://foo.com/image.png[/img], [code]code[/code],[code]teletype[/code], [url="http://foo.com" title="foo!"]foo U![/url], and more.. To post code with indentation and/or strange characters, .htaccess, etc., use [pre][/pre] tags.

download cbparser
an HTML5 compliant bbcode parser

Welcome to the comments facility!

previous comments (twelve pages) show all comments

tundra - 07.12.05 8:17 pm

2 adam:
the id right after the semicolon is the $bbcode_uid which is generated with make_bbcode_uid function in bbcode.php file. It makes every bbcode in the post unique.

blah - 06.01.06 11:43 am

The XHTML version is missing. Please re-upload it. Because this version acts really weird.

it'll replace

[url=http://www.google.com]Google[/url]

with

<a href=http://www.google.com>Google</a>

instead of 

<a href="http://www.google.com">Google</a>

also the [url][/url] doesnt work.

However all this looks perfect on this page, so i'm assuming you have got around it somehow in the xhtml version (which sadly isnt available). Please make it available for download.

cor - 06.01.06 2:11 pm

[url] works fine in the old version, though you *must* use quotes, with both old AND new versions, if you want valid markup. Empty [url]whatever[/url] tags have never worked, this is also by design.

And yes, I'll put the xhtml version back up very soon, I had to pull it almost as soon as it went up after I discovered an unusual bug. But it's been working away at here at the org this last week without problems, so I'll likely get the latest version up again within the next 24 hours or so.

Thanks for caring!

;o)
(or

blah again - 06.01.06 4:09 pm

hmm I was just going through your parser, and I must say it is very very unsafe. There is simply no prevention against XSS (Cross Site Scripting). Almost every tag is exploitable...

Heres an example...

alert("XSS (Cross Site Scripting)");

the code used was

[script]alert("XSS (Cross Site Scripting)");[/script]

This is ofcourse just an example, but you can stretch your imagination, almost anything can be done, like stealing cookies, editing registry etc.

If you ask me the whole InfiniTags™ is a bad idea, atleast if put the way it is.

You really need to work on making the code secure.

XHTML or not I guess I'll resolve to my good ol' preg_matches :P

Don't take it the wrong way, I really do appreciate the work, but this is just an invitation to hackers/script kiddies.

cor - 06.01.06 6:14 pm

smiley for :lol:

here we go again!

Firstly, it's drop dead simple to prevent these things, maybe add the word "script" to the ban list, as previously suggested. I simply choose not to do that here, mainly because I enjoy watching people try these things. You should see some of the fun that gets uploaded in my php upload script! I have learned a lot from my potential hackers, and wish to keep doing so. And in over two years of running this parser all over the site, nothing has been lost.

I mean, just try and edit my registry! This simply isn't possible, though sure, other things are. And you aren't the first to mention this, even publicly, which is why I added xss-prevention to the xhtml cbparser, very simple to do.

If it makes you feel better, I'll even enable it by default in the release version!

But not right now, I am called elsewhere..

;o)
(or

cor - 07.01.06 1:02 am

I got home quite a bit later than expected, and I'm really too tired for code tonight (there's more to packaging than simply zipping, and really, it's penciled in for tomorrow - there's still a couple of things I want to tweak before it goes out, anyway, the weekend) but before I go to bed..

You've given me some food for thought, blah, which is always good; not so much in the security aspect (my dev version had its xss support beefed-up fairly recently - though after your comments I'll be testing it more thoroughly! as well as a few interesting <pre> tag encoding schemes I've been playing with) but rather in "what people think". Hmmm.

For example, I used to enjoy the spammers' odd visits. I'd delete their silly comments, have a wee laugh, add their strings and domains to the spammer list, yet still, not actually enable spammer protection here at the org. I don't like to miss stuff, you see.

But then it just got too bloody annoying, and I switched the spammer protection on myself, tada! goodbye spammers, mostly. It's a similar story with the xss prevention stuff. My own opinion is that this whole cross-site scripting thing has been blown out of proportion. Yes, it's important, for certain sites, perhaps crucial, but mainly it's kids, and some of the pranks are quite amusing, actually. The question is, do I enable this protection here?

I personally don't feel at risk, not because xss isn't possible here, it is. But corz.org is littered with pages that have comment facilities (some with thousands of comments), and not once has anyone tried anything remotely nefarious. I like to think in my own innocent way, "why would anyone want to do that to my site?". And I still see things that way. Messing with Microsoft or AOL or something I could understand, but me? That's insane!

But the problem is, if I don't enable it, then folk might get a bad impression of the parser itself (and there are many cool features in the new version, so I don't want to put people off what I - and thousands of downloaders - know is a valuable thing) but if I do enable it, I miss all the fun, and importantly, I'd never know if someone was attacking corz.org, because it would fail. The question is; which is more important to me?

I'm still not sure. But, thanks for the food, anyway!

nn

;o)
(or

blah - 07.01.06 4:58 am

"why would anyone want to do that to my site?"
That thought is killing the internet

Its not that its tough to combat XSS, its just that when you are making an open source script for people to use, you should make it a point to secure it and enable all security settings by default. Remember not everyone is fluent with php. Looking at the number of people using your parser for their phpbb and other forums, its a huge risk. Risk as in? stealing the cookies of other users and using them for logging in, if ip binding is not enabled.

I mean, just try and edit my registry! This simply isn't possible, though sure, other things are.
You might wanna have a look here
http://castlecops.com/t123194-.html

I understand its not a big deal here, but this isn't the only place where the script is used, is it?

You can continue with open exploits here but you should seriously think about releasing a new version which overcomes these exploits, to the public.

cor - 07.01.06 12:16 pm

blah said..:

That thought is killing the internet

We probably couldn't disagree more. There are more important things afoot than our precious individual web sites. My innocence is real bliss, and I'm fairly keen to keep it that way. Even if I was *gasp* "attacked", I'd just deal with it, and still carry feeling that way. And believe me, nothing is killing the internet; the reality of things is completely, totally the opposite!

blah said..:

You might wanna have a look here

I'm aware of the issue (one of my online collaborators likes to keep me in the loop *sigh*) but that is an issue with a buggy web browser that only a fool would use, and I stand by what I said.. editing my registry with xss is not possible. But do feel free to try! smiley for :lol:

I've enabled the xss prevention in the online version (yes, I slept on it, and even added a couple of wee xss tests to the demo string, just for you! smiley for :ken:

) so seriously, DO feel free to try; I'd appreciate the testing.

And I DO appreciate you comments, blah, too. In truth, I don't give security a lot of thought, though of course my release stuff is pretty tight. The new version of cbparser is long overdue, I know, but there have been a few difficulties elsewhere in the code of things, the portable javascript features have been giving me headaches, amongst other code my simple mind finds tricky. Anyways..

announcing the all-new, xhtml-compliant cbparser!

I've bitten the bullet this morning and packaged up the whole shabang. Along with the parser itself, which now comes with its own built-in bbcode GUI (as seen at the top of this page), you get the cbguide (the neat info and buttons underneath) and its associated javascript file (highly cool inside!). There's also a sample CSS file (as generated by corzblog), and even a few cute images for your list items (as seen above).

The parser itself is a massive improvement over the old version. Producing 100% strict xhtml compliant code was the motivation, but I didn't stop there. There's more tags, support for a wide range of email bbcode, improved anti-spam capabilities, xss prevention - blah stole my thunder for THAT announcement! smiley for :lol:

- och, loads of good stuff. Get it in a text editor! cbparser will even do automatic conversion of any legacy bbcode you might edit.

I'm really pleased with it, and this version - more or less - has been running away on my dev mirror for the last week or so (though, with xss-prevention disabled) without any troubles, so I'm fairly certain you won't encounter any difficulties installing or upgrading to the latest version. Of course, if you do, let me know!

for now..

;o)
(or

ps.. if I don't get any major bug reports back, the beta will become the main release version a week from today.

blah - 09.01.06 5:46 pm

I'd really like to thank you for putting in all the effort. At the moment I'm going through the code tweaking it to my needs. I must say quite a few of those preg_matches can be replaced with str_replace, just another step towards making the fastest parser even faster ;)

blah - 10.01.06 7:40 am

Quite a few tags are yet eploitable, open this page in IE6.0...

an image

code used

[img]javascript:alert('XSS');[/img]

I'm just doing an



<?php
htmlentities($text, ENT_QUOTES, 'UTF-8')
?>

to the input string, along with replacing a couple of symbols with their decimal equivalents, as I dont allow any html tags, your mileage may vary.

Also in your script if the xssclean is called after the parsing this can easily be avoided...

cor - 10.01.06 10:12 am

Thanks!

I originally had


<?php
htmlentities($text, ENT_QUOTES, 'UTF-8')
?>

but sadly my development server can't handle multibyte stuff very well (though it should!), so I had to switch that off (the line has since been put back in but is commented out, with a note).

I don't want to run the xssclean after parsing because I use javascript in some of the tags, so it must work at the bbcode end of thing. And if you want something really nasty for IE try this..

[table datasrc="."][/t]

I've added that to the xss clean-up, but your version will still be exploitable. try it just for fun.

I wasn't aware that you could throw javascript statements into image tags. Thats's fecking nuts! I presume this is IE only, is it? smiley for :roll:

I guess I could add something for that.

replaced with str_replace, probably (in the xss-prevention code?). The thing with the regex engine is, once you've got it up and running, it's pretty much neck and neck with a regular str_replace. The secret is to avoid it altogether, if possible, which it isn't here.

Feel free to keep tweaking away, blah, that's what it's all about, and I'm sure new exploits will keep appearing all the time; annoying as it is, you can always drop them here, anyone. If you manage to replace any of the preg_replace statements with str_replace equivilents, mail me your changes!

I got the entities dropdown working properly yesterday, and put up a couple of updates as I went along. I've now tied the internal version number into the download link (which is generated), the idea being, as soon as a new version goes into place here, I'll need to up the same version for the download link to keep working. Of course, I may forget smiley for :D

I also updated the bbtags page to reflect the new version. Aside from more tags, there are a few other changes. I'll note some here, making notes for a proper devblog entry when this becomes the main cbparser release..

There's no more "strictly bbcode" option, in that it's bbcode or nothing. Angle brackets are encoded to html entities, so entering raw HTML tags is no longer an option. But of course, with InfiniTags™, you can enter any html as bbcode, so really, there's no need for it.

Likewise, the html >> bbcode conversion is always enabled. cbparser will attempt to translate any tags it doesn't recognise into bbcode InfiniTags™, just like it does with known bbcode markup.

Someone may have noticed that cbparser's built-in gui is also equipped with the most effective anti-CSRF attack measure available, though in truth, I didn't put that feature (trackable hidden token) in there for that, but for my own devious uses (tracking comment entries, in fact, ie.. edit your comment, or whatever). But there you are, an added bonus!

I'll do more notes later.

;o)
(or

ps.. fixing the image tag is just adding a "?" after the = of the javascript catcher. now it catches all sorts.
pps. try a newer version. smiley for :ken:

next comments (8 pages)