Block Formatting Elements

Left, right, centered and justified

To apply horizontal alignment to a block of text use:

[[<]]

[[/<]]
align left
[[>]]

[[/>]]
align right
[[=]]

[[/=]]
align center
[[==]]

[[/==]]
align justified

E.g.

[[=]]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\
Aenean a libero. Vestibulum adipiscing, felis ac faucibus \
imperdiet, erat lacus accumsan neque, vitae nonummy lorem \
pede ac elit.

Maecenas in urna. Curabitur hendrerit risus vitae ligula.
[[/=]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.

Maecenas in urna. Curabitur hendrerit risus vitae ligula.

To center a single line use = at the beginning:

= Centered line

Centered line

Note: The block formatting tags must be on their own line with nothing after them, not even a space. For example, [[=]] and [[/=]] must be immediately followed by the return character (press Enter).

Custom div blocks

To improve the layout you can use [[div]] ... [[/div]] elements which transform to html <div> ... </div> blocks.
Allowed attributes are: id, class, style, data- only but this should be more than enough to create desired layout. SPAN elements also allow class, style and data- attributes.

[[div]] blocks can be nested. Put the [[div]] and [[/div]] tags on their own lines or the parser will not recognize them.

Below is an example how to create a 2-column layout using div block:

[[div style="float:left; width: 45%; padding: 0 2%"]]
left column left column left column left column left column
left column left column left column left column left column
[[/div]]
[[div style="float:left; width: 45%; padding: 0 2%"]]
right column right column right column right column right column
right column right column right column right column right column
[[/div]]

~~~~

left column left column left column left column left column left column left column left column left column left column

right column right column right column right column right column right column right column right column right column right column

The ~~~~ element is used to clear floats and translates more or less to <div style="clear:both"></div>).

Custom [[div]] blocks can be used to create very advanced page layouts.

Adding underscore to div element [[div_ ]] will truncate whitespaces around it which prevents creation of random new lines and paragraphs. It's simplifices creation of complex HTML syntax like Bootstrap components

You can use user-defined ID arguments in custom DIVs, which is extremely useful building sites using Bootstrap. Please note that every user-defined ID will have a "u-" prefix added in the output HTML for the security reasons.

To make your source more readable, you can add the "u-" prefix yourself. For example, these 2 bits of wiki syntax will output the same HTML:


"u-" prefix will be added to myCarousel automatically when the page is saved

[[div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"]]

"u-" prefix will not be added to since it already exists
[[div id="u-myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"]]

HTML output from both examples
<div id="u-myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
黄州开出租车赚钱吗 什么是车联网车智慧 福建22选5开奖走势图 百度 云南麻将打法 英超球队 江西多乐彩走势图遗漏 网上挣钱平台 贵州快3走势图表了 国外网赚项目博客 幸运飞艇冠亚和互刷 在家能干的兼职 全天北京快3最准计划 全年固定杀肖公式规律 浙江20选5幸运之门 009平特一肖 韩国首尔快乐8开奖结果 龙王捕鱼破解版