Wikitext Guide

## Introduction

**Wikitext** is incredibly important for spicing up wiki pages, and it often goes underused despite its usefulness. This guide aims to make Wikitext more understandable and to increase its general usage across pages. Not everything is achievable with Wikitext alone; HTML code is much more expansive in use than Wikitext, however it can be more complicated. If something is not on this list, try to look for it on the Coding Help Wiki.

## Basic Page Composition

### Headings

Headings are meant as titles for major page sections, such as a level description, or a section listing colonies. Think of these as chapter titles for a book. For example, the "Basic Page Composition" header directly above is a Heading. Surrounding text with two equal signs on both sides makes it a heading, which will display larger than other text and add it to the table of contents for the page. These are formatted in the Source Editor as:

==Example Heading==

Sub-Headings

Sub-Headings are meant to further organize pages, as a sub-category under Headings. For example, the text above reading "Headings" and "Sub-Headings" are both formatted as Sub-Headings, under the main Heading of "Basic Page Composition". These are formed with three equal signs on both sides of text, formatted as:

===Example Sub-Heading===

Sub-Heading 2

Sub-Heading 2 is meant for very finely organizing a page; it is the same concept as a Sub-Heading being a sub-category to a Heading, but instead, it is a sub-category to a Sub-Heading. It is less common to reach this level of organization in most pages, but if it is warranted, it can prove to be a useful tool. Sub-Heading 2 is formatted as:

====Example Sub-Heading 2====

Title Headings

You may be wondering: *if headings are two equal signs and sub-headings are three equal signs and so on, what does one equal sign result in?* Well, surrounding text with one equal sign results in a Page Title, which makes the text massive and distracting. These should be avoided in pages, as contrary to their name, they don't change the actual title of the page; they just make very large and distracting text. For the sake of cleanliness, a Page Title will not be used here, but an example of it can be found at the top of the page; text formatted as a Page Title will appear the way "Wikitext Guide" does. A better way to achieve large text is via the `<big>` and `</big>` feature.

### Basic Text Editing

This is a section regarding the most basic part of text editing: the top formatting options in the Visual Editor.

#### Bold Text

Bold text in articles is primarily used for the name of a specific level or entity whenever it is mentioned in its own article. For example, in Level 0's article, every time "Level 0" is said, it is bolded. This allows for better organization and gives a cleaner feel to the page.

Bold text in Source Editor: '''Text'''
Result: **Text**

#### Italicized Text

Italicized text is less commonly used in pages, but it still has its uses. Stressing a point in an article is better achieved with italicized text rather than, say, fully capitalizing it; text like "Do NOT, by any means, enter this level" looks unfitting in articles. If something is that important to stress, it is recommended to italicize it.

Italicized text in Source Editor: ''Text''
Result: *Text*

#### Underlined Text

While being one of the three simple formatting options listed at the top of the Visual Editor, underlined text is written in the Source Editor by surrounding text with <u> and </u>, rather than with apostrophes.

Underlined text in Source Editor: <u>Text</u>
Result: Text

#### Strikethrough Text

If you want text that looks like it has been crossed out, surround it with
 and
. This can be used for information that has, in-lore, been changed following a new discovery.

Strikethrough text in Source Editor:
Text

Result: ~~Text~~

### Intermediate Text Editing

Text can be further edited in many interesting and useful ways, such as adding shadows, `code`, or even colored text. These are less commonly used in articles, but can still serve a purpose every once in a while (avoid overusing them).

#### Code Text

Surrounding text with <code> and </code> will change its font to a more computer code-look. This can be used for many different things, like in the case of this page, where all examples of Source Editing code is set to the code font. In rare circumstances, the font of an entire page could be set to this look, changing its feel entirely.

Code text in Source Editor: <code>Text</code>
Result: `Text`

#### Colored Text

You can even color text using Source Editing, with many different options. This should only be used in very specific circumstances, like collapsible text, which will be addressed later. Do not color the entire text of a page; it is hard on the eyes and makes your page look like a blog from 2008.

Colored text in Source Editor: <span style="color:green;">Text</span>
Result: Text

There are many color options beside green, such as: blue, red, and yellow. However, coloring text is not just limited to simple colors; with HTML color codes you can make text any specific shade you wish. Just replace "color:COLORNAME;" with any HTML hex, formatted as "color:#FFFFFF;" (do not forget the "#" before the hex code, as the color will not appear without it).

#### Wavy Text

While not commonly used, text can be made wavy! Just use the following code in the Source Editor:
<div class="wavy-text"><span>letter-1</span><span>letter-2</span><span>letter-3</span><span>letter-nth</span></div>
Note: All resulting letters will be capitalized, and the font cannot be changed. The text color, however, can be changed, along with shadows.

wave
<span style="color: #3A3A3A; text-shadow: 2px 1px 0 #7A7A7A"><div class="wavy-text"><span>w</span><span>a</span><span>v</span><span>e</span></div></span>
#### Text Shadows

Adding shadows to text can make it stand out and appear much more unique! Here are just a few examples of the many things that can be done with text shadows:

**Basic Shadow**

Basic shadow in Source Editor:

<span style="color: #3A3A3A; text-shadow: 2px 1px 0 #7A7A7A">Example text</span>
An example of text with a basic shadow.

**> Open List of Shadow Styles**

**> Close List of Shadow Styles**

**Distant Shadow**

Distant-shadowed text in Source Editor:

<span style="color: white; text-shadow: 1px 3px 0 #969696, 1px 9px 5px #aba8a8">Example text</span>
An example of text with a distant shadow.

**Thick Glow**
Glowy text in Source Editor:

<span style="color: red; text-shadow: 0em 0em 1.0em red, 0em 0em 1.0em red">Example text</span>
An example of red text with a thick red glow.

**Fiery Shadow**

Fiery text in Source Editor:

<span style="color: red; text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;">Example text</span>
An example of text on FIRE.

**Outline using Shadow**

Outlined text in Source Editor:

<span style="color: white; text-shadow: 2px 2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, -2px -2px 0 #000000, 2px 0px 0 #000000, 0px 2px 0 #000000, -2px 0px 0 #000000, 0px -2px 0 #000000">Example text</span>
An example of outlined text using a shadow.

**Comic-Styled Shadow**

Spaced Shadow in Source Editor:

<span style="color: white; text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd">Example text</span>
An example of comic-looking text.

**Spaced Shadow**

Spaced Shadow in Source Editor:

<span style="color: white; text-shadow: -3px 3px 0px #00e6e6, -8px 8px 0px #01cccc, -13px 13px 0px #00bdbd">Example text</span>
An example of spaced, shadowy text.

**Layered Shadow**

Layered Shadow in Source Editor (added <big> to compensate for size):

<big><span style="color: red; text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9)">Example text</span></big>
An example of awesome layered text.

#### Text Positioning

Text can be positioned in many different ways, such as:
Left,center,and right!
Positioned text in Source Editor: <div style="text-align:left">
"Left" can be replaced with "center" and "right" to achieve the positioning you want! Additionally, one may use `<center>` and `</center>` to center text in a quicker manner, but this shortcut does not work with left or right.

## Intermediate Page Composition

### Divboxes

#### Colored Boxes

Colored boxes that contain text can be utilized in order to convey a certain "feel" within your page, or to organize your page into easily discernible sections. Always make sure that the text color, and the background color do not mix in well together, or the text will be hard to read.

`<div style="background-color:` (This is the color the background is going to be. Use either hex code, or color name.)`; color:` (This is the color that the text will be. Just as the background color, use either hex code, or color name.)`; margin:2em; padding:5px 10px; border:2px solid #FFFFFF;` (This is where you change the border color. It is recommended to make it either black or white, but you may change it as you please.) `border-radius: 3px">` (This changes the curvature of the border. The higher the number, the more round the edges are.)

Colored box in Source Editor (White):

<div style="background-color:#FFFFFF; color: black; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">Example Text</div>

Result: Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Colored box in Source Editor (Black):

<div style="background-color:#000000; color: white; margin:1em; padding:5px 10px; border:2px solid #FFFFFF; border-radius: 3px">Example Text</div>

Result: Lorem ipsum dolor sit amet, consectetur adipiscing 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.

#### Moving the TOC

\_\_TOC\_\_ does exactly the opposite of \_\_NOTOC\_\_; it places the Table of Contents exactly where it is entered in a page. This has very few applications, but it may prove useful in rare cases.

### Tabbers

In longer pages, solely using headers for organization may not always cut it. Tabbers are very a powerful tool meant to nicely shrink down information into sleek and readable chunks. Circumstances where they may be necessary will be explained after this example.

Tabbers in Source Editor:

<tabber>

Word

Word2

Word3

Word4

</tabber>

This text in the Source Editor would yield the following format:

* Tabbers
* Look
* Like
* This

Word1

Word2

Word3

Word4

Anything can be put inside tabbers, including other tabbers! However, they should be used with a bit of caution; first of all, if a page is built with headers, it may be meant to be read top-to-bottom, but due to tabbers making the reader switch left-to-right between tabs, that style may clash. In addition, tabbers take some of the "meat" from a page, substantially decreasing the length of it; this makes it seem like your page has little content, even if it has a decent amount, and overall makes it feel half-baked.

**Stylized Tabbers**

Alternatively, tabbers can come in two other forms, both appearing more "modern" than the default tabber. One of these forms is a vertical tabber!

Modern tabber in the Source Editor:

<div class="tabs">

<ul class="tabs\_\_caption">

 <li class="active">Tab 1</li>

 <li>Tab 2</li>

 <li>Tab 3</li>

</ul>

<div class="tabs\_\_content active">Text 1</div>

<div class="tabs\_\_content">Text 2</div>

<div class="tabs\_\_content">Text 3</div>

</div>

Result:

* Tab 1
* Tab 2
* Tab 3

Text 1
Text 2
Text 3

The code for a vertical modern tabber in the Source Editor is identical to the previous code segment, but it uses `<div class="tabs vertical">` instead of `<div class="tabs">`

Result:

* Tab 1
* Tab 2
* Tab 3

Text 1
Text 2
Text 3

Use these to your heart's content as a nice-looking replacement for normal tabbers!

### Quality Page Improvements

#### Insert Username

This is great for pages where you want to imput the readers username! For example, this could be used as: "Hi, !

Here is the code: <span class="mediaWikiData" data-var="wgUserName"></span>

#### Collapsable Text

Collapsable Text has many funtions. It is especially good with interactive pages such as the Tower of Amnesia where a user has to load files/insert a password. Use the following format:

+Header

\* item 1

\* item 2

\*\* item 2.1

\*\* item 2.2

To get: (click on)

+Header

* item 1
* item 2
	+ item 2.1
	+ item 2.2