Синтаксис Wikidot

Этот документ описывает вики-синтаксис, который используется на Wikidot.com. Оригинал, на английском языке, находится здесь.

Каждая страница вики-сайта существует в двух формах: исходный текст и производный код. Исходный текст - это то, что вы можете исправлять и то, что, в конечном счете, описывает содержимое страницы. Исходный код транслируется в XHTML, который получает ваш браузер, когда вы посещаете страницу. Вики-синтаксис используется для создания содержания страниц, посредством редактирования их исходного кода.

Если вы ищете примеры вики-кода, которые можно было бы непосредственно использовать, загляните на Code Snippets Site.

Форматирование

Что вы пишете Что получаете
//курсив// курсив
**полужирный** полужирный
//**полужирный курсив**// полужирный курсив
__подчеркнутый__ подчеркнутый
--перечеркнутый-- перечеркнутый
{{моноширинный}} моноширинный
обычный^^верхний индекс^^ обычныйверхний индекс
обычный,,нижний индекс,, обычныйнижний индекс
[!-- комментарий --]
[[span style="color:red"]]ваш //span//-элемент[[/span]] ваш span-элемент
##blue|синий## или ##44FF88|ваш-цвет## синий или ваш-цвет

Параграфы и переводы строк

Параграфы разделяются двумя переводами строк. Один перевод строки транслируется в… перевод строки.

Параграф первый. 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.
Просто новая строка.
Еще новая строка.

Параграф первый. 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.
Просто новая строка.
Еще новая строка.

Типографика

Есть несколько способов усовершенствовать типографику в вашем тексте:

пишем получаем
``цитата'' “цитата”
`цитата' ‘цитата’
,,цитата'' „цитата”
точки... точки…
и -- тире и — тире

Отключение форматирования

Чтобы отключить трансляцию и получить на выходе "сырой текст", заключите его в двойные @@.

Этот //текст// **транслируется**.

@@Этот //текст// остается **неизменным**.@@

Этот текст транслируется.

Этот //текст// остается **неизменным**.

Комментарии

Комментарии - это блок исходного текста, который не отображается после трансляции. Для того чтобы добавить комментарий, используйте [!-- ... --], например:

[!--
Ничего не увидите.
--]]

Заголовки

Заголовки располагаются на отдельный строчках, начинающихся со знака "плюс". Увеличение числа плюсов перед текстом, увеличивает вложенность заголовка.

+ Заголовок 1го уровня
++ Заголовок 2го уровня
+++ Заголовок 3го уровня
++++ Заголовок 4го уровня
+++++ Заголовок 5го уровня
++++++ Заголовок 6го уровня

Содержание

Можно создать список всех заголовков, связанный гиперссылками с самими заголовками. Для этого, поместите команду для генерации содержание на подходящее место.

[[toc]] - содержание
[[f>toc]] - содержание, выровненное вправо
[[f<toc]] - содержание, выровненное влево

Горизонтальная линия

Четыре и больше черточек (----) используются для рисования горизонтальной линии.

Списки

Ненумерованные списки

Для того чтобы создать ненумерованный список, начните строчку с символа "звездочка". Чтобы увеличить вложенность, поместите дополнительный пробел перед очередной звездочкой.

* Раз
* Два
 * Два с половиной
  • Раз
  • Два
    • Два с половиной

Нумерованные списки

Аналогично, чтобы создать нумерованный список, начните параграф с решетки.

# Раз
# Два
 # Два с половиной
  1. Раз
  2. Два
    1. Два с половиной

Нумерованные и ненумерованные списки можно смешивать.

Списки определений

Можно создать список определений, следующим образом:

: Один : это я
: Два : это теленок
Один
это я
Два
это теленок

Цитирование

Можно вставлять много-строчные цитаты, добавляя один или более знаков '>' вначале строки, за которыми должны следовать пробел и цитируемый текст.

Здесь обычный текст.

> Нужен отступ! The quick brown fox jumps over the lazy dog. \
Now this the time for all good men to come to the aid of \
their country. Notice how we can continue the block-quote \
in the same "paragraph" by using a backslash at the end of \
the line.
>
> И еще один блок, содержащий...
>> Дополнительный уровень вложенности.

И опять обычный текст.

Здесь обычный текст.

Нужен отступ! The quick brown fox jumps over the lazy dog. Now this the time for all good men to come to the aid of their country. Notice how we can continue the block-quote in the same "paragraph" by using a backslash at the end of the line.
И еще один блок, содержащий…

Дополнительный уровень вложенности.

И опять обычный текст.

Ссылки

Внутренние ссылки

В отличии от многих других вики-движков, Wikidot не использует словосочетания в виде CamelCase в качестве ссылок. Вместо этого, каждая ссылка должна быть помечена тремя квадратными скобками.

Адреса страниц, содержащие неразрешенные символы, автоматически преобразуются в адреса, лишенные таковых. Однако, отображаемое имя страницы остается неизменным.

Что вы пишете Что получаете Пояснения
[[[link-to-a-page]]] link-to-a-page используется то само имя
[[[link "TO" ą pagE]]] link "TO" ą pagE автоматическая корректировка адреса
[[[бабочка]]] бабочка страницы на русском не годятся
[[[category: sample page]]] sample page ссылка на страницу в категории category
[[[some page| моя страничка]]] моя страничка использование альтернативных названий страниц
[[[start|Начало]]] Начало ссылка на существующую страницу выделяется цветом
[[[doc#toc1|Раздел 1]]] Раздел 1 ссылка на анкер
[[[doc#toc1]]] doc ссылка на анкер

Внешние ссылки

Что вы пишете Что получаете Пояснения
http://www.wikidot.com http://www.wikidot.com просто ссылка
[http://www.wikidot.com wikidot] wikidot именованная ссылка
*http://www.wikidot.com
[*http://www.wikidot.com wikidot]
http://www.wikidot.com
wikidot
открывается в новом окне
[# пусто] пусто связывается с href="javascript:;", т.е. не ведет никуда, удобно для создания меню

Анкеры

Используйте [[# anchor-name]] для обозначения анкера. Чтобы сослаться на анкер, используйте [#anchor-name отображаемый текст].

Адреса E-mail

Что вы пишете Что получаете Пояснения
support@example.com moc.elpmaxe|troppus#moc.elpmaxe|troppus просто адрес E-mail
[support@example.com напишите мне!] moc.elpmaxe|troppus#!�нм� �ЂѸЈѸпан� альтернативное отображение

Мы предостерегаем об опасности помещения адресов электронной почты в сети. Тем не менее, WikiDot предоставляет простейший механизм маскировки почтовых адресов для того чтобы сбить с толку роботов, коллекционирующих E-mail адреса. Каждый E-mail адрес коверкается системой и дешифруется обратно браузером клиента. Хотя этот механизм не может гарантировать 100-процентной защиты от спама, он, все же, значительно более безопасен открытых E-mail адресов.

InterWiki

To link directly to a Wikipedia article you can use a syntax:

what you type what you get
[wikipedia:Albert_Einstein] Albert_Einstein
[wikipedia:Albert_Einstein Albert] Albert

Other links defined by example:

  • [google:free+wiki] - search google for the "free wiki" term
  • [dictionary:wiki] - look up definitions of the word wiki from dictionary.reference.com

Картинки

Одиночные картинки

Используйте следующий синтаксис, для того чтобы поместить картинку на страницу:

[[image источник-картинки параметер1="значение1" параметер2="значение2" ...]]

Список параметров:

Название параметра Допустимые значения Пример Описание
link имя вики-страницы либо URL "wiki-page"
"http://www.example.com"
делает картинку ссылкой на вики-страницу или произвольный web-адрес; этот параметр игнорируется, если в качестве источника картинки указан Flickr; * перед ссылкой открывает ссылку в новом окне
alt любой текст "моя фотка" подстановка текста, если картинка не доступна
width количество точек "200px" устанавливает ширину картинки во время просмотра
height количество точек "200px" устанавливает высоту картинки во время просмотра
style CSS-определение "border: 1px solid red; padding: 2em;" изменяет CSS стили картинки
class CSS-класс "mystyle" устанавливает CSS-класс для картинки — используется с пользовательскими темами
size "square" - 75x75 точек
"thumbnail" - 100 по большей стороне
"small" - 240 по большей стороне
"medium" - 500 по большей стороне
"large" - 1024 по большей стороне (только для картинок с Flickr)
"original" - исходный размер (только для Flickr)
любой доступный ;-) отображает отмасштабированную картинку; подходит для пред-просмотра
при использовании Flickr, картинка нужного размера скачивается с сервера;
параметр применим только к локальным картинкам и картинкам с Flickr

Параметр size применим к локальным файлам (прикрепленным к страницам), не только к картинкам, но и к PDF или PostScript. См. так же здесь.

Источник-картинки может быть одним из:

Тип источника Формат Пример Описание
адрес URL любой корректный URL-адрес http://www.example.com/image.jpg отображает картинку, располагающуюся по адресу
прикрепленный файл (к текущей странице) имя-файла exampleimage.jpg отображает картинку, прикрепленную к текущей странице
прикрепленный файл (к другой странице) /имя-страницы/имя-файла /another-page/exampleimage.jpg отображает картинку, прикрепленную к произвольной странице на вики-сайте
картинка с flickr flickr:ключ flickr:83001279 отображает картинку с Flickr и ссылку на оригинальную Flickr-страницу
картинка с flickr (закрытая) flickr:ключ_секрет flickr:149666562_debab08866 отображает картинку с Flickr и ссылку на оригинальную Flickr-страницу; если указать секрет, картинка будет отображена несмотря на то, что сокрыта от публики

Чтобы заставить ссылки, генерируемые для картинок, открываться в новом окне, поставьте перед параметром link или перед источником картинки звездочку. Примеры: link="*http://www.example.com", *flickr:149666562_debab08866, *image.jpg.

Можно выбрать горизонтальное выравнивание для картинки:

  • [[=image… - по центру
  • [[<image… - по левому краю
  • [[>image… - по правому краю
  • [[f<image… - по левому краю, окруженная текстом
  • [[f>image… - по правому краю, окруженная текстом

Галереи

Элементы [[gallery]] можно использовать для того чтобы вставлять серии картинок в содержимое страницы:

[[gallery size="размер-картинок"]]

либо
[[gallery size="размер-картинок"]]
: источник-картинки1 параметер1="значение1" параметер2="значение2" ...
: источник-картинки1 параметер1="значение1" параметер2="значение2" ...
...
[[/gallery]]

Элемент [[gallery]] имеет единственный допустимый параметр — size со следующими допустимыми значениями: "square", "thumbnail", "small", "medium".

В случае, если указан только элемент [[gallery]], без списка картинок, галерея будет содержать отмасштабированные варианты всех картинок, прикрепленных к текущей странице (включая пред-просмотр для документов .pdf и .ps).

В случае, когда внутри [[gallery]] элемента присутствует список картинок, только эти картинки будут отображаться в галерее. Источник этих картинок не должен быть URL. Разрешены следующие параметры:

  • link - URL или имя вики-страницы (не работает с Flickr, чтобы не нарушать условия эксплуатации сервиса)
  • alt - альтернативный текст, если картинка не доступна

Для открытия документов в новом окне, следуйте тем же правилам как и для одиночных картинок.

См. также FlickrGallery module, если вы желаете импортировать картинки с Flickr.

Code Blocks

Create code blocks by using [[code]]…[[/code]] tags (each on its own line).

This is an example code block!

To create PHP blocks that get automatically colorized when you use PHP tags, simply surround the code with [[code type="php"]]…[[/code]] tags).

To get PHP code colorized you should surround it with <?php.. ?>.

WikiDot.com uses PEAR::Text_Highlighter and supports a number of color schemes. Here is what is supported (allowed type values):

php, html, cpp, css, diff, dtd, java, javascript, perl, python, ruby, xml.

[[code type="php"]]
<?php
/* comment */
for($i=0; $i<100; $i++){
echo "number".$i."\n";
}
?>
[[/code]]
<?php
/* comment */
for($i=0; $i<100; $i++){
echo "number".$i."\n";
}
?>

Tables

Simple tables

You can create simple tables using pairs of vertical bars:

||~ head 1 ||~ head 2 ||~ head 3 ||
|| cell 1 || cell 2 || cell 3 ||
|||| long cell 4 || cell 5 ||
||cell 6 |||| long cell 7 ||
|||||| looong cell 8||
head 1 head 2 head 3
cell 1 cell 2 cell 3
long cell 4 cell 5
cell 6 long cell 7
looong cell 8
|| lines must start and end || with double vertical bars || nothing ||
|| cells are separated by || double vertical bars || nothing ||
|||| you can span multiple columns by || starting each cell ||
|| with extra cell |||| separators ||
|||||| but perhaps an example is _
the easiest way to see ||
lines must start and end with double vertical bars nothing
cells are separated by double vertical bars nothing
you can span multiple columns by starting each cell
with extra cell separators
but perhaps an example is
the easiest way to see

For a newline inside the table cell use _ (underscore) at the end of the line (see the example above).

Advanced (custom) tables

To create more advanced tables, special tags can be used that can accept class and style attributes for managing appearance. To create an advanced table use the following syntax:

[[table]]
[[row]]
[[cell style="border: 1px solid silver; background-color: yellow;"]]
call 0.0
[[/cell]]
[[cell style="border: 1px solid silver"]]
call 0.1
[[/cell]]
[[/row]]
[[row style="border: 1px solid silver"]]
[[cell]]
call 1.0
[[/cell]]
[[cell style="border: 1px solid silver; background-color: yellow;"]]
call 1.1
[[/cell]]
[[/row]]
[[/table]]
transforms to…
cell 0.0 cell 0.1
cell 1.0 cell 1.1

Each of elements [[table]], [[row]] and [[cell]] can accept attributes style and class and they are transformed to (X)HTML tags: <table>, <tr> and <td>.

An example of using tables for page layout can be found on our Snippets Wiki at: http://snippets.wikidot.com/code:layout-with-tables .

Tables can be nested.

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

Custom div blocks

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

[[div]] blocks can be nested.

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.

Math

WikiDot.com uses LaTeX to render beautiful equations. For these who know LaTeX syntax using wikidot equations should be quite obvious. Please

Equations

Simply put the equation between [[math label]] … [[/math]] block tags (the label is optional). The equation is rendered within LaTex \begin{equation} ... \end{equation} environment. Please refer to any LaTeX reference manual for details about syntax.

[[math label1]]
\rho _{\rm GJ} = -\sigma (r) \left[ (1 - \eta _{\ast }^2 {\kappa \over {\eta ^3}}) \cos \chi \right.
+ \left. {3\over 2} \theta (\eta) H(\eta)
\xi \sin \chi \cos \phi \right]
[[/math]]
(1)
\begin{align} \rho _{\rm GJ} = -\sigma (r) \left[ (1 - \eta _{\ast }^2 {\kappa \over {\eta ^3}}) \cos \chi \right. + \left. {3\over 2} \theta (\eta) H(\eta) \xi \sin \chi \cos \phi \right] \end{align}

To refer to a labeled equation simply use [[eref label]] to get a raw number or e.g. Eq. ([[eref label1]]) which gives Eq. (1).

To break long equations use a type="eqnarray" attribute, e.g.

[[math label2 type="eqnarray"]]
\lefteqn{ \cos x = 1        
-\frac{x^{2}}{2!} +{} } \\
& & {}+\frac{x^{4}}{4!}
-\frac{x^{6}}{6!}+{}\cdots
[[/math]]
(2)
\begin{eqnarray} \lefteqn{ \cos x = 1 -\frac{x^{2}}{2!} +{} } \\ & & {}+\frac{x^{4}}{4!} -\frac{x^{6}}{6!}+{}\cdots \end{eqnarray}

Inline math

To use math expressions inside text (sentence) use [[$ ... $]] block tags.

[[$ E = mc^2 $]] is much more popular than
[[$ G_{\mu\nu} - \Lambda g_{\mu\nu} = \kappa T_{\mu\nu} $]]

$E = mc^2$ is much more popular than $G_{\mu\nu} - \Lambda g_{\mu\nu} = \kappa T_{\mu\nu}$

Footnotes

To make footnotes in the text use [[footnote]] block. To force the list of footnotes
to appear not at the end of the page, use [[footnoteblock]].

Some text[[footnote]]And a small footnote.[[/footnote]]. Here we go
with another footnote[[footnote]]Content of another footnote.[[/footnote]].

[[footnoteblock]]

Some text1. Here we go with another footnote2.

If you are not satisfied with the default title ("Footnotes") you can force your own title by using [[footnoteblock title="Custom title"]] or even do not use title at all (title="").

Bibliography

The bibliography block is defined by [[bibliography]]...[[/bibliography]]. Each bibliography item has the form:
label : full reference
To cite a bibliography entry use ((bibcite label)).

The first pulsar was observed by J. Bell and A. Hewish [((bibcite bell))]. Another reference [see ((bibcite guy))].

[[bibliography]]
: bell : Bell, J.; Hewish, A.; Pilkington, J. D. H.; Scott, P. F.; and Collins, R. A. //Observation of a Rapidly Pulsating Radio Source.// Nature 217, 709, 1968.
: guy : Guy, R. K. //Modular Difference Sets and Error Correcting Codes.// §C10 in Unsolved Problems in Number Theory, 2nd ed. New York: Springer-Verlag, pp. 118-121, 1994.
[[/bibliography]]

The first pulsar was observed by J. Bell and A. Hewish [1]. Another reference [see 2].

Bibliography
1. Bell, J.; Hewish, A.; Pilkington, J. D. H.; Scott, P. F.; and Collins, R. A. Observation of a Rapidly Pulsating Radio Source. Nature 217, 709, 1968.
2. Guy, R. K. Modular Difference Sets and Error Correcting Codes. §C10 in Unsolved Problems in Number Theory, 2nd ed. New York: Springer-Verlag, pp. 118-121, 1994.

If you are not satisfied with the default title ("Bibliography") you can force your own title by using [[bibliography title="Custom title"]] or even do not use title at all (title="").

Include other pages

If you want to include contents of another page use:

 [[include pagename]]

The include tag should start and end with a newline.

The [[include]] tag can also take parameters and substitute variables in the included source. To denote variables in the included page use:

{$var1}, {$number_books}, {$title}, {$variable_name}, {$variableName}

and in the including page use:

 [[include pagename var1=value1 | number_books = 43 | title=Best Wiki Ever
| variable_name = just a variable
| variableName = another variable
]]

As you can see you can splid variable definitions over several lines for cleaner code.

NOTE: includes and images/files: The [[include]] works just by inserting the page source at a given place. If you have any images or files attached in the included page and you refer to them as [[image filename.jpg]] in the included page, please rather use the image/file source with the name of the page too, e.g. [[image included-page/filename.jpg]]

Embedding media

Video

To embed video directly into the page use [[embedvideo]] ... [[/embedvideo]] block.
Between the the "embedding html code" should be placed from any of the following video online galleries:

E.g.

[[embedvideo]]
<embed style="width:400px; height:326px;" id="VideoPlayback" align="middle"
type="application/x-shockwave-flash"
src="http://video.google.com/googleplayer.swf?docId=263244138622602613"
allowScriptAccess="sameDomain" quality="best" bgcolor="#ffffff" scale="noScale" salign="TL"
FlashVars="playerMode=embedded"> </embed>
[[/embedvideo]]

Audio

To embed audio use [[embedaudio]] ... [[/embedaudio]] and the html embedding code found on the audio hosting website.

Currently supported are:

E.g.

[[embedaudio]]
<embed src="http://www.odeo.com/flash/audio_player_standard_gray.swf"
quality="high" width="300" height="52" name="audio_player_standard_gray"
align="middle" allowScriptAccess="always" wmode="transparent"  
type="application/x-shockwave-flash" flashvars="audio_id=99133&audio_duration=282.0&valid_sample_rate=true&external_url=http://www.vitalpodcasts.com/FileSystem/podcasts/89/opensource_episode1.mp3" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</embed><br /><a style="font-size: 9px; padding-left: 110px; color: #f39;
letter-spacing: -1px; text-decoration: none" href="http://odeo.com/audio/99133/view">
powered by <strong>ODEO</strong></a>
[[/embedaudio]]

Embedding code from other sites

Sometimes web sites (mainly social-oriented ones) allow you to paste a code block directly into other pages in order to increase your site functionality or embed some contet from the original site.

[[embed]] tag

The [[embed]] block tag allows you to do the same with your wiki pages. E.g. to display del.icio.us tag cloud as generated from http://del.icio.us/help/tagrolls simply wrap the html code:

[[embed]]
<script type="text/javascript" src="http://del.icio.us/feeds/js/tags/michal_frackowiak?icon;size=12-35;color=87ceeb-0000ff;title=my%20del.icio.us%20tags"></script>
[[/embed]]

For the list of supported services please see the page: Embedding code from other services.

Please note that if the code contains <script type="text/javascript"… i.e. just JavaScript, the content will not be fully rendered when you click preview while editing the page. It should be there however when you view the page afterwards.

[[iframe]] element

Using the iframe element one can embed content of any other web page. The syntax is

[[iframe url-source attributes]]

and it translates into HTML tags <iframe src="url-source" attributes></iframe>. The allowed attributes are: frameborder (0 or 1 allowed), align (left, right, top, bottom, middle), height (number of pixels or %), width (number of pixels or %), scrolling (yes or no), class, style

Modules

Modules are independent widgets that can be placed in the pages. The general syntax is:
[[module ModuleName param1="value1" param2="value2" ...]]

To read more about modules see the modules section of the documantation.

Attached files

what you type what it means
[[file filename]] produces a link to a file attached to this page
[[file /another-page/filename]] produces a link to a file attached to another-page

The destination file must be first attached to the page — by clicking "files" and "upload file" from the options at the bottom of any page.

Users

what you type what you get comments
[[user user-name]]
e.g. [[user michal frackowiak]]
michal frackowiak user info (no buddy icon)
[[*user user-name]]
e.g. [[*user michal frackowiak]]
michal frackowiakmichal frackowiak user info (with buddy icon)

Social bookmarking

It is easy to add "social bookmarking" buttons to your pages — just write [[social]] (without any parameters) and get:

BlinkListblogmarksdel.icio.usdiggFarkfeedmelinksFurlLinkaGoGoNewsVineNetvouzRedditYahooMyWebFacebook

This is equivalent to:

[[social blinkbits,blinklist,blogmarks,co.mments,connotea,del.icio.us,de.lirio.us,digg,fark,feedmelinks,furl,linkagogo,ma.gnolia,newsvine,netvouz,rawsugar,reddit,scuttle,shadows,simpy,smarking,spurl,tailrank,wists,yahoomyweb,facebook]]

You can also choose only selected services, e.g. to choose digg, furl and del.icio.us use:

[[social digg,furl,del.icio.us,facebook]]

and get: diggFurldel.icio.usFacebook

Tip: use social bookmarking! It is always a good idea to put social shortcuts under an article or inside your side bar.

Standalone buttons (page options)

Somehow it might be convenient to hide the default page options and present only selected buttons to the users. The syntax for it is:

[[button type options]]

Where the type is: edit, edit-append, edit-sections, history, print, files, tags, source (view page source), backlinks, talk (works similar as in MediaWiki/Wikipedia).

Possible attributes are:

  • text — alternative text to be displayed
  • class — CSS class of the A element
  • style — CSS style definition

For some nice "view source" and "print" buttons with icons you can use the following code:

[[>]]
[[button source style="background-image: url(http://www.wikidot.com/local--files/files/view-source.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px; color: #444"]]
[[button print style="background-image: url(http://www.wikidot.com/local--files/files/document-print.png); background-repeat: no-repeat; background-position: bottom right; padding-right: 20px;color: #444"]]
[[/>]]

to get:

Layout elements

Tab view

To generate a tabview, i.e. a set of tabs, the following syntax can be used:

[[tabview]]
[[tab Title of Tab No. 1]]
Content of Tab No. 1.
[[/tab]]
[[tab Title of Tab No. 2]]
Content of Tab No. 2.
[[/tab]]
[[tab Title of Tab No. 3]]
Content of Tab No. 3.
[[/tab]]
[[/tabview]]

This will produce the following tabset:

Content of Tab No. 1.

Tabs will accept any content, but at the moment it is not possible to nest tabviews.

Another example of tabview can be found at our Snippets Wiki at http://snippets.wikidot.com/code:tabs.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License