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.

Basic List

This section lists the high-use formatting that is most likely to be useful when editing.

This article is a stub. You can help YumeWiki by expanding it. Details: The full list should be reviewed first.

Full List

Characters

Character	Usage
# U+0023 #	The number sign, also called a pound or hash symbol. The HTML entity can allow escaping certain situations.
& U+0023 &	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 >.

General

Code	Example Input	Output	Explanation
<nowiki></nowiki>	<nowiki>'''text'''</nowiki>	'''text'''	Escapes wiki markup and stops formatting code like <pre> from being recognized.
<pre></pre>	<pre>text</pre>	text	Completely preformats text. All wiki markup, template calls, links, parser functions, HTML codes, and comments are completely ignored and are treated as raw text.
	<pre style="color: red">text</pre>	text	You can add HTML styles to preformatted text, like with divs and spans.
	<pre style="font-family:monospace;">text</pre>	text	Create monospaced blocks using CSS.
<code></code>	<code>text</code>	text	Applies a background like with the <pre></pre> tags.
<u></u>	<u>text</u>	text	Underlines text.
<mark></mark>	<mark>text</mark>	text	Highlight text.
<span class="spoiler"></span>	<span class="spoiler">text </span>	text	Hides text underneath a spoiler. Visible when selecting it on PC or tapping it on mobile.
<center></center>	<center>text</center>	text	Centers inline elements in the container.
<sup></sup>	text<sup>text</sup>	texttext	Superscript.
<sub></sub>	text<sub>text</sub>	texttext	Subscript.
<small></small>	<small>text</small>	text	Makes text smaller.
<big></big>	<big>text</big>	text	Makes text bigger.
<h3></h3>	<h3>ctrt</h3>	(blanked)	Defines a header using HTML, equivalent to ===this=== in wikitext. The number defines the header level from 1-6. Links to the header will work and it will appear in the TOC.
<br>	text1<br>text2	text1 text2	Places a line break in text.
<br clear=all>	[[File:Cagedfairy.png |thumb|right|Text]] <br clear=all> text	Text text	Places a line break whilst forcing following elements to only appear after preceding elements are fully shown.
	[[File:Cagedfairy.png |thumb|right|Text]] text	Text text	The same example without <br clear=all>, for reference.
<blockquote></blockquote>	<blockquote>text </blockquote>	text	Presents text in a blockquote (indent)
<span id=""></span>	<span id="aexgda"></span>		Include anywhere on the page to 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.
<!---->	<!--text-->		Comments. Completely hidden from the page, but visible when editing.

HTML Styles and Classes

Style/Class	Example Input	Output	Explanation
style="text-align: center;"	<div style="text-align: center;">text</div>	text	This div style centers inline elements in a container. Equivalent to using <center>.
style="-webkit-column-count:2;column-count:2;"	<div style="-webkit-column-count:2;column-count:2;">text1 text2 text3</div>	text1 text2 text3	Formats text into the specified number of columns. (the "-webkit-column-count:2;" seems to be useless, but it might be needed for special cases)
style="display: flex; flex-direction: row;"	<div style="display: flex; flex-direction: row;"><gallery widths=40 heights=40> Cagedfairy.png|Text </gallery>[[File:Boyoutline.png |thumb|Text]]</div>	Text Text	Present divs in a row. In the example it shows that you can place an element next to a gallery, which is usually not possible.
Collapsible Sections
class="mw-collapsible"	<div class="mw-collapsible">text1 <br>text2</div>	text1 text2	Allows text to be collapsed.
class="mw-collapsible mw-collapsed"	<div class="mw-collapsible mw-collapsed">text1 <br>text2</div>	text1 text2	Adding mw-collapsed makes it collapsed by default. Note: a page anchor within the collapsed element will have it automatically open when you follow the link.
class="toccolours mw-collapsible"	<div class="toccolours mw-collapsible">text1 <br>text2</div>	text1 text2	Adding toccolours gives the content the style of the table of contents (hence toccolours).
class="mw-collapsible-content"	<div class="toccolours mw-collapsible mw-collapsed">text1<div class="mw-collapsible-content">text2</div></div>	text1 text2	Use a separate div within the collapsible content one to define this inner div as the content to be collapsed. The text in the outer div but not the inner becomes a header for the collapsible content.
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	You can create and modify a custom button for the collapsible text. Unfortunately, it won't change depending on the state of the content.

List Formatting

Code	Example Input	Output	Explanation
<ul> </ul>	<ul> text1 text2<br>text 3 text 4</ul>	text1 text2 text3 text4	Text is formatted in an unordered list.
	<div style="text-align: center;"><ul> text1<br>text2 </ul></div>	text1 text2	You can place the list in a div to apply div styles to the whole list. Useful to center images in a list.
<li> </li>	<li>text1</li> <li>text2</li>	text1 text2	Gives text elements the style of being in a list. More importantly, allows to separate them into groups.
<ul> <li> </li> </ul>	<ul> <li>text1</li> <li>text2</li> </ul>	text1 text2	The combination of the two gives the best output. <li> </li> is used to separate the two.
style="display: inline-block;"	<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 forces floating elements such as image thumbs to appear on the same line, even if they are otherwise unable.
style="vertical-align: middle;"	<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	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.

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 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 header specified using |+Header 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.
style="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).

Other

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