FLOWiki

(y)our wiki about all things technical communication

User Tools

Site Tools


wiki:syntax:layout_conventions

Layout conventions (syntax)

DokuWiki doesn’t have a visual editor. You have to use syntax codes to apply layout to a certain piece of text. Fortunately, the codes are not too difficult. To put a piece of text in bold, for example, just surround it with **-signs. The toolbar will help you with this.

This wiki contains simple layout rules to write readable topics. The wiki also contains a playground in which you can test anything without it affecting the actual wiki.

Using the editor for a basic layout

You can use the toolbar for formatting DokuWiki articles.

Formatting

icons_formatting_buttons.jpg

From left to right:

Button name Wiki syntax Usage
Bold **Bold words** Important text
Cursive //Cursive words// Difficult words
Underlined __Underline__ Not used
Strike-through –Strike-through text– Sentences that were deleted
Subscript <sub>subscript</sub> Text that appears below the line
Superscript <sup>superscript</sup> Text that appears above the line
Remove format / Removes all formatting you have applied to the selected text

Headings

There are five heading levels. You can choose which level headline is applied to a title with the following buttons:

icons_headings.jpg

From left to right:

Button name Usage
Same level header Insert a new section title with the same level
Lower level header Insert a subsection title
Higher level header Insert a new section title with a higher level
Remove header Remove the header formatting from the selected paragraph

To insert a headline, surround your text with ===-signs, like this: ====== Level 1 heading ======

A level 1 heading is the highest level of heading. Use fewer equals signs (=) to get a lower heading level.


icons_links.jpg

From left to right:

Button name Wiki syntax Usage example
Insert link [[Article name or link addressDisplay text]]
Internal link: [[ERP Manuals|ERP Manuals]]

External link: [[http://www.google.be|Google]]
Remove link / /

External links are automatically recognized: simply type http://www.google.com or even www.google.com.


Lists

icons_lists.jpg

From left to right:

Button name Syntax Usage
Ordered list <space><space>- Steps in a task
Unordered list <space><space>* Items in a list

You can make ordered and unordered lists in dokuwiki.

  1. Start on a new line and enter two spaces followed by an asterisk or a hyphen.
  2. Press enter and a new listitem appears.
  3. You can also make nested lists: Precede the * or - with four spaces to make a second level list, with six spaces to make a third level list, and so on.

For more info, check the FAQ about lists in DokuWiki.

If you interrupt a numbered list with a regular paragraph, the list will restart numbering after the inserted paragraph.


Insert

icons_insert.jpg

From left to right:

Button name Syntax Usage
Image {{:wiki:syntax:knoppen1.png?200|}} Uploading an image and embedding it inside the text
Table ^ Heading 1 ^ Heading 2 ^
| Row 1 Col 1 | Row 1 Col 2 |
Adding a table to structure information
Horizontal line —- Used for layout purposes
Smiley :-) Smileys are always useful :-)
Special character Quickly finding difficult to type characters
Signature — //[[Wouter.Verkerken@flowtime.be|Wouter Verkerken]] 2016/08/04 15:14// Adding your personal signature to a recent edit
Footnote ((This is a footnote)) Explaining something separately (in a tooltip) without complicating the text

If you add an image or a file, they will be uploaded to the Wiki server. When using the image syntax, the file is added to the article. When you later upload a newer version of the file, the image in the article will be changed too. If you delete the uploaded file, the image will no longer display in the article.


Plugins

To make the wiki more user-friendly, a number of plugins were added. Some of these plugins appear as buttons in the toolbar:

icons_plugins.jpg

From left to right:

Button name Wiki syntax Usage
Tags {{tag>DokuWiki layout images}} Adding tags to an article
Wrap <WRAP center round tip 60%>tip box</WRAP> Placing a piece of text into a box

Clicking the Tags button will enter a line of code in which you can enter tags. Enter these tags with spaces in between. If you want a tag which consists of several words, separate them with an underscore (for example {{tag>adobe_reader}} will result in the tag “adobe reader”). All tags should be written in lower case.

The Wrap plugin allows you to put notes, warnings, information blocks and many more inside a text. This plugin has many layout options. For more information, see the section Wrap plugin.


Text to HTML conversion

This wiki converts letter codes to their matching typographic image. Here are a few examples:

→ ← → ⇒ ⇐ <⇒ » « – — 640×480 © ™ ® “He thought ‘It’s a man’s world’…”

-> <- -> => <= <=>>> <<-- --- 640x480 (c) (tm) (r)
"He thought 'It's a man's world'..."

Wrap plugin

The wrap plugin allows you to easily add a note, tip or warning in your text. The syntax is very similar to HTML. It is ideal for displaying text blocks and notes. You can find what you need in the expandable toolbar:

This is a selection of the wrap possibilities on the wiki:

<WRAP 60% center round box> This is a standard text block. </WRAP>
<WRAP 60% center round info> This is an info block. </WRAP>
<WRAP 60% center round tip> This is a block for tips. </WRAP>
<WRAP 60% center round important> This is a block that contains important info about the design. </WRAP>
<WRAP 60% center round alert> This block contains essential information that must be read. </WRAP>
<WRAP 60% center round help> This is a reference to help or contains information for new users. </WRAP>
<WRAP 60% center round todo> This information is not up to date yet or contains errors. </WRAP>

This is a standard text block.

This is an info block.

This is a block for tips.

This is a block that contains important info about the design.

This block contains essential information that must be read.

This is a reference to help or contains information for new users.

This information is not up to date yet or contains errors.

The wrap plugin is also used to quickly create a layout for text elements. Here are a few examples:

  • Click Articles and then Details.
  • This is an important word.
  • This is less important.
Click <wrap em>Articles</wrap> and then {{:details_icon.png?nolink|Details}}.
This is an <wrap hi>important</wrap> word.
This is <wrap lo>less important</wrap>.

Syntax Plugins

Dokuwiki syntax can be expanded with Plugins. Each page describes how to use the installed plugins. The following syntax plugins are available in this DokuWiki installation:


wiki/syntax/layout_conventions.txt · Last modified: 2019/01/03 11:36 by bavo