Help:Formatting

This page lists formatting codes or tricks that can be used to help format wiki pages. It includes MediaWiki tags, table formatting, and HTML tags.

This page is missing information. You can help YumeWiki by expanding it. Details: Needs reordering. Should explain how to set up a table. Templates and parser functions could also be included, but they may be suitable for separate pages.

Wikitext

Function	Example	Output
New paragraph	Put two line breaks	Put two line breaks
Bold text	'''text'''	text
Italics	''text''	text
Bullet point (unordered) list	*One *Two **Sub-point *Three	One Two Sub-point Three
Numbered (ordered) list	#One #Two ##Sub-point #Three	One Two Sub-point Three
Make new headings	==Main== Text ===Sub=== Text	Can't show this
Links
Link to a page (wikilink)	[[Yume Nikki:Madotsuki|Madotsuki]]	Madotsuki
Link to a section on a page	[[Yume Nikki:Madotsuki#Madotsuki's Dreams|her dreams]]	her dreams
Link to a category or file by prepending a comma	[[:Category:Yume Nikki FC Locations|List of FC Worlds]]	List of FC Worlds
Link to wikipedia (interwiki link)	[[wikipedia:Main Page|Visit Wikipedia]]	Visit Wikipedia
External link	[https://mediawiki.org/wiki/Cheatsheet MediaWiki's cheatsheet]	MediaWiki's cheatsheet
Images
Image with a caption	[[File:Yume favicon.png|70px|thumb|right|An image]]	An image
Image in a gallery	<gallery> Yume favicon.png|An image </gallery>	An image

Characters

Character	Usage
␤ U+000A 
	Using the HTML entity for a newline lets you avoid it getting stripped by parser functions.
U+0020  	Spaces are also stripped by parser functions.
# U+0023 #	The number sign, also called a pound or hash symbol. The HTML entity can allow escaping certain situations.
& U+0026 &	Ampersand, usually called the and symbol. The HTML entity can allow escaping certain situations. Used in this table to present the HTML entities.
, U+002C ,	Commas are usually chosen as the separator for fields in arrays or {{TextSpace}}. The HTML entity allows can prevent this, although nowiki tags are a safer option.
| U+007C | |	The pipe character, also called the vertical line or bar, is used extensively for Mediawiki parsing. The HTML entity escapes these situations. To delay the parsing instead of prevent it completely, use {{!}}.
· U+00B7 · ·	Solid dot that is in the middle of a line.
← U+2190 ←	Leftwards arrow as one character.
↑ U+2191 ↑	Upwards arrow as one character. Can be used for "to top" links.
→ U+2192 →	Rightwards arrow as one character. Used when listing directions on location pages.
↔ U+2194 ↔	Arrow that points both left and right. Can be used to show a relation between two elements.
∕ U+2215	Division slash, which appears to be a forward slash. Since it has the same appearance but no function, it can help with presenting HTML.
＜ U+FF1C	Fullwidth less-than sign. Presented wider than the normal one <.
＞ U+FF1E	Fullwidth greater-than sign >. Presented wider than the normal one >.

Tags

Function	Example	Output
Prevent all wiki markup and HTML tags from being parsed	<nowiki>'''text'''</nowiki>	'''text'''
Completely preformat text: wiki markup, template calls, links, parser functions, HTML codes, and comments are completely ignored and are treated as raw text	<pre>text</pre>	'''text'''
Monospaced blocks of text	<pre style="font-family:monospace;">text</pre>	text
Apply a background to signify text is code	<code>text</code>	text
Underline	<u>text</u>	text
Highlight	<mark>text</mark>	text
Hide text under a spoiler	<span class="spoiler">text </span>	text
Center elements	<center>text</center>	text
Superscript	text<sup>text</sup>	texttext
Subscript	text<sub>text</sub>	texttext
Small text	<small>text</small>	text
Big text	<big>text</big>	text
Defines a header using HTML, equivalent to ===this=== Header levels can be from 1-6 but usually 4 is the highest	<h3>ctrt</h3>	(blanked)
Force a line break	text1<br>text2	text1 text2
Force following text to appear below all floating elements instead of flowing adjacent. No difference on mobile.	[[File:Cagedfairy.png |thumb|right|Text]] <br clear=all> text	Text text
	[[File:Cagedfairy.png |thumb|right|Text]] text	Text text
Blockquote (indent)	<blockquote>text</blockquote>	text
Create an invisible link anchor: Help:Formatting#aexgda. This can be placed within a header (inside of the equal signs) to make an alternate header link.	<span id="Anchor"></span>
Comments: only present when editing, unless within <pre> or <nowiki> tags.	<!--text-->

HTML Styles and Classes

Function	Style/Class	Output
Center elements; equivalent to using <center>	style="text-align: center;"	text
Format text into a specified number of columns (or use "auto")	style="column-count: 2;"	text1 text2 text3
Present elements adjacent to each other. In the example it shows that you can place an image next to a gallery, which is usually not possible.	style="display: flex; flex-direction: row;"	Text Text
Collapsible Sections
Allows text to be collapsed	class="mw-collapsible"	text1 text2
Collapsed by default	class="mw-collapsible mw-collapsed"	text1 text2
Gives the content the style of the table of contents	class="toccolours mw-collapsible"	text1 text2
Use inside a div with mw-collapsible and only the text inside this inner div will collapse. The rest will never collapse.	class="mw-collapsible-content"	<div class="toccolours mw-collapsible mw-collapsed">text1<div class="mw-collapsible-content">text2</div></div>
		text1 text2
Custom toggle button for a collapsible section. Stays the same when pressed.	class="mw-collapsible-toggle"	<div class="mw-collapsible"> <div class="mw-collapsible-toggle mw-collapsible-text">[Show/Hide]</div> <div class="mw-collapsible-content" >text </div></div>
		[Show/Hide] text

List Formatting

Function	Example	Output
Unordered list; equivalent to using * at the start of a line	<ul> <li>text1</li> <li>text2</li> <li>text3</li> <li>text4</li> </ul>	text1 text2 text3 text4
This list style forces floating elements such as image thumbs to appear on the same line, even if they are otherwise unable.	<ul> <li style="display: inline-block;>[[File:Cagedfairy.png|thumb|Text]]</li> <li style="display: inline-block;">[[File:Boyoutline.png|thumb|Text]]</li> </ul>	Text Text
This list style can be used in addition to the previous one to align the elements to the top, middle, or bottom of the lines they are occupying.	<ul> <li style="display: inline-block; vertical-align: middle;">[[File:Cagedfairy.png|thumb|Text]]</li> <li style="display: inline-block; vertical-align: middle;">[[File:Boyoutline.png|thumb|Text]]</li> </ul>	Text Text

Tables

Code	Usage
class="wikitable"	Use at the table start to make it look like a standard table.
class="sortable"	Adding this class to a table will allow you to sort the entire table by columns of your choice.
class="mw-collapsible mw-collapsed"	This will allow the table to be collapsed. Removing mw-collapsed means it will be expanded by default. A table caption specified using |+Caption will be shown next to the expand/collapse button.
class="unsortable"	This class can be used on column headers to disable sorting the table by that column.
width="100%"	At the table start, forces the table to fit a percentage of the screen width. At the first row of a column, forces that column to fit a percentage of the table width.
style="text-align: center;"	At the table start, centers all text in the table. On a table cell, centers the cell contents.
style="vertical-align: top;"	Change the vertical alignment of elements in a cell (the default is middle).

Making a table

This is how to make a table in the standard way of wikitext:

{| class="wikitable" <!-- table start, put table styles here -->
|+ Caption <!-- title the whole table -->
|- <!-- new row -->
! Header <!-- bold and doesn't get sorted -->
! Other
|- <!-- new row -->
| Text1 <!-- table cell -->
| Text2
|} <!-- table end -->

The example above produces the following table:

Caption

Header	Other
Text1	Text2

In some cases the use of pipe characters for table markup causes issues with templates or functions. To prevent this, you may wish to construct a table using HTML tags instead:

<table class="wikitable"> <!-- table start -->
<caption> Caption </caption> <!-- title the whole table -->
<tr> <!-- open a row -->
<th> Header </th> <!-- open and close a header -->
<th> Other </th>
</tr><tr> <!-- close row, open another -->
<td> Text1 </td> <!-- table cell -->
<td> Text2 </td>
</tr></table> <!-- close row then table -->

The example above produces the following table:

Caption

Header	Other
Text1	Text2

Notice how the two tables are exactly the same.

Other

Code	Usage
resultsheader= «pre»«nowiki»|resultsfooter= «/nowiki»«/pre»	Add to the end of a DPL parser function and the output will be unformatted.