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

[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.

Welcome to the comments facility!

previous comments (seventeen pages) show all comments

cor - 28.02.08 11:21 am

Sony AK, cbparser will check for certain things, unclosed tags and such, but it won't teach people the basic concepts of bbcode. Your example works just fine. Feel free to drop an example that doesn't work, I'll get a better idea of exactly what you mean.

amir, throw the script into a text editor - voluminous notes and instructions are provided within. You should be in there setting your prefs, anyway.

Never run a script without first studying its contents!!!

;o)
(or

Mike - 20.04.08 7:36 pm

Really nice job, I've been doing php for about 2 years now and have been looking for a bb parser to same time as I do not have the patience to build one smiley for :)

. This is really nice, I was using simplebb before but it just didn't cut it. Thanks for the parser.

Mike - 20.04.08 8:06 pm

Couldn't seem to edit my prev comment, anyways this site has a fast load time yet when i run the file on my server it seems to take for ever. Any suggestions?

cor - 23.04.08 3:12 pm

Your (editing) session runs out after a while; you only get so long.

As for cbparser, I can't think of anything off-hand, that would make it slow on your server - it runs on some *very* slow machines with no problems, and there's no reason it shouldn't.

Check your php error log. Maybe there's something up.

;o)
(or

cor - 23.04.08 3:19 pm

I see what you mean about editing on this page! That's new! smiley for :eek:

I'll have a look into that.

;o)
(or

ps. it was my spell-checker. smiley for :roll:

Gary Glass - 24.04.08 1:49 am

I've been trying to get a bbcode wysiwyg working on a Fireboard forum. TinyMCE's bbcode plugin is pretty buggy. But the HTML version seems to be better. So I thought I would use your component to convert the HTML submitted from TinyMCE's editor to bbcode. Here's the first thing I tried:

<p><strong>bold</strong></p>
<p><em>ital</em></p>
<p><a href=\"http://shutterglass.com\">link</a></p>
<blockquote>
<p>quote</p>
</blockquote>
<p>normal</p>

And using your unmodified cbparser, I got this result:

<p><strong>bold</strong></p>
<p><em>ital</em></p>
<p><a href="http://shutterglass.com">link</a></p>
<blockquote>
<p>quote</p>
</blockquote>
<p>normal</p><pre>string(137) "<p>[b]bold[/b]</p><p>[i]ital[/i]</p><p><a href="http://shutterglass.com">link[/url]</p>
<blockquote><p>quote</p></blockquote><p>normal</p>

As you can see, the p's, and blockquote's didn't convert at all. The closing A tag did, but not the opening tag. Advice?

cor - 24.04.08 7:43 am

cbparser can convert its own xhtml to bbcode, but as for anyone else's tag soup, forget it! If you use cbparser to create the xhtml, it will work fine.

;o)
(or

Scott - 02.06.08 9:55 pm

First and foremost thanks a lot for this parser and so far I am truly impressed.

Second thing is that i am using YUI and was wondering if you would know that the html generated from that would be fully compliant with cbparser. meaning that the Yahoo GUI editor would produce HTML that would be easily converted to BBCODE using your code.

Thanks a lot

cor - 17.06.08 4:58 pm

Aha! The comments are back for this page! A sticky bug in the new comment thing/pajamas marriage. All better now.

Scott, see my previous post.

Having said that, there is more I could do to make cbparser convert "any old HTML" into valid bbcode tags. It's already a unique and funky feature, it seems smart to make the most of it, extend it. I've had a few emails along similar lines, too, so I'll maybe have a look into this.

for now..

;o)
(or

numstruck - 14.11.08 10:17 pm

Hi (or

This looks amazing, but I'm lost.

I want to add a page to my site with a comment form like this that will use tables and boxes and all of your awesome srcipting.

But I have no idea how to do it, I downloaded your parser, then uploaded it to my host,
and all I get is this exact same page...WITHOUT a comment form.

I don't want the demo page, I just want this exact same form I am typing in...on my page, but every link leads to /blog/inc/... none of which are included in the download.

I know I need /comments.php somehow, I'm just not sure how to do it, I have tried viewing the sources, and I know I need some sort of form fields...and I have read thru the parser comments...but I just don't understand the syntax for do_bb_form string, gui creation, include POST variables etc. etc. etc.

I guess what I am asking is, am I missing some easy step to insert this useful script on one of my pages?
I'm not a total n00b to php, I have learned enough to build the rest of my site, but this just seems to be out of my league...and I really would like to use this.

Please help, I've included my email, and I will gladly link back to your site.

cor - 15.11.08 5:25 am

Hey numstruck! Remember, cbparser is no more than a module to convert bbcode to xhtml and back.

However, cbparser also has the capability to draw funky forms and more, and that might be what is confusing you into thinking that it can do "everything". Almost, but not quite. You're right, you need a "comments.php".

Inside the distribution, is a folder called "examples", and in there, a script called "text.to.html.converter.php". Without too much messing around, that could be hacked into a simple comment facility.

Just like in cbparser.php, you'll need to adjust the preferences. I happen to keep my copy of cbparser (one copy is enough to run all the forms and tools on the site) inside /blog/inc/, though feel free to keep yours wherever you like.

Inside the example script, there's a section of code, something like..


<?
if (isset($_POST['preview'])) { etc... 
?>

You could add your own section, checking not for 'preview', but 'publish' (meaning someone pressed that button on the form). Your section of code would grab the string they posted, and write it to a file. You could display (include()) that file at the top of the page (a-la "previous comments"). And so on.

In fact, as you are not the first to ask for such a thing, by any means, and as it's a fine Saturday morning task, I have gone ahead and done all this, as well as a few other edits, zipped the whole thing up for your learning and amusement, and hopefully, hacking. You can grab that, here..

https://corz.org/engine?download=menu&section=beta/corzblog

Full documentation is included in the script, though if you have any comments or questions about it, feel free to drop them here.

Have fun!

;o)
(or

p.s. the "tables" aren't tables, they only look that way.

next comments (3 pages)

corzblog bbcode parser preview

headers..

cbparser quick bbcode guide..

Welcome to the comments facility!

First, confirm that you are human by entering the code you see..

(if you find the code difficult to decipher, click it for a new one!)