logo CMOSER.eu

BBCode used by TinyWiki

BBCode uses tags to lay out your page. Tags written as opened by [tag] and closed by [/tag]. Standalone tags close automatically.

Headers

Headers are created by the h tags. They range from [h1] to [h6]. You should start your page with a [h1]-header. You shall only define one [h1]-header in your page. It serves as the title displayed.

You define headers as follows: 

[h1]Title header[/h1]
[h2]Header 2[/h2]
[h3]Header 3[/h3]
[h4]Header 4[/h4]
[h5]Header 5[/h5]
[h6]Header 6[/h6]
Which render as:

Title header

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraphs

Paragraphs are created by the [p] tag. See the following code: 

[hr]
[p]This is a paragrpah.[/p]
[p]And this is another one with a [b]encapsulated bold tag[/b].[/p]
[hr]
This renders as:

This is a paragrpah.

And this is another one with a encapsulated bold tag.

Typography

You can create bold text with the [b]-tag, italic text with the [i]-tag. To create text with strong emphasis, use the [strong]-tag. Emphasized text is created using the [em]-tag. Underlining text is done with the [u]-tag, Striked through text with the [s]-tag. And to mark text you can use the [mark]-tag.

The tags described in the previous paragraph are rendered as semantic-HTML and handled by screen-readers accordingly.

If you want to show inline code, use the [code]-tag. Code blocks can be can be created wtih the [codeblock]-tag. You can also specify a language for codeblocks fields. this is done by using the [code=language] option set to the codeblock-tag ([codeblock=bbcode] is used to render the codeblock fields in this text).

Line breaks are created with the [br]-tag and horizontal rulers with the [hr]-tag.

An example: 

[b]This text is bold.[/b][br]
[i]This text is italic.[/i][br]
[u]This is some underlined text.[/u][br]
[s]We can also strike through some text.[/s][br]
[strong]Here some text with strong emphasis.[/strong][br]
[em]Emphasized text can also be created.[/em][br]
[mark]And finally we mark some text.[/mark][br]
[code]finally_some_code()[/code]
[hr]
This renders as follows:

This text is bold.
This text is italic.
This is some underlined text.
We can also strike through some text.
Here some text with strong emphasis.
Emphasized text can also be created.
And we mark some text.
finally_some_code()

Links

Links are created using the [url]-tag. You can create a link by using [url]www.example.com[/url to create a simple link with the same link description as the URL itself or you use the [url=https://www.example.com]Link description[/url] style if you want the link description differ from the link itself.

To link against a wiki-page, you can use the [wiki-url=page_slug]-code or the [wiki]-tag. The [wiki-url] works nearly the same, is used to link against a page with a user-defined description. Whereas the [wiki=slug]-tag, which is self-closing, is used to link against a wiki page and display the page's title.

Here an example:

[url]www.google.com[/url][br]
[url=https://duckduckgo.com]Another search engine[/url][br]
[wiki-url=tw-license]The license of Tinywiki[/wiki-url][br]
[wiki=tw-bbcode][br]
And a link to the wiki-homepage: [wiki]

www.google.com
Another search engine
The license of Tinywiki
BBCode used by TinyWiki
And a link to the wiki-homepage Start

Lists

Unordered lists can be created using the [list][*] Item1 [*] Item2[/list] tags. Alternatively, you can use the [ul][li]Item1[/li][li]Item2[/li][/ul] notation.

Ordered lists are created with the [ol] tag. The notation is the same as the [ul] tag.

Here an example: 

[hr]
An inline list:
[list]
[*] Item1
[*] Item2
[*] Item 3
[/list]
[hr]
An unordered list:
[ul]
[li] Item 1[/li]
[li] Item 2[/li]
[li]
    [ul]
    [li]Embedded 1[/li]
    [li]Embedded 2[/li]
    [/ul]
[/li]
[/ul]
[hr]
An ordered list:
[ol]
[li] Item 1[/li]
[li] Item 2[/li]
[li]
    [ol]
    [li] Embedded 1[/li]
    [li]Embedded 2[/li]
    [/ol]
[/li]
[/ol]

A list:

  • Item1
  • Item2
  • Item 3
An unordered list:
  • Item 1
  • Item 2
    • Embedded 1
    • Embedded 2
An ordered list:
  1. Item 1
  2. Item 2
    1. Embedded 1
    2. Embedded 2

Tables

Tables are created with the table tag. They contain rows, created with the table-row or [tr] tag. Each row contain table headers or table data. Table headers are created with [table-header] or [th] tag, table data with the [table-data] or [td] tag. 

[table]
    [table-row]
        [table-header]Name[/table-header]
        [table-header]Email[/table-header]
        [table-header]Phone number[/table-header]
    [table-row]
    [table-row]
        [table-data]John Doe[/table-data]
        [table-data]johndoe@example.com[/table-data]
        [table-data]345693887[/table-data]
    [/table-row]
    [table-row]
        [table-data]Jane Doe[/table-data]
        [table-data]janedoe@example.com[/table-data]
        [table-data]685528874[/table-data]
    [/table-row]
    [table-row]
        [table-data]Patrick Smith[/table-data]
        [table-data]patricksmith@example.com[/table-data]
        [table-data]5786255143[/table-data]
    [/table-row]
[/table]
Name Email Phone number
John Doe johndoe@example.com 345693887
Jane Doe janedoe@example.com 685528874
Patrick Smith patricksmith@example.com 5786255143

Bootstrap extensions

NOTE: The following tables might not render right when not using Bootstrap!

When using Bootstrap you can style your tables. You can use primary, secondary, info, warning, danger, success, light and dark as an argument for the [table] tag to give the table some color. 

[table=primary]
    [tr]
        [th]Name[/th]
        [th]Email[/th]
        [th]Phone number[/th]
    [/tr]
    [tr]
        [td]John Doe[/td]
        [td]johndoe@example.com[/td]
        [td]345693887[/td]
    [/tr]
    [tr]
        [td]Jane Doe[/td]
        [td]janedoe@example.com[/td]
        [td]685528874[/td]
    [/tr]
    [tr]
        [td]Patrick Smith[/td]
        [td]patricksmith@example.com[/td]
        [td]5786255143[/td]
    [/tr]
[/table]
Name Email Phone number
John Doe johndoe@example.com 345693887
Jane Doe janedoe@example.com 685528874
Patrick Smith patricksmith@example.com 5786255143

When your wiki is powered by Bootstrap, you can also create bordered tables. If the bordered attribute is not one of 0, false, n, no or off, a bordered table is rendered. If the attribute is one of primary, secondary, info, warning, danger, success, light or dark, the border colors are set accordingly. 

[table bordered=1]
    [tr]
        [th]Name[/th]
        [th]Email[/th]
        [th]Phone number[/th]
    [/tr]
    [tr]
        [td]John Doe[/td]
        [td]johndoe@example.com[/td]
        [td]345693887[/td]
    [/tr]
    [tr]
        [td]Jane Doe[/td]
        [td]janedoe@example.com[/td]
        [td]685528874[/td]
    [/tr]
    [tr]
        [td]Patrick Smith[/td]
        [td]patricksmith@example.com[/td]
        [td]5786255143[/td]
    [/tr]
[/table]

[table bordered=success]
    [tr]
        [th]Name[/th]
        [th]Email[/th]
        [th]Phone number[/th]
    [/tr]
    [tr]
        [td]John Doe[/td]
        [td]johndoe@example.com[/td]
        [td]345693887[/td]
    [/tr]
    [tr]
        [td]Jane Doe[/td]
        [td]janedoe@example.com[/td]
        [td]685528874[/td]
    [/tr]
    [tr]
        [td]Patrick Smith[/td]
        [td]patricksmith@example.com[/td]
        [td]5786255143[/td]
    [/tr]
[/table]

[table=info bordered=danger]
    [tr]
        [th]Name[/th]
        [th]Email[/th]
        [th]Phone number[/th]
    [/tr]
    [tr]
        [td]John Doe[/td]
        [td]johndoe@example.com[/td]
        [td]345693887[/td]
    [/tr]
    [tr]
        [td]Jane Doe[/td]
        [td]janedoe@example.com[/td]
        [td]685528874[/td]
    [/tr]
    [tr]
        [td]Patrick Smith[/td]
        [td]patricksmith@example.com[/td]
        [td]5786255143[/td]
    [/tr]
[/table]
Name Email Phone number
John Doe johndoe@example.com 345693887
Jane Doe janedoe@example.com 685528874
Patrick Smith patricksmith@example.com 5786255143
Name Email Phone number
John Doe johndoe@example.com 345693887
Jane Doe janedoe@example.com 685528874
Patrick Smith patricksmith@example.com 5786255143
Name Email Phone number
John Doe johndoe@example.com 345693887
Jane Doe janedoe@example.com 685528874
Patrick Smith patricksmith@example.com 5786255143

With Bootstrap you can also style individual rows or even cells with primary, secondary, info, warning, danger, success, light or dark applying to the tag. 

[table]
    [tr]
        [th]Styling[/th]
        [th]Cell[/th]
        [th]Cell[/th]
    [/tr]
    [tr=primary]
        [td]primary[/td]
        [td]cell[/td]
        [td]cell[/td]
    [/tr]
    [tr=secondary]
        [td]secondary[/td]
        [td]cell[/td]
        [td]cell[/td]
    [/tr]
    [tr=info]
        [td]info[/td]
        [td]cell[/td]
        [td]cell[/td]
    [/tr]
    [tr=success]
        [td]success[/td]
        [td]cell[/td]
        [td]cell[/td]
    [/tr]
    [tr=warning]
        [td]warning[/td]
        [td]cell[/td]
        [td]cell[/td]
    [/tr]
    [tr=danger]
        [td]danger[/td]
        [td]cell[/td]
        [td]cell[/td]
    [/tr]
    [tr=light]
        [td]light[/td]
        [td]cell[/td]
        [td]cell[/td]
    [/tr]
    [tr=dark]
        [td]dark[/td]
        [td]cell[/td]
        [td]cell[/td]
    [/tr]
[/table]
Styling Cell Cell
primary cell cell
secondary cell cell
info cell cell
success cell cell
warning cell cell
danger cell cell
light cell cell
dark cell cell

Rowspan and Colspan

You can also create tables that span over mutliple rows or columns. Add the rowspan=n or colspan=n to the table header or table data (n is the number of rows or columns that should be spanned). 

[table bordered=1]
    [tr]
        [th]Header 1[/th]
        [th]Header 2[/th]
        [th]Header 3[/th]
    [/tr]
    [tr]
        [td]Row1-Column1[/td]
        [td]Row1-Column2[/td]
        [td rowspan=2]Row1-Column3[/td]
    [/tr]
    [tr]
        [td]Row2-Column1[/td]
        [td]Row2-Column2[/td]
    [/tr]
    [tr]
        [td]Row3-Column1[/td]
        [td colspan=2]Row3-Column2[/td]
    [/tr]
[/table]
Header 1 Header 2 Header 3
Row1-Column1 Row1-Column2 Row1-Column3
Row2-Column1 Row2-Column2
Row3-Column1 Row3-Column2

Images

To embed images, use the [img=url]description[/img] or the [image=url]description[/image] tag. For Uploaded images use the [wiki-image=slug] or the [wimg=slug] tag.

You can also resize your image by using the width and height arguments. The accepted values are: width=25, width=50, width=75 and width=100[width] for generic resizing. You can also set the width and height in [i]%[/i]([code]width=32%), in em (width=5em and rem (width=20rem).

To align images you can use the postion argument. Accepted values for positioning are left or start, center and right or end.

When the embeded images don't fill up the whole width, the text floats around them. 

[img="https://images.unsplash.com/photo-1764957080687-9569e738a238?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"]
Image from [url=https://beckerworks.de]David Becker[/url]
on [url=https://unsplash.com]Unsplash.com[/url]
[/img]

[wiki-image=tw-image-01]

[wimg=tw-image-01 width=25 position=left]
[wimg=tw-image-01 width=25 position=right]
[wimg=tw-image-01 width=25 position=center]

[wimg=tw-image-01 width=25 position=left]
[h3]Some example text[/h3]
[p]
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[/p]
[hr]
Image from David Becker on Unsplash.com
Foggy Mountain-tops in the dawn
Foto from Fabian Bächli on Unsplash
Foggy Mountain-tops in the dawn
Foto from Fabian Bächli on Unsplash
Foggy Mountain-tops in the dawn
Foto from Fabian Bächli on Unsplash
Foggy Mountain-tops in the dawn
Foto from Fabian Bächli on Unsplash
Foggy Mountain-tops in the dawn
Foto from Fabian Bächli on Unsplash

Some example text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.