EWiki syntax

EWiki mantains its beta status, but now is widely available for all components.
Most old Wiki syntax can be used, see more info here Wiki syntax

Agnostic tags

You can use any HTML tag with EWiki, by simply enclosing the tag in brackets []. Also, you can convert any HTML tag to a Text container by adding -text to tag's name.

The Wiki compiler detects if you are using EWiki features, and enables EWiki syntax. This may have side effects if you compile with EWiki activated, but content does not have any EWiki feature. These side effects may be visible the next time you edit this specific content.

Containers and Text containers

EWiki defines a Container as the content wrapped between [tag] and [/tag]. Containers are similar to normal HTML containers, with no especial treatment for new lines and empty lines.

A Text container, on the other hand, is the content wrapped between [tag-text] and [/tag-text]. Text containers treat new lines as line feeds, and empty lines as the beginning of a new paragraph.

Type	Activation	Usage	Example
Container	[tag]...[/tag]	Banners, compositions, images...	[div]...[/div]
Text container	[tag-text]...[/tag-text]	Normal text, messages, mixed content...	[div-text]...[/div-text]

EWiki container type is -text at the start.

Mixed content

The directives related to changing the interpreter mode are no longer required. HTML can be embedded within wiki causing no extra formatting, except for text containers. Java code and XML can be included as blocks or inline using enclosing java and xml tags.

Despite allowing normal HTML, the compiler returns a well-formed result. Unclosed tags will be closed to ensure consistency.

Easy escaping characters

Any character can be escaped using the backslash. The exception are macro parameters, where compiler especial characters should be transformed to HTML entities.

Parameters

Parameters differ from HTML. They are enclosed within parenthesis, separated by commas, using a colon to divide the attribute from its value. In the simple form, [div(font-weight:bold)] will be as HTML <div style="font-weight:bold">. At this point, doesn't seem to help much, but let's consider this: [div(font-weight:bold,margin:10px,class=supersized)], where the HTML will be <div style="font-weight:bold;margin:10px" class="supersized")>. First thing you may notice is that the compiler detected class as a separated attribute. Also, it's not necessary to create a style, nor include quotes.

EWiki passes all attributes as CSS attributes, except for recognized names like class, href, etc. The later are expanded as HTML attributes.

Containers

As in HTML, EWiki tags are containers. You can add content within the container opening tag, and the closing tag.

EWiki introduces a major difference here, allowing any container to easily write text. By adding the suffix -text, EWiki containers create paragraphs by using simple line feeds. By default, the root container is a text container.

EWiki	HTML	Description
[div] Hello world [/div]	Hello world	Behaves as normal HTML, where line feeds are white spaces.
[div-text] Hello world [/div-text]	Hello world	Creates HTML paragraphs for new lines.

When in text containers, EWiki does not force a paragraph for the first block of text. This ensures not to create paragraphs inside macro containers, that may interfere with the expected result. To change this behavior for the first block of text, add an empty line at the beginning.

Macros

EWiki macros are resolved at compile time, when wiki is transformed to HTML. An expanded macro will not change, despite there are changes in the macro, until you save/compile the wiki content.

EWiki macros are self-contained in a single file, and the compiler finds and expands them.

An EWiki macro can have nested content, including more macros, or single line.

Macro parameters

Macro parameters are enclosed in parentheses, must be named as name=value and comma separated. Values with special characters, like a comma, can be enclosed in double or single quotes.

See the macro examples in the next section.

EWiki provided macros

Actions

@w{button}

Creates a button. Text can be enclosed or in text parameter.

button parameters	Description	Values
category	Actions
class	Adds extra classes to `ui button`	See Fomantic-UI definition for button.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
link	Link action
new	True if the link opens a new page
text	Text inside the button

Cards

@w{card}

Creates a card.

card parameters	Description	Values
category	Cards
class	Adds extra classes to `ui card`	See Fomantic-UI definition for card.
style	Adds CSS styles	See CSS documentation.
image	Adds an image

@w{cards}

Creates a container for cards.

cards parameters	Description	Values
category	Cards
class	Adds extra classes to `ui cards`	See Fomantic-UI definition for cards.
style	Adds CSS styles	See CSS documentation.

@w{content}

Creates content for cards, items and lists.

content parameters	Description	Values
category	Cards,Items,Lists
class	Adds extra classes to `content`
style	Adds CSS styles	See CSS documentation.
header	Adds a content header

@w{extra}

Creates extra content for cards, items. For items, should be nested into a content.

extra parameters	Description	Values
category	Cards,Items
class	Adds extra classes to `extra content`
style	Adds CSS styles	See CSS documentation.

Containers

@w{rotated}

Creates a rotated content with the given degrees.

rotated parameters	Description	Values
category	Containers
class	Adds class attribute
style	Adds CSS styles	See CSS documentation.
degrees	Rotation	By default -2. Positive number rotates clockwise, negative number rotates counter clockwise.

@w{segment}

Creates a segment.

segment parameters	Description	Values
category	Containers
class	Adds extra classes to `ui segment`	See Fomantic-UI definition for segment.
style	Adds CSS styles	See CSS documentation.

@w{solid}

Creates a segment with the provided background color. Font color is automatically selected to make the content visible.

solid parameters	Description	Values
category	Containers
class	Adds extra classes to `ui segment`	See Fomantic-UI definition for segment.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant.

Grids

@w{column}

Creates a grid column.

column parameters	Description	Values
category	Grids
class	Adds extra classes to `column`	See Fomantic-UI definition for grid.
style	Adds CSS styles	See CSS documentation.

@w{grid}

Creates a grid. Can nest row and column.

grid parameters	Description	Values
category	Grids
class	Adds extra classes to `ui grid`	See Fomantic-UI definition for grid.
style	Adds CSS styles	See CSS documentation.

@w{row}

Creates a grid row. Can nest column.

row parameters	Description	Values
category	Grids
class	Adds extra classes to `row`	See Fomantic-UI definition for grid.
style	Adds CSS styles	See CSS documentation.

Images

@w{centeredImage}

Creates a container for centered images.

centeredImage parameters	Description	Values
category	Images
class	Adds classes
style	Adds CSS styles	See CSS documentation.

Items

@w{content}

Creates content for cards, items and lists.

content parameters	Description	Values
category	Cards,Items,Lists
class	Adds extra classes to `content`
style	Adds CSS styles	See CSS documentation.
header	Adds a content header

@w{extra}

Creates extra content for cards, items. For items, should be nested into a content.

extra parameters	Description	Values
category	Cards,Items
class	Adds extra classes to `extra content`
style	Adds CSS styles	See CSS documentation.

@w{item}

Creates a item.

item parameters	Description	Values
category	Items
class	Adds extra classes to `ui item`	See Fomantic-UI definition for item.
style	Adds CSS styles	See CSS documentation.
imgclass	Adds extra classes to `ui image`	See Fomantic-UI definition for image.
image	Adds an image

@w{items}

Creates a container for items.

items parameters	Description	Values
category	Items
class	Adds extra classes to `ui items`	See Fomantic-UI definition for items.
style	Adds CSS styles	See CSS documentation.

Labels

@w{label}

Creates a label.

label parameters	Description	Values
category	Labels
class	Adds extra classes to `ui label`	See Fomantic-UI definition for label.
style	Adds CSS styles	See CSS documentation.
image	Adds an image
text	Text inside the label
detail	Detail inside the label

@w{labels}

Creates a container for labels.

labels parameters	Description	Values
category	Labels
class	Adds extra classes to `ui labels`	See Fomantic-UI definition for labels.
style	Adds CSS styles	See CSS documentation.

Lists

@w{content}

Creates content for cards, items and lists.

content parameters	Description	Values
category	Cards,Items,Lists
class	Adds extra classes to `content`
style	Adds CSS styles	See CSS documentation.
header	Adds a content header

@w{li}

Creates a list item. Text can be enclosed or in text parameter.

li parameters	Description	Values
category	Lists
class	Adds extra classes to `item`	See Fomantic-UI definition for list.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
text	Text inside the list item

@w{lih}

Creates a list item with header. Text can be enclosed or in text parameter.

lih parameters	Description	Values
category	Lists
class	Adds extra classes to `item`	See Fomantic-UI definition for list.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
header	Header inside the list item
text	Text inside the list item

@w{ol}

Creates an ordered list.

ol parameters	Description	Values
category	Lists
class	Adds extra classes to `ui list`	See Fomantic-UI definition for list.
style	Adds CSS styles	See CSS documentation.

@w{ul}

Creates an unordered list.

ul parameters	Description	Values
category	Lists
class	Adds extra classes to `ui list`	See Fomantic-UI definition for list.
style	Adds CSS styles	See CSS documentation.

Messages

@w{message}

Creates a friendly formatted message. The message content goes between open and closing macro.

message parameters	Description	Values
category	Messages
class	Adds extra classes to `ui message`	warning, error, positive, negative... See Fomantic-UI definition for message.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
header	Adds a message header

Stripes

@w{stripe}

Creates a horizontal stripe with the provided background color. Font color is automatically selected to make the content visible.

stripe parameters	Description	Values
category	Stripes
class	Adds extra classes to `ui fluid padded container segment`	See Fomantic-UI definition for segment and container.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant. Also accepts 'radial' and 'linear'.

@w{text}

Creates a text friendly segment.

text parameters	Description	Values
category	Stripes
class	Adds extra classes to `ui basic text container segment`	See Fomantic-UI definition for segment and container.
style	Adds CSS styles	See CSS documentation.

@w{textstripe}

Creates a text friendly horizontal stripe with the provided background color. Font color is automatically selected to make the content visible.

textstripe parameters	Description	Values
category	Stripes
class	Adds extra classes to `ui fluid padded text container segment`	See Fomantic-UI definition for segment and container.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant. Also accepts 'radial' and 'linear'.

Support

@w{iframe}

Creates an iframe.

iframe parameters	Description	Values
category	Support
src	Iframe URL
width	Iframe width
height	Iframe height
allow	Iframe allow

@w{script}

Creates a script. If src has a value, the script is correctly closed.

script parameters	Description	Values
category	Support
src	Script URL

@w{stylesheet}

If href has a value, loads a stylesheet. If not, creates a style block.

stylesheet parameters	Description	Values
category	Support
href	Stylesheet URL

Tables

@w{table}

Creates a table. Can nest theader, trow, tcol and tfooter.

table parameters	Description	Values
category	Tables
class	Adds extra classes to `ui table`	See Fomantic-UI definition for table.
style	Adds CSS styles	See CSS documentation.

@w{tcol}

Adds a table column. If not value is set, content must be nested.

tcol parameters	Description	Values
category	Tables
class	Adds classes to `td`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
value	Value of the column

@w{tfooter}

Adds a table footer.

tfooter parameters	Description	Values
category	Tables
class	Adds classes to `tfoot`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
values	Values of footers, separated by \|	If the footer starts with >, will be right aligned.

@w{thead}

Adds a table header column. If not value is set, content must be nested.

thead parameters	Description	Values
category	Tables
class	Adds classes to `th`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
value	Value of the column

@w{theader}

Adds a table header.

theader parameters	Description	Values
category	Tables
class	Adds classes to `thead`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
values	Values of headers, separated by \|	If the header starts with >, will be right aligned.

@w{trow}

Adds a table row. If no values are set, the columns must be nested.

trow parameters	Description	Values
category	Tables
class	Adds classes to `tr`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
values	Values of columns, separated by \|	If the value starts with >, will be right aligned.

Text

@w{divider}

Creates a divider.

divider parameters	Description	Values
category	Text
class	Adds extra classes to `ui divider`	See Fomantic-UI definition of divider.
text	Adds text for horizontal and vertical dividers

@w{header}

Creates a header.

header parameters	Description	Values
category	Text
class	Adds extra classes to `ui header`	See Fomantic-UI definition of header.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.

@w{inline}

Creates an inline text.

inline parameters	Description	Values
category	Text
class	Adds extra classes to `ui text`	See Fomantic-UI definition for text.
style	Adds CSS styles	See CSS documentation.
text	The text

@w{striped}

Creates a striped text with the provided stripe color. Font color is automatically selected to make the content visible.

striped parameters	Description	Values
category	Text
class	Adds class attribute
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant. Also accepts 'radial' and 'linear'.
separation	Separation between lines	By default is 1.

@w{subheader}

Creates a subheader.

subheader parameters	Description	Values
category	Text
class	Adds extra classes to `sub header`	See Fomantic-UI definition of header.
style	Adds CSS styles	See CSS documentation.

Users

@w{signature}

Creates current user's signature.

signature parameters	Description	Values
category	Users

Macro examples

EWiki provided macros may help you to create rich content, like striped landing pages, documentation, encapsulation, ...

Headers

The macro header creates an HTML header with an optional icon and a sub header.

@w{header(icon=cog)}
This is a header
@w{subheader}...with a sub header.@w{/subheader}
@w{/header}

Headers can also change size.

@w{header(class=big,icon=cog)}
This is a header
@w{subheader}...with a sub header.@w{/subheader}
@w{/header}

Stripes

The macros stripe and textstripe create a container that will reach the left and right borders, and a nested container with the normal width. This ensures a full stripe of the desired color, occupying the container limits. For landing pages, horizontal limits are the browser width.

@w{stripe(color=RedGold)}
@w{header(icon=cog)}
This is a header
@w{subheader}...with a sub header.@w{/subheader}
@w{/header}
@w{/stripe}

@w{textstripe(color=RedGold)}
@w{header(icon=cog)}
This is a header
@w{subheader}...with a sub header.@w{/subheader}
@w{/header}
@w{/textstripe}

Messages

The message macro is a way to draw attention to specific content.

@w{message(class=info,icon=info,header=Informative message)}
This content can be any EWiki content.
@w{/message}

This content can be any EWiki content.

@w{message(class=warning,icon=warning,header=Warning message)}
This content can be any EWiki content.
@w{/message}

This content can be any EWiki content.

Cards

The cards and card macros create an encapsulated content, with an optional image.

@w{card(image=repository(/topcard.jpg))}
@w{content(header=Card header)}
This content can be any EWiki content.
@w{/content}
@w{/card}

This content can be any EWiki content.

Wrapping cards within the cards macro can control how cards will show in rows, the type of card, color and more. Check the cards macro definition.

Items

The items and item macros create an encapsulated content, with an optional image.

@w{items}
@w{item(imgclass=tiny,image=repository(/topcard.jpg))}
@w{content(header=Card header)}
This content can be any EWiki content.
@w{/content}
@w{/item}
@w{/items}

This content can be any EWiki content.

Wrapping items within the items macro can control the type of item, color and more. Check the items macro definition.