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