History of TikiWikiSyntax

{maketoc}
<h1>Plugins</h1>
If you are looking for information on plugins such as <strong>{ code }, { div }, ...</strong> please view the plugin help at the bottom of the wiki page creation page and the appropriate plugin page here. We have a listing of <a href="/wiki/DataPlugins">available plugin pages</a>

__Note:__
<div><p>Please keep in mind that in the examples a space is added after the { to prevent the tag from being parsed.</p>
<p>In actual use, that additional space must be removed.</p></div>

<h1>TikiWiki Syntax</h1>
<h2>Emphasis</h2>
<table>
<tr>
<th>Description</th>
<th>Example</th>
<th>Result</th>
<th>Notes</th>
</tr>
<tr>
<td>Headings</td>
<td>! text
!! text</td>
<td><h1>text</h1><h2>text</h2></td>
<td>Number of ! correponds to heading level.</td>
</tr>
<tr>
<td>Italics</td>
<td>''text''</td>
<td><em>text</em></td>
<td></td>
</tr>
<tr>
<td>Underline</td>
<td>===text===</td>
<td><u>text</u></td>
<td></td>
</tr>
<tr>
<td>Coloured text</td>
<td>++yellow:text++</td>
<td><span>text</span></td>
<td></td>
</tr>
<tr>
<td>Coloured text</td>
<td>~~red:text~~</td>
<td><span>text</span></td>
<td></td>
</tr>
<tr>
<td>Bold</td>
<td>__text__</td>
<td><strong>text</strong></td>
<td></td>
</tr>
<tr>
<td>Center Text</td>
<td>::text::</td>
<td><div>text</div></td>
<td></td>
</tr>
<tr>
<td>Combinations of the above</td>
<td>::__~~red:++yellow:text++~~__::</td>
<td><div><span>text</span></div></td>
<td></td>
</tr>
</table>




<h2>Lists</h2>
<table>
<tr>
<th>Description</th>
<th>Example</th>
<th>Result</th>
<th>Notes</th>
</tr>
<tr>
<td>Unordered Lists</td>
<td>* item 1
** item 2</td>
<td><ul><li>item 1<ul><li>item 2</li></ul></li></ul></td>
<td></td>
</tr>
<tr>
<td>Ordered Lists</td>
<td># item 1
## item 2</td>
<td><ol><li>item 1<ol><li>item 2</li></ol></li></ol></td>
<td></td>
</tr>
<tr>
<td>Definition Lists</td>
<td>; item 1 : item 2</td>
<td><dl><dt>item 1</dt><dd>item 2</dd></dl></td>
<td></td>
</tr>
</table>




<h2>Wiki References</h2>
<table>
<tr>
<th>Description</th>
<th>Example</th>
<th>Result</th>
<th>Notes</th>
</tr>
<tr>
<td>Automatic link to wiki page</td>
<td>CamelCaps</td>
<td><a href="#">CamelCaps</a></td>
<td></td>
</tr>
<tr>
<td>Automatic link to wiki page</td>
<td>under_scores</td>
<td><a href="#">under_scores</a></td>
<td></td>
</tr>
<tr>
<td>Double Brackets</td>
<td>( (Page Name|Description) )</td>
<td><a href="#">Description</a></td>
<td>If you leave out the Description, it will display the Page Name.</td>
</tr>
<tr>
<td>Avoid Link Creation</td>
<td>))PageName((</td>
<td>PageName</td>
<td></td>
</tr>
</table>




<h2>External Links</h2>
<table>
<tr>
<th>Description</th>
<th>Example</th>
<th>Result</th>
<th>Notes</th>
</tr>
<tr>
<td>External Link</td>
<td>[http://www.example.com|Description]</td>
<td><a href="http://www.example.com">Description</a></td>
<td>If you leave out the Description, it will display the URL.</td>
</tr>
</table>




<h2>Miscellaneous</h2>
<table>
<tr>
<th>Description</th>
<th>Example</th>
<th>Result</th>
<th>Notes</th>
</tr>
<tr>
<td>Horizontal Rule</td>
<td>---</td>
<td><hr /></td>
<td></td>
</tr>
<tr>
<td>Highlighted Bar</td>
<td>-=highlighted bar=-</td>
<td><span>highlighted bar</span></td>
<td></td>
</tr>
<tr>
<td>Highlighted Box</td>
<td>^highlighted box^</td>
<td><span>highlighted box</span></td>
<td></td>
</tr>
</table>




<h2>Special tags</h2>
<table>
<tr>
<th>Description</th>
<th>Example</th>
<th>Result</th>
<th>Notes</th>
</tr>
<tr>
<td>Image</td>
<td>{ img src=/storage/images/logo.png}</td>
<td><img alt="Image" src="/storage/images/logo.png" /></td>
<td>Please see the appendix for more information</td>
</tr>
</table>

<h2>Appendix</h2>
<h3>{ img}</h3>
<p>When using { img} the image and the description are enclosed with a div, that you can style with various css parameters:</p>
<ul>
<li>border</li>
<li>padding</li>
<li>width</li>
<li>float</li>
<li>color</li>
<li>background</li>
<li>border</li>
<li>text-align</li>
</ul>
<p>Example:

{ img src=http://www.bitweaver.org/storage/images/logo.png float=right margin=0 1em padding=10px 20px background=#f60 text-align=center color=#fff float=right desc=bitweaver standing tall border=3px solid #000 font=bold small-caps 160%/160% fantasy link=http://bitweaver.org}</p>
<div>
<a href="http://bitweaver.org">
<img alt="bitweaver standing tall" title="bitweaver standing tall" src="http://www.bitweaver.org/storage/images/logo.png" />
</a>

bitweaver standing tall
</div>
<p>This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph. This is some random text to illustrate what the image would look like within a paragraph.</p>

<div> </div>
<h3>{ attachment}</h3>
<p>First go to the attachment tab and choose the file to upload.</p>
<p>Then you have to refresh the edit page by clicking Save on the main tab (I reccomend to choose "Minor save" during that in order not to generate extra version). If the file is large it can take some time</p>
<p>You'll be taken to the view of the wiki page you were editing. Now you need to re-enter edit page.
<p>Now below the page edit area there's some info you need: the attachment ID and the attachment URL (seen when hovering the mouse over the thumbnail as the target URL, not the image url) and you are ready to add the attachment to the page

There can be different strategies for that.

<ul><li>You can use { attachment id=XXX} (might be taken from the attachment tab-attachment browser-insert)</li>
<li>You can add a link using [ link|description ] syntax</li>
<li>You can add image (if your attachment is an image) using { img} tag</li></ul></p>

{attachment id=224 float=left}<p>{ attachment} tag is used</p><div> </div>
<a href="http://www.bitweaver.org/storage/users/442/442/images/224/logo%2B.png">link to the attached image</a>
{img src=http://www.bitweaver.org/storage/users/442/442/images/224/logo%2B.png float=right margin=0 1em padding=10px 20px background=#f60 text-align=center color=#fff float=right desc=attached border=3px solid #000 font=bold small-caps 160%/160% fantasy link=http://bitweaver.org}<p>{ img} tag is used, with some additional formatting</p>
<div> </div>

<h3>side note</h3>
<div><p>Please mind that in some examples additional space is added after the { to prevent the text of the example to be parced.</p>
<p> When writing your code, that additional space is NOT needed</p></div>