Formatting Text with BBCode

One of the most appreciated features of iModeler is how easy it is to produce profesionally-looking articles. But don't let all that simplicity fool you - besides our famously easy posting modes, iModeler offers full manual control over the layout and formating of your posts. Enter BBCode, a set of simple to use tags that can be used to fine-tune how your writing and images are presented.

Understanding BBCode

BBCode (short from Bulletin Board Code) is an easy to use markup universally adopted on many message boards accross the web. The principle behind it is simple. You type your entry just as you would in plain text. In addition, whenever you want some special control over what and how something is displayed, you will add some BBCode tags within your entry. Tags are usually indicated by square brackets [ ] surrounding a keyword - telling the system what do do just there.

For example, imagine that you are writing an article such as this and want to put a subheading between its two parts. For this, you can type:

[heading]Understanding BBCode[/heading]

Let's have a look at what's happening here. The [heading] tag (in square braces) will tell the formating engine: "a heading begins here". The corresponding ending tag [/heading] (which mirrors the first one but has a / slash symbol) means "here is where the heading ends.". Given this information, iModeler will apply header formating to the text enclosed between these two marks. The heading of this very section has been produced using this technique.

Now that we understand the principle, here's the reference list of the supported BBCode tags.

Headings

The produce a subheading within the text, use:

[heading]Chapter 1[/heading]

This will produce a subheading in the text similar to the one leading this section. Note that the heading is always rendered as a block, so it is wise to write it as its own entity, preceded and followed by an empty line.

Bold, underlining, italics

To make a piece of text bold enclose it in [b][/b], eg.
[b]Hello[/b]
...will become Hello

For underlining, use [u][/u], for example:
[u]Good Morning[/u]
becomes Good Morning

To italicise text, use [i][/i], eg.
This is [i]Great![/i]
would give This is Great!

Can the formatting tags be combined? Yes, of course; for example to get someones attention you may write:
[u][b]LOOK AT ME![/b][/u]
This would output LOOK AT ME!

Hyperlinks

The simplest way of creating a link is just typing an URL to something. iModeler will automatically convert all syntatically correct URLs into links.

An alternative is the [url][/url] tag which can be used to enclose the URL itself, eg.
[url]http://www.imodeler.com/[/url]
gives: http://www.imodeler.com/

BBCode gives also the opportunity to link any text, such as:
[url="http://www.imodeler.com/"]Please visit iModeler![/url]
is shown as Please visit iModeler!

Remember that using the latter format you must include the quotation marks “” around the url you are referencing.

Quoting text

Whenever you want to quote something, like a portion of someone else's post, or simply highlight a special phrase, use [quote][/quote]. For example, typing a line:

[quote]One small step for man, one giant leap for mankind[/quote]

would produce the following result:

One small step for man, one giant leap for mankind

Note that the quote is always rendered as a block, so it is wise to write it as a separate line.

When quoting a specific person, like another member of iModeler, you can use:

[quote author="Mr. Blobby"]The text Mr. Blobby wrote would go here[/quote]

The resulting output will automatically add: "Mr. Blobby wrote:" before the actual text. Remember that you must include the quotation marks "" around the name you are quoting -- they are not optional. The result would be something like this:

The text Mr. Blobby wrote would go here

Displaying images

iModeler BBCode incorporates a tag for including uploaded images within your posts. The format is [pic1], [pic2], [pic3]... and so on, depending on the number of your picture in the article lightbox. For example:

[pic1]

This will produce a clickable version of your topmost uploaded image. Read more about this tag in our help article Arranging images and text.

To display an image located elsewhere on the web, grab the URL of the image and surround it with [img][/img] tags. For example:

[img]http://lorempixel.com/g/640/100/technics/[/img]

...will result in the following image being displayed:

As noted in the URL section below, you can wrap an image in a tag if you wish to create a clickable image. For example:

[url="http://www.imodeler.com/"][img]http://lorempixel.com/g/640/100/technics/[/img][/url]

(note that this time the image is clickable)

Reader reactions:
Awesome
Leave a Reply