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>

<br /><br />
<h1>TikiWiki Syntax</h1>
<h2>Emphasis</h2>
<table class="bittable">
<tr>
<th style="width:25%">Description</th>
<th style="width:25%">Example</th>
<th style="width:25%">Result</th>
<th style="width:25%">Notes</th>
</tr>
<tr>
<td>Headings</td>
<td>! text<br />!! 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 style="background:yellow;">text</span></td>
<td></td>
</tr>
<tr>
<td>Coloured text</td>
<td>~~red:text~~</td>
<td><span style="color:red;">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 style="text-align:center;">text</div></td>
<td></td>
</tr>
<tr>
<td>Combinations of the above</td>
<td>::__~~red:++yellow:text++~~__::</td>
<td><div style="text-align:center;"><span style="background:yellow; color:red; font-weight:bold;">text</span></div></td>
<td></td>
</tr>
</table>

<br /><br />
<h2>Lists</h2>
<table class="bittable">
<tr>
<th style="width:25%">Description</th>
<th style="width:25%">Example</th>
<th style="width:25%">Result</th>
<th style="width:25%">Notes</th>
</tr>
<tr>
<td>Unordered Lists</td>
<td>* item 1<br />** 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<br />## 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>

<br /><br />
<h2>Wiki References</h2>
<table class="bittable">
<tr>
<th style="width:25%">Description</th>
<th style="width:25%">Example</th>
<th style="width:25%">Result</th>
<th style="width:25%">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>

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

<br /><br />
<h2>Miscellaneous</h2>
<table class="bittable">
<tr>
<th style="width:25%">Description</th>
<th style="width:25%">Example</th>
<th style="width:25%">Result</th>
<th style="width:25%">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 class="bitbar">highlighted bar</span></td>
<td></td>
</tr>
<tr>
<td>Highlighted Box</td>
<td>^highlighted box^</td>
<td><span class="bitbox">highlighted box</span></td>
<td></td>
</tr>
</table>

<br /><br />
<h2>Special tags</h2>
<table class="bittable">
<tr>
<th style="width:25%">Description</th>
<th style="width:25%">Example</th>
<th style="width:25%">Result</th>
<th style="width:25%">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:
<br />{ 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 class="img-plugin" style="float:right;margin:0 1em;padding:10px 20px;background:#f60;text-align:center;color:#fff;float:right;border:3px solid #000;font:bold small-caps 160%/160% fantasy;">
<a href="http://bitweaver.org">
<img alt="bitweaver standing tall" title="bitweaver standing tall" src="http://www.bitweaver.org/storage/images/logo.png" style="" />
</a>
<br />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 class="clear"> </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<br />
There can be different strategies for that.<br />
<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 class="clear"> </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 class="clear"> </div>

<h3>side note</h3>
<div class="bitbox"><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>