×
Create a new article
Write your page title here:
We currently have 3,093 articles on YumeWiki. Type your article name above or click on one of the titles below and start writing!



YumeWiki
3,093Articles

Help:Formatting: Difference between revisions

(Making a table - will add more on it later)
Line 332: Line 332:
This is how to make a table in the standard way of wikitext:
This is how to make a table in the standard way of wikitext:


<pre>
<pre style="line-height:1.5em;">
{| class="wikitable" <!--table start, put table styles here-->
{| class="wikitable" <!--table start, put table styles here-->
! Header <!--bold and doesn't get sorted-->
! Header <!--bold and doesn't get sorted-->

Revision as of 14:42, 5 July 2024

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.

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
  1. One
  2. Two
    1. Sub-point
  3. 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>

Characters

Character Usage

U+000A
&#10;
Using the HTML entity for a newline lets you avoid it getting stripped by parser functions.

U+0020
&#32;
Spaces are also stripped by parser functions.
#
U+0023
&num;
The number sign, also called a pound or hash symbol. The HTML entity can allow escaping certain situations.
&
U+0026
&amp;
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
&comma;
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
&VerticalLine;
&#124;
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
&middot;
&centerdot;
Solid dot that is in the middle of a line.

U+2190
&larr;
Leftwards arrow as one character.

U+2191
&uarr;
Upwards arrow as one character. Can be used for "to top" links.

U+2192
&rarr;
Rightwards arrow as one character. Used when listing directions on location pages.

U+2194
&harr;
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

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 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.
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-->
! Header <!--bold and doesn't get sorted-->
! Other
|- <!--new row-->
| Text1 <!--table cell-->
| Text2
|} <!--table end-->

The example above produces the following table:

Header Other
Text1 Text2

Other

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