GMU | Motion and Shape Computing Group

• Home
• People
• Research
• Publications
• Software
• Seminar
• Login
•    Search:

Wiki Formatting Guide

Once you have read through this, test your formatting skills in the SandBox.

Also see: Wikka Documentation

1. Text Formatting

2. Headers

Use between six = (for the biggest header) and two = (for the smallest header) on both sides of a text to render it as a header.

3. Horizontal separator

---

4. Forced line break

5. Lists and indents

You can indent text using a ~, a tab or 4 spaces (which will auto-convert into a tab).

~This text is indented
~~This text is double-indented
    This text is also indented


To create bulleted/ordered lists, use the following markup (you can always use 4 spaces instead of a ~):

Bulleted lists
~- Line one
~- Line two

• Line one
• Line two

Numbered lists
~1) Line one
~1) Line two

1. Line one
2. Line two

Ordered lists using uppercase characters
~A) Line one
~A) Line two

1. Line one
2. Line two

Ordered lists using lowercase characters
~a) Line one
~a) Line two

1. Line one
2. Line two

Ordered lists using roman numerals
~I) Line one
~I) Line two

1. Line one
2. Line two

Ordered lists using lowercase roman numerals
~i) Line one
~i) Line two

1. Line one
2. Line two

6. Inline comments

To format some text as an inline comment, use an indent ( ~, a tab or 4 spaces) followed by a &.

Example:

~& Comment
~~& Subcomment
~~~& Subsubcomment

• Comment
  • Subcomment
    • Subsubcomment

7. Images

To place images on a Wiki page, you can use the image action.

Example:


Links can be external, or internal Wiki links. You don't need to enter a link at all, and in that case just an image will be inserted. You can use the optional classes left and right to float images left and right. You don't need to use all those attributes, only url is required while alt is recommended for accessibility.

8. Links

To create a link to a wiki page you can use any of the following options:

1. type a WikiName:
   
   FormattingRules
   FormattingRules
   
   
2. add a forced link surrounding the page name by [[ and ]] (everything after the first space will be shown as description):
   
   [[SandBox Test your formatting skills]]
   Test your formatting skills
   
   [[SandBox 沙箱]]
   沙箱
   
   
3. add an image with a link (see instructions above).

To link to external pages, you can do any of the following:

1. type a URL inside the page:
   
   http://www.example.com
   http://www.example.com
   
   
2. add a forced link surrounding the URL by [[ and ]] (everything after the first space will be shown as description):
   
   [[http://example.com/jenna/ Jenna's Home Page]]
   Jenna's Home Page
   
   [[mail@example.com Write me!]]
   Write me!
   
   
3. add an image with a link (see instructions above);
4. add an interwiki link (browse the list of available interwiki tags):
   
   WikiPedia:WikkaWiki
   WikiPedia:WikkaWiki
   
   Google:CSS
   Google:CSS
   
   Thesaurus:Happy
   Thesaurus:Happy
   
   

9. Tables

Tables can be created using two pipe (||) symbols. Everything in a single line is rendered as a table row.

Example:

||Cell 1||Cell 2||

Cell 1

Cell 2

Header cells can be rendered by placing an equals sign between the pipes.

Example:

|=|Header 1|=|Header 2||
||Cell 1||Cell 2||

Header 1	Header 2
Cell 1	Cell 2

Row and column spans are specified with x: and y: in parentheses just after the pipes.

Example:

|=| |=|(x:2)Columns||
|=|(y:2) Rows||Cell 1||Cell 2||
||Cell 3||Cell 4||

	Columns
Rows	Cell 1	Cell 2
	Cell 3	Cell 4

Many additional features are available using table markup. A more comprehensive table markup guide is available on this server's TableMarkup page. A complete syntax reference is available on this server's TableMarkupReference page.

10. Colored Text

Colored text can be created using the color action:

Example:


You can also use hex values:

Example:


Alternatively, you can specify a foreground and background color using the fg and bg parameters (they accept both named and hex values):

Examples:

11. Floats

To create a left floated box, use two < characters before and after the block.

Example:


Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler.

To create a right floated box, use two > characters before and after the block.

Example:


Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler. Some more text as a filler.

Use ::c:: to clear floated blocks.

12. Code formatters

You can easily embed code blocks in a wiki page using a simple markup. Anything within a code block is displayed literally.
To create a generic code block you can use the following markup:



To create a code block with syntax highlighting, you need to specify a code formatter (see below for a list of available code formatters).



You can also specify an optional starting line number.



If you specify a filename, this will be used for downloading the code.



List of available code formatters:

LANGUAGE	FORMATTER	LANGUAGE	FORMATTER	LANGUAGE	FORMATTER
ABAP	abap	Actionscript	actionscript	ADA	ada
Apache Log	apache	AppleScript	applescript	ASM	asm
ASP	asp	AutoIT	autoit	Axapta/Dynamics Ax X++	xpp
Bash	bash	BlitzBasic	blitzbasic	BNF	bnf
C	c	C for Macs	c_mac	c#	csharp
C++	cpp	C++ (QT extensions)	cpp-qt	CAD DCL	caddcl
CadLisp	cadlisp	CFDG	cfdg	ColdFusion	cfm
CSS	css	D	d	Delphi	delphi
Diff-Output	diff	DIV	div	DOS	dos
dot	dot	Eiffel	eiffel	Fortran	fortran
FOURJ's Genero 4GL	genero	FreeBasic	freebasic	GML	gml
Groovy	groovy	Haskell	haskell	HTML	html4strict
INI	ini	IO	io	Inno Script	inno
Java 5	java5	Java	java	Javascript	javascript
LaTeX	latex	Lisp	lisp	Lua	lua
Matlab	matlab	Microchip Assembler	mpasm	Microsoft Registry	reg
mIRC	mirc	Motorola 68000 Assembler	m68k	MySQL	mysql
NSIS	nsis	Objective C	objc	OpenOffice BASIC	oobas
Objective Caml	ocaml	Objective Caml (brief)	ocaml-brief	Oracle 8	oracle8
Pascal	pascal	Per (forms)	per	Perl	perl
PHP	php	PHP (brief)	php-brief	PL/SQL	plsql
Python	phyton	Q(uick)BASIC	qbasic	robots.txt	robots
Ruby	ruby	Ruby on Rails	rails	SAS	sas
Scheme	scheme	sdlBasic	sdlbasic	SmallTalk	smalltalk
Smarty	smarty	SQL	sql	TCL/iTCL	tcl
T-SQL	tsql	Text	text	thinBasic	thinbasic
Unoidl	idl	VB.NET	vbnet	VHDL	vhdl
Visual BASIC	vb	Visual Fox Pro	visualfoxpro	WinBatch	winbatch
XML	xml	ZiLOG Z80	z80

13. Mindmaps

Wikka has native support for mindmaps. There are two options for embedding a mindmap in a wiki page.

Option 1: Upload a FreeMind file to a webserver, and then place a link to it on a wikka page:
http://yourdomain.com/freemind/freemind.mm
No special formatting is necessary.

Option 2: Paste the FreeMind data directly into a wikka page:

• Open a FreeMind file with a text editor.
• Select all, and copy the data.
• Browse to your Wikka site and paste the Freemind data into a page.

14. Embedded HTML

You can easily paste HTML in a wiki page by wrapping it into two sets of doublequotes.


Examples:



By default, some HTML tags are removed by the SafeHTML parser to protect against potentially dangerous code. The list of tags that are stripped can be found on the SafeHTML documentation page.

It is possible to allow all HTML tags to be used, see Docs:UsingHTML for more information.

15: LaTeX Equations

(Plugin by Christopher Vo) You can embed images of LaTeX equations in the code using the latexrender environment.

Basics:

To start the LaTeX equation rendering environment, use:
%%(latexrender)
and to end the LaTeX equation rendering environment, use:
%%

Inside the LaTeX equation rendering environment, you can mix text and equations, to inline formulas in your explanations. To insert an equation, enclose it with the tex tag:
[tex] and [/tex]

Example output:

This is an example LaTeX equation: , and another:



How to make matrices in the latexrender environment:



How to make case statements in the latexrender environment:

Code for example (from above):

%%(latexrender)
This is an example LaTeX equation: [tex]\sqrt{e^{\frac{1}{2}}}[/tex], and another:

[tex]
a \Leftrightarrow 2\pi a\sum\limits_{k = - \infty }^\infty
{\delta (\omega + 2\pi k)} ,( - \infty < n < \infty )
[/tex]

How to make matrices in the latexrender environment:

[tex]
a=\left[\begin {array}{ccc}
9&13&17\\
14&18&22
\end {array} \right]
[/tex]

How to make case statements in the latexrender environment:

[tex]
c[i,j] =
\begin{cases}
0 & \text{if $i=0$ or $j=0$}\\
c[i-1][j-1]+1 & \text{if $i,j>0$ and $x_i = y_i$}\\
max(c[i,j-1],c[i-1,j]) & \text{if $i,j>0$ and $x_i \neq y_j$}
\end{cases}
[/tex]

16. Directed Graphs (dot)

(Plugin by Christopher Vo) See the official GraphViz documentation for syntax. In the wiki, it works like the LaTeX environment (see above). Start up the "graphviz" environment and start putting blocks of code within [dot][/dot] tags.

Example:


Produced By:

%%(graphviz)
[dot]
digraph finite_state_machine {

rankdir=LR;
size="8,5"
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
node [shape = circle];
LR_0 -> LR_2 [ label = "SS(B)" ];
LR_0 -> LR_1 [ label = "SS(S)" ];
LR_1 -> LR_3 [ label = "S($end)" ];
LR_2 -> LR_6 [ label = "SS(b)" ];
LR_2 -> LR_5 [ label = "SS(a)" ];
LR_2 -> LR_4 [ label = "S(A)" ];
LR_5 -> LR_7 [ label = "S(b)" ];
LR_5 -> LR_5 [ label = "S(a)" ];
LR_6 -> LR_6 [ label = "S(b)" ];
LR_6 -> LR_5 [ label = "S(a)" ];
LR_7 -> LR_8 [ label = "S(b)" ];
LR_7 -> LR_5 [ label = "S(a)" ];
LR_8 -> LR_6 [ label = "S(b)" ];
LR_8 -> LR_5 [ label = "S(a)" ];

}
[/dot]
%%

17. Undirected Graphs (neato)

(Plugin by Christopher Vo) See the official GraphViz documentation for syntax. In the wiki, it works like the LaTeX environment (see above). Start up the "graphviz" environment and start putting blocks of code within [neato][/neato] tags.

Example:


Produced By:

%%(graphviz)
[neato]
graph ER {

node [shape=box]; course; institute; student;
node [shape=ellipse]; {node [label="name"] name0; name1; name2;}
code; grade; number;
node [shape=diamond,style=filled,color=lightgrey]; "C-I"; "S-C"; "S-I";
name0 -- course;
code -- course;
course -- "C-I" [label="n",len=1.00];
"C-I" -- institute [label="1",len=1.00];
institute -- name1;
institute -- "S-I" [label="1",len=1.00];
"S-I" -- student [label="n",len=1.00];
student -- grade;
student -- name2;
student -- number;
student -- "S-C" [label="m",len=1.00];
"S-C" -- course [label="n",len=1.00];

}
[/neato]
%%

18. Flash Video Action

(Plugin by Christopher Vo) Flash video from popular sites (currently, Youtube, Google Video, Blip.tv and Vimeo) can be embedded using the flashvideo action and the typical url of the video as in these examples:


By default, the video is 480 x 385. You can also specify the width and height of the video manually:


Playlist also supported:

19. Flowplayer (FLV Videos) Action

(Plugin by Christopher Vo) This lets you include arbitrary FLV files that are not on a hosted site like Youtube. It accepts FLV (Preferred), MP4, and H.264 formats.


By default, the video is 425 x 300. You can also specify the width and height of the video manually:


Encoding Tips: You will get the best results using FLV files, encoded with Adobe Media Encoder (usually bundled with Adobe Premiere CS4 or Flash CS4). On Mac OS X, you can use a free graphical tool called ffmpegX. Also see: Basic conversion tutorial for flowplayer videos, Using FFMPEG on command line, Using Mencoder.

For streaming, you will need to make sure the FLV file has sufficient meta-data generated to allow the user to skip around in the file: this can be done with a tool called flvtool2 with the command:

19. BibTeX Formatting

(Plugin by ChristopherVo)

Note the addition of the "wikiurls" attribute which allows you to add links to your paper or web site. Just list the links in the wiki format as shown above. Don't worry, this attribute will not display in the generated BibTeX snippet. There's also a "note" attribute which will be appended to your entry (for things like "to appear" or "also in tech report").

Just use a code block with the "bibtex" type like this:

%%(bibtex)
@INPROCEEDINGS{vo-panait-luke-09
}%%

Which produces this output:


The plugin support some small subset of BibTeX accents, kind of like this:

%%(bibtex)
@INPROCEEDINGS{test-bibtex
}%%

Which produces:

20. BibTeX Inclusion

You can also include an entire BibTeX file using syntax like this:

{{bibtex file="uploads/SandBox/stuff.bib"}}

If you would like to show only a few citations, you can add a comma-delimited list of them in the tags parameter. For example:

{{bibtex file="uploads/SandBox/stuff.bib" tags="vo-panait-luke-09, vo-harrison-lien-09"}}

If you would like to highlight an author, you can use the syntax like this: (added by ZhonghuaXi 7/22/2013)

{{bibtex file="uploads/hgbib/masc.bib" tags="Lu:2013a" highlight="Zhonghua Xi"}}

If you would like to show the citations with specific authors, you can use the syntax like this: (added by ZhonghuaXi 7/23/2013)

{{bibtex file="uploads/hgbib/masc.bib" authors="Yanyan Lu"}}

Notice: filters on authors are in OR relationship, below link will show the papers written by "Yanyan Lu" OR "Christopher Vo"

{{bibtex file="uploads/hgbib/masc.bib" authors="Yanyan Lu, Christopher Vo"}}

BTW, it will highlight the first author in 'authors' tag if 'highlight' tag is not specified.

If you would like to show the citations in specific years , you can use the syntax like this: (added by ZhonghuaXi 7/23/2013)

{{bibtex file="uploads/hgbib/masc.bib" years="2013,2012,2011,2010"}}

If you would like to show the citations with specific keywords, you can use the syntax like this: (added by ZhonghuaXi 8/21/2013)

{{bibtex file="uploads/bib/masc.bib" keywords="ACD"}}

If you would like to show the citations with specific entry type, you can use the syntax like this: (added by ZhonghuaXi 2/9/2015)

{{bibtex file="uploads/hgbib/masc.bib" types="inproceedings"}}
{{bibtex file="uploads/hgbib/masc.bib" types="techreport, unpublished"}}

If you would like to show the summary of the paper, you can use the syntax like this: (added by ZhonghuaXi 2/12/2015)
{{bibtex file="uploads/hgbib/origami.bib" tags="zhou2014boxelization,balkcom2008robotic,song2004motion", summary="true"}}

21. Obj Viewer

(Plugin by ZhonghuaXi)

ObjViewer allow you to display a 3D model online.

Syntax:
{{objviewer url="http://masc.cs.gmu.edu/wiki/uploads/ObjViewer/flight.obj" width="600" height="480" dropable="true"}}

Notice: an absolute url is preferred here, or using "/wiki/uploads/..."
if dropable is set to true, you can drop any local obj file onto canvas

default width and height will be both 360px

---

CategoryWiki

Computer Science @ George Mason University