| <tr>
|
| <td>Highlighted Bar</td>
|
| <td>-=highlighted bar=-</td>
|
| - <td><span class="bitbar">highlighted bar</span></td>
|
| + <td><span>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><span>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>
|
| +<hr /> |
|
|
| -<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>
|
| +!! Why use wiki syntax? |
| +Wiki syntax is a way to add word-processor like formatting to content in the website. Consisting of special characters that you enter along with the text, wiki syntax is designed for non-programmers be easy to use. E.g., typing ~np~__bold text__~/np~ with underscores creates __bold text__. Typing ~np~((Wiki Syntax|link))~/np~ creates a ((Wiki Syntax|link)) to the page ''Wiki Syntax''. |
|
|
| -{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>
|
| +!! Quicklinks |
| +Eventually many users memorize the wiki syntax they use, but you don't have to. It the ((QuicklinksPackage|Quicklinks)) package is enabled, the quicklink buttons above the edit window will apply the chosen formatting to any selected text. |
|
|
| -<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> |
| +!! Plugins |
| +If you are looking for a way to include __CODE__ (with highlighting for various languages) or __DIV__ or __IMG and ATTACHMENT__ please refer to ((DataPlugins|the list of data plugins)). |