django-tinywiki/tinywiki/migrations/pages/bbcode.bbcode

[h1]BBCode used by TinyWiki[/h1]

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

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

[p]
You define headers as follows:
[/p]
[codeblock=bbcode][h1]Title header[/h1]
[h2]Header 2[/h2]
[h3]Header 3[/h3]
[h4]Header 4[/h4]
[h5]Header 5[/h5]
[h6]Header 6[/h6][/codeblock]

Which render as:
[/p]

[h1]Title header[/h1]
[h2]Header 2[/h2]
[h3]Header 3[/h3]
[h4]Header 4[/h4]
[h5]Header 5[/h5]
[h6]Header 6[/h6]
[hr]
[h2]Paragraphs[/h2]
[p]Paragraphs are created by the [code][p][/code] tag.[/p]

See the following code:
[codeblock=bbcode]
[hr]
[p]This is a paragrpah.[/p]
[p]And this is another one with a [b]encapsulated bold tag[/b].[/p]
[hr][/codeblock]

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

[h2]Typography[/h2]
[p]
You can create [b]bold[/b] text with the [code][b][/code]-tag, [i]italic[/i] text with the [code][i][/code]-tag. To create text with [strong]strong emphasis[/strong], use the [code][strong][/code]-tag. [em]Emphasized text[/em] is created using the [code][em][/code]-tag. [u]Underlining text[/u] is done with the [code][u][/code]-tag, [s]Striked through[/s] text with the [code][s][/code]-tag. And to [mark]mark text[/mark] you can use the [code][mark][/code]-tag.
[/p]
[p]
The tags described in the previous paragraph are rendered as semantic-HTML and handled by screen-readers accordingly.
[/p]
[p]
If you want to show inline code, use the [code][code][/code]-tag. Code blocks can be can be created wtih the [code][codeblock][/code]-tag. You can also specify a language for codeblocks fields. this is done by using the [code][code=language][/code] option set to the codeblock-tag ([code][codeblock=bbcode][/code] is used to render the codeblock fields in this text).
[/p]

[p]
Line breaks are created with the [code][br][/code]-tag and horizontal rulers with the [code][hr][/code]-tag.
[/p]
[p]
An example:
[codeblock=bbcode][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][/codeblock]
This renders as follows:
[/p]
[p]
[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 we mark some text.[/mark][br]
[code]finally_some_code()[/code]
[hr]
[/p]

[h2]Links[/h2]
[p]
Links are created using the [code][url][/code]-tag. You can create a link by using [code][url]www.example.com[/url[/code] to create a simple link with the same link description as the URL itself or you use the [code][url=https://www.example.com]Link description[/url][/code] style if you want the link description differ from the link itself.
[/p]
[p]
To link against a wiki-page, you can use the [code][wiki-url=page_slug][/code]-code or the [code][wiki][/code]-tag. The [code][wiki-url][/code] works nearly the same, is used to link against a page with a user-defined description. Whereas the [code][wiki=slug][/code]-tag, which is self-closing, is used to link against a wiki page and display the page's title.
[/p]
[p]Here an example:[/p]
[codeblock=bbcode][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][/codeblock]

[p]
[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]
[/p]

[h2]Lists[/h2]
[p]
Unordered lists can be created using the [code][list][*] Item1 [*] Item2[/list][/code] tags. Alternatively, you can use the [code][ul][li]Item1[/li][li]Item2[/li][/ul][/code] notation.
[/p]
[p]
Ordered lists are created with the [code][ol][/code] tag. The notation is the same as the [code][ul][/code] tag.
[/p]
[p]
Here an example:
[codeblock=bbcode]
[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]
[/codeblock]
[p]
A 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]
[/p]
[h2]Tables[/h2]
[p]
Tables are  created with the [code]table[/code] tag. They contain rows, created with the [code]table-row[/code] or [code][tr][/code] tag. Each row contain table headers or table data. Table headers are created with [code][table-header][/code] or [code][th][/code] tag, table data with the [code][table-data][/code] or [code][td][/code] tag.
[/p]

[codeblock=bbcode]
[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]
[/codeblock]

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

[h3]Bootstrap extensions[/h3]
[p][b]NOTE: The following tables might not render right when not using [url=https://getbootstrap.com]Bootstrap[/url]![/b][/p]
[p]
[p]
When using [i]Bootstrap[/i] you can style your tables. You can use [code]primary, secondary, info, warning, danger, success, light[/code] and [code]dark[/code] as an argument for the [code][table][/code] tag to give the table some color.
[/p]

[codeblock]
[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]
[/codeblock]

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

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

[codeblock]
[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]
[/codeblock]

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

[p]
With [i]Bootstrap[/i] you can also style individual rows or even cells with [code]primary, secondary, info, warning, danger, success, light[/code] or [code]dark[/code] applying to the tag.
[/p]
[codeblock]
[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]
[/codeblock]

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

[h3]Rowspan and Colspan[/h3]
[p]
You can also create tables that span over mutliple rows or columns. Add the [code]rowspan=n[/code] or [code]colspan=n[/code] to the table header or table data ([i]n[/i] is the number of rows or columns that should be spanned).
[/p]
[codeblock]
[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]
[/codeblock]

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

[h2]Images[/h2]

[p]
To embed images, use the [code][img=url]description[/img][/code] or the [code][image=url]description[/image][/code] tag. For Uploaded images use the [code][wiki-image=slug][/code] or the [code][wimg=slug][/code] tag.
[/p]
[p]
You can also resize your image by using the [code]width[/code] and [code]height[/code] arguments.
The accepted values are: [code]width=25[/code], [code]width=50[/code], [code]width=75[/code] and [code]width=100[width] for generic resizing. You can also set the width and height in [i]%[/i]([code]width=32%[/code]), in [i]em[/i] ([code]width=5em[/code] and [i]rem[/i] ([code]width=20rem[/code]).
[/p]
[p]
To align images you can use the [code]postion[/code] argument. Accepted values for positioning are [code]left[/code] or [code]start[/code], [code]center[/code] and [code]right[/code] or [code]end[/code].
[/p]
[p]
When the embeded images don't fill up the whole width, the text floats around them.
[/p]

[codeblock]
[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][/codeblock]

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

[hr]

[wimg=tw-image-01 width=50 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]