Project

General

Profile

RedmineWikiFormatting

Table of Contents

The table of contents below was typed by hand using Bulleted Lists and Anchors.
The yellow table of contents to the right was automatically generated using the {{toc}} tag (technically the {{>toc}} tag which aligns the table to the right), but it only makes links to Headers and not to Anchors.

Basic: Text Formatting

General

You should left-justify your input text. Putting white-space at the beginning of a line makes Redmine/RedCloth/Textile think you want it pre-formatted. Sometimes. So try not to do that.

Bold

Put double-asterisks around the text you want to bold. For example, **text** results in text.

Italics

Put double-underscores around the text you want italicized. For example, __text__ results in text.

Underline

Put plus signs around the text you want underlined. For example, +text+ results in text.

Strong

Put single asterisks around the text you want to be strong. For example, *text* results in text.
Strong is very similar to Bold.

Emphasis

Put single underscores around the text you want to be emphasized. For example, _text_ results in text.
Emphasis is very similar to Italics.

Citation

Put double-question marks around the text you want to be formatted like a citation. For example, ??book title?? results in book title.
Citation is very similar to Italics.

Strikethrough

Put hyphens around the text you want to be strikethroughed. For example, -text- results in text.
This is useful when a correction needs to be confirmed by more than one person.

Monospaced Text

Put at symbols (@) around the text you want to be monospaced. For example, @code@ results in code.

Superscript

Put carets (^) around the text you want to be superscripted. For example, ^citation needed^ results in citation needed.

Subscript

Put tildes (~) around the text you want to be subscripted. For example, ~footnote~ results in footnote.

Combining format tags

If you want text to be both bolded and italicized, then put double-asterisks and double-underscores around the text you want to be bold-italicized. For example, __**text**__ results in text.
By combining format tags you can do lots of weird things like this.
Unfortunately, there is a limit as to how many format tags can be done at a time; attempting to make superscripted italicized bolded underlined strikethroughed text results in **-this-**.

Intermediate: Wiki Formatting

Headers

Start any header you want with h1. h2. or h3.
For example, "h2. Intermediate: Wiki Formatting" resulted in the header above.
Use of headers h4. h5. and h6. are discouraged as they don't generate Anchors and therefore do not show up in an automatically generated Table of Contents. Also, their font is way too small.

To have numbered headers, use "h2(count). Name of the header" Note that the period comes after the (count). This applies down to many levels such as, "h3(count). Name of subheading" "h3(count). Name of next subheading."

Preformatted Text

Use the <pre></pre> tags to put preformatted text in a box. It is useful for containing programming code where spaces are required for readability.

#include <iostream>
for (int i=0; i<10; i++)
    std::cout << i;

Code Highlighted Text

Adding an extra tag to the <pre> tag enables pretty code highlighting.
For example, C++ code contained between the <pre><code class="cpp"> </code></pre> tags looks like this:

#include <iostream>
for (int i=0; i<10; i++)
    std::cout << i;

Code classes supported by this tag are c, cpp, css, delphi, groovy, html, java, javascript, json, php, python, rhtml, ruby, scheme, sql, xml and yaml.

Block Quotations

Block quotations are basically fancy indents.
Put bq. in front of the paragraph to be block quoted.

Footnotes

To make a footnote tag, end a sentence with a number surrounded by brackets followed by a period. For example, putting a [1]. at the end of this sentence results in this1.

1 Add a footnote by putting "fn#." in front of the source, where # is a number (i.e. fn1.).
This tag follows the same paragraph rules as p-tags (see Separating Paragraphs).

Tooltips

Hovor your mouse cursor over this TOOLTIP
Now, make your own tooltip by writing the 3-or-more letter word you want "tooltipable" IN ALL CAPS and putting the definition in (parenthesis) without putting a space between the word and the definition.
For example, ESH(Environment, Safety, and Health) results in ESH

To make a basic url, just type the link. For example, http://fnal.gov results in http://fnal.gov
To make text go to a url, put the text in quotes (""), follow the text with a colon (:), then follow the colon with the url. For example, "Fermilab":http://fnal.gov results in Fermilab

Images

To put an image in a wiki, put exclamation marks around the url to the image.
For example, !http://fnal.gov/fnalincludes/images/logo-fnal.jpg! results in:

To resize an image to be 100px wide and 100px tall, add {width:100px;height:100px} after the first ! but before the image url.
For example, !{width:100px;height:100px}http://fnal.gov/fnalincludes/images/logo-fnal.jpg! results in

To align an image to the right, add a > after the first ! but before the image url.
For example, !>http://fnal.gov/fnalincludes/images/logo-fnal.jpg! results in the image to the right.

Tooltipped Hyperlinked Images

!http://fnal.gov/fnalincludes/images/logo-fnal.jpg(Fermilab)!:http://fnal.gov results in:
Fermilab

Attachments

At the bottom of this page is an attachments section. To link to an attachment in that section, simply type attachment:fermilab_logo.jpg, where fermilab_logo.jpg is the name of the attachment. In case you were wondering, here's what the attachment link looks like: fermilab_logo.jpg

Redmine does not natively support linking to attachments from other wiki pages.

Image Attachments

Embedding an image attachment is just like embedding an image from a URL; just put the name of the attached image between exclamation points.
For example, !fermilab_logo.jpg! results in this:

The Fermilab Logo from http://www.fnal.gov

Redmine does not natively support embedding image attachments from other wiki pages.
For more information about images in general, see Images

Linking to Other Wiki Pages

Typing [[Overview]] results in Overview. That's all it takes to create a quick hyperlink to the Fermilab Redmine Overview wiki page.
In the event that you want to link to the Overview wiki page but want the link text to be "OV", type [[Overview|OV]], which results in OV.

Anchors

Creating a Header automatically creates an anchor, where the anchor tag is the same as the header text except with the spaces replaced with hyphens and punctuation removed. Typing [[RedmineWikiFormatting#Table-of-Contents|top of this page]] will create an anchor that goes all the way back to the table of contents at the top of this page.

Alternatively, an anchor can be placed anywhere in a wiki page by putting this tag in front of a paragraph or line in the age: p(#anchortag). Note the period at the end of the tag; it's very important.
For example, there is a p(#Anchors). tag in front of the bolded "Anchors" above. If [[RedmineWikiFormatting#Anchors|AnchorLink]] is typed, it results in this AnchorLink which leads to this very section of this wiki page. This is how the links in the Table of Contents work.

Also note that the p(#anchortag). anchor is a p-tag (see What are p-tags?).

Notextile

In the event that textile messes up your wiki page in an undesirable way, you can disable it using the <notextile></notextile> tags.
For example, if you want to use the caret symbol (^) without superscripting your text, surround the caret with the <notextile></notextile> tags, like this: <notextile>^</notextile>.
The <notextile> tag is what made this wiki page possible.

Advanced: Formatting with p-tags, Styles, and Spans

What are p-tags?

"p-tags" are tags that start with the letter p and end with a period. One can say that the "p" in "p-tag" stands for "paragraph" because this tag formats entire paragraphs. p-tags let you do some interesting things, as you will see in the sections below.

Separating Paragraphs

Lines separated only by a single line break are considered to be part of the same "paragraph".
There is an indentation p-tag in front of the first line of this paragraph, and that tag indents the whole paragraph.
p((. Attempting to put another p-tag, such as a double-indent, on a different line of the same paragraph doesn't work.

Lines separated by two line breaks are considered to be separate paragraphs,
Here, putting a double-indent p-tag works because the tag is at the beginning of a new paragraph rather than at the middle or the end of an old paragraph.

Indentations

Almost every line of this wiki page is indented.

Put p(. in front of the paragraph you want indented.

Put p((. in front of the paragraph you want double-indented

Put p(((. in front of the paragraph you want triple-indented

And so on and so forth.

Text Alignment

Put p<. in front of a paragraph you want aligned to the left.
To be honest, redmine by default aligns text to the left, so this tag is somewhat useless.

Put p>. in front of a paragraph you want aligned to the right.

Put p=. in front of the paragraph you want aligned at the middle.

Full Justification

Put p<>. in front of the paragraph you want justified.
Since the justified tag only works with large paragraphs, here are a few lines of latin gibberish to illustrate what the justified tag actually does:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

As compared to text that is not justified. Note the right edge of this paragraph:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

What are Styles?

Styles are a set of formatting tags that are enclosed in {curly braces}. They can be inserted into p-tags, but they can also be inserted into Spans, Tables and even Images.

Colored Text & Highlighting

Everyone loves colored text.
This text was made blue by putting this tag in front of the first line of this paragraph: p{color:blue}.

Similarly, this text was made this funky color by putting p{color:#CBA321} in front of this paragraph.

This text was highlighted by putting the p{background:yellow}. tag in front of this paragraph.

Different Fonts

This paragraph uses the Times New Roman font. Put the p{font-family:Times New Roman}. tag in front of a paragraph to convert it to Times New Roman. Yes.

Font Size

This paragraph was made 200% times larger than normal by having the p{font-size:200%}. tag in front of it.

This paragraph was made even larger by having the p{font-size:30px}. tag in front of it.

Combining p-tags & styles

Fit whatever you can between the p and the . in a p-tag to create some interesting formats.

Putting p(())))>{color:green;font-size:150%}. in front of this line results in large green text aligned to the right with two indents at the left and four indents at the right.
Note the semicolon between the color:green and the font-size:150%.

Spans

Spans are capable of applying attributes such as color and font size to individual words or phrases within a paragraph. The span tag itself is the percent sign. A boring span can be made by surrounding a phrase with two percent signs like %this%. Nothing to it.
The fun comes when styles come into play. Styles are inserted into spans by putting a style inside parenthesis and putting the parenthesis in front of the first %. For example, typing %({color:white;background:black})awesomeness% results in awesomeness.

Also, if you want to make a span class, just put the class name in between the parenthesis of the span tag. For example, I created the span class "roflcopter" by surrounding this entire paragraph with %(roflcopter) % tags.

Span classes and span styles can be combined; just keep the class and {style} separate from each other but still inside the parenthesis, like this: %(awesomeness{background:#FFFFFF}) %

Lists

Bulleted Lists

To make a bullet point, put an asterisk plus a space in front of the text you want to have a bullet point. For example,
* point 1
results in:

  • point 1

Putting multiple asterisks in front of a point, like
* point 1
** point A
*** and so on
**** and so forth
results in:

  • point 1
    • point A
      • and so on
        • and so forth

The Table of Contents was constructed using bullet points.

Numbered Lists

Making a numbered list is identical to making a bulleted list, except the asterisks (*) are replaced with number signs (#). For example,
# step 1
results in:

  1. step 1.

Repeat for additional steps.

  1. step 1
  2. step 2
  3. step 3

Multiple number signs work similarly to multiple asterisks in bulleted lists.
# Step 1
# Step 2
## Step 2.1
### Step 2.1.1
results in:

  1. Step 1
  2. Step 2
    1. Step 2.1
      1. Step 2.1.1

Combo Lists

  • By mixing together asterisks
    1. and number signs
    2. It is possible to make very complicated lists.
      • such as this one
  • However,
    1. try not to mix together
      • asterisks and number signs
        1. at the same level
          • or else the list will indent itself
            1. and make absolutely no sense.

Tables

Basic Tables

Basic tables are relatively easy. They are created using the vertical line symbol.
For example, |Unit 1|Unit 2|Unit 3| results in:

Unit 1 Unit 2 Unit 3

For multidimensional tables, just add a line break.

|Apple|Balloon|
|Cat|Dog|

results in:

Apple Balloon
Cat Dog

Table Titles

Putting _. in front of a table entry will turn the entry into a title.
Which, admittedly, is the same thing as bolding that particular entry (see Bold).

|_. title|
|object|

results in:

title
object

Table Backgrounds

The {background:#ffffff}. tag colors the background of the table cells with the color #ffffff (that is, white). Note the period at the end of the tag. For best performance, the tag should be followed by a single space.
Putting the tag before a row of a table colors the background of the entire row. For example,

{background:#dddddd}. |has|gray|background|
|has|no|background|

results in

has gray background
has no background

Putting the tag inside a cell of a table colors the background of that single cell. For example,

|{background:red}. red|white|
|white|{background:cyan}. blue|

results in

red white
white cyan

Table Borders

This tag changes the thickness, type, and color of the border of the table.

{border:5px dotted orange}. |has|border|
|no|border|

results in

has border
no border

Attributes for the type of border include solid, dashed, and dotted.

Text Alignment in Tables

|<. align left |
|>. align right|
|=. center |
|<>. justify |
|^. align top |
|~. align bottom |

results in:

align left
align right
center
justify
align top
align bottom

Table Cell Size

Putting the \#. tag in front of an entry of a table cell makes that particular table cell # times as wide as a normal cell.
This table:

|column 1|column 2|
|\2. Two cells wide|
|column 1|column 2|

results in this:

column 1 column 2
Two cells wide
column 1 column 2

Similarly, putting the /#. tag in front of an entry of a table cell makes that particular table cell # times as tall as a normal cell.
This table:

|1|/3. Tall|2|
|3|4|
|5|6|
|7|8|

results in this:

1 Tall 2
3 4
5 6
7 8

Combining Table Tags

By combining different table tags, some crazy tables can be constructed.
This table,

table{border:3px solid black}.
|={background:gray;border:dashed silver}. X|\3. *Columns*|
|/4. *Rows*|1|2|3|
|2|4|6|
|3|6|9|
|4|8|12|

results in this:

X Columns
Rows 1 2 3
2 4 6
3 6 9
4 8 12

Lists in Tables?

Unfortunately, it is not possible to put a list inside a table (see Lists)

Local Additions

Latex Formulas

We have a site-local "latex" macro, you group it with curly braces and put
latex code in parenthesis as an argument to the macro: So a simple example:

for {{latex($x_3 + y_4$)}} we do...

for $x_3+y_4$ we do...

Or a more complex example:

{{latex(
\begin{displaymath}
\begin{array}{rcl}
f: R^3 R^2 & \to & R_1 \\
(x,y,z) & \to & x y z \\
f(x,y,z) & = & x y z
\end{array}
\end{displaymath}
)}}

\begin{displaymath}
\begin{array}{rcl} 
  f: R^3   R^2 & \to & R_1 \\ 
 (x,y,z) & \to & x   y   z \\ 
f(x,y,z) & = & x   y   z 
\end{array} 
\end{displaymath}

Other Things

Notes

The Redmine Wiki is based on RedCloth, which is a mostly-but-not-quite complete implementation of the Textile Markup Language in Ruby.
While this guide attempts to cover everything that can be done in a Redmine Wiki, there may be some obscure undocumented formatting ability that works in Fermilab's Redmine which doesn't appear here.
Some things, such as fancy quotes & dashes and HTML code have been confirmed to not work in Fermilab's Redmine.
Some combinations of various format tags, such as putting together text alignment and lists or putting together lists and tables, just don't work.
Most of the formatting tricks listed here were found in the Redcloth & Textile references listed below:

http://redcloth.org/hobix.com/textile/quick.html
http://redcloth.org/textile/

RedmineTextileTesting

Below is a wiki page where I tested which things work and which things don't work on Fermilab's Redmine wiki system.

RedmineTextileTesting

Redmine Source Code For This WikiPage

If you want the source code for this WikiPage for any reason, feel free to download it from the attachments below, or by clicking this link: RedmineWikiFormatting.redmine

-- Jeremy Tang - Summer 2011