Wiki Markup

From Pokemon Speedruns
Jump to: navigation, search

Contents

Standard wikimarkup

Character Formatting

Description Input Output
Bold '''Text to become bold''' Text to become bold
Italics ''Text to become italic'' Text to become italic
Bold & Italic '''''Text to become both bold & italicised''''' Text to become both bold & italicised

Section Formatting

Description Input Output
Headings == Heading 2 ==

=== Heading 3 ===
==== Heading 4 ====
===== Heading 5 =====
====== Heading 6 ======

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
horizontal rule Text before rule

––––
Text after rule

Text before rule

Text after rule

Bullet List * Start each line

* with an asterisk (*).
** More asterisks give deeper
*** and deeper levels.
* Line breaks <br />don't break levels.
*** But jumping levels creates empty space.
Any other start ends the list.

  • Start each line
  • with an asterisk (*).
    • More asterisks give deeper
      • and deeper levels.
  • Line breaks
    don't break levels.
      • But jumping levels creates empty space.

Any other start ends the list.

Numbered list

# Start each line
# with a number sign (#).
## More number signs give deeper
### and deeper
### levels.
# Line breaks
don't break levels.
### But jumping levels creates empty space.
# Blank lines

# end the list and start another.
Any other start also
# ends the list.

  1. Start each line
  2. with a number sign (#).
    1. More number signs give deeper
      1. and deeper
      2. levels.
  3. Line breaks
    don't break levels.
      1. But jumping levels creates empty space.
  4. Blank lines
  1. end the list and start another.

Any other start also

  1. ends the list.

Images

Description Input Output
Image http://i.imgur.com/265tEz0.png 265tEz0.png

.

Hyperlinks

Description Input Output
Plain hyperlink http://wiki.pokemonspeedruns.com/ http://wiki.pokemonspeedruns.com/
Text embedded Hyperlink [http://wiki.pokemonspeedruns.com/ Pokemon Speedruns] Pokemon Speedruns

.

HTML for wiki formatting

Throughout the wiki, it is possible to use some HTML tags rather than wiki markup to format your page.

Standard HTML Tags

Description Input Output
Bold <b>Text to become bold</b> Text to become bold
Italics <i>Text to become italic</i> Text to become italic
Underline <u>Text to underline</u> Text to underline
Strike-through <s>Text to strike-through</s> Text to strike-through
Line Breaks This string of text will have two<br />line breaks<br />and will then continue This string of text will have two
line breaks
and will then continue


HTML <div> and <span> Tags

The <div> and <span> Tags are extremely useful when it comes to wiki formatting due to their ability to be stylised using css.

  • <div> tags are used when creating block elements to be placed on the page
  • <span> tags are used to manipulate text throughout the document
This is an example of what you can do with the <div> tag

Through the use of CSS, it is possible to format various features of <div> and <span> elements.

This can include:

  • Bakcground color
  • Div size
  • Font size and color
  • Text alignment
  • Div borders
  • Div position on the page
Description of CSS Input Output
Background color <div style="background-color: #FF0000;">This div will have a red background</div>
This div will have a red background
Font size and color <span style="font-size: 24px; color: #00FF00;">text will be larger and green<span> text will be larger and green
Text alignment <div style="text-align: center;">All text inside this div will be centered rather than aligned to the left. Other alignment options include right and justified</div>
All text inside this div will be centered rather than aligned to the left. Other alignment options include right and justified
Div borders $lt;div style="border: solid 2px #333333;">The div surrounding this text will have a grey border</div>
The div surrounding this text will have a grey border

Positioning a div using css

Using the position CSS property it is possible to alter where the div is located on the page. Below are a few examples of what can be done with the position property.

CSS property Position: absolute
Description: Sets the absolute position of the div in the document
Input: <div style="position: absolute; right: 400px; background-color: rgb(200,200,200);">This div will be 400 pixels left of the right side of the document</div>
Output:
This div will be 400 pixels left of the right side of the document
CSS property Position: Relative
Description: Moves the div by a set amount relative to where it was originally placed
Input: <div style="position: relative; left: 300px; background-color: rgb(200,200,200); width: 250px;">This div will be 300 pixels to the right of where it should be</div>
Output:
This div will be 300 pixels to the right of where it should be
http://wiki.pokemonspeedruns.com/index.php?title=Wiki_Markup
wiki.pokemonspeedruns.com
crawl=CC-MAIN-2017-13
26615
application/http; msgtype=response
sha1:YYLZSQKTZPSVAOPVSBKQAOQ2CSQW52TB
<urn:uuid:2ef4cb66-ed0e-4d59-89d3-c2094e865837>
2017-03-30T14:29:24Z
159.203.255.57
sha1:DV6WIPOEXBVO4MRZX2IGY3P25PT7R7W4
<urn:uuid:831ac6b0-a0bd-435b-a81f-3f4855579087>
http://wiki.pokemonspeedruns.com/index.php?title=Wiki_Markup
length
response
<urn:uuid:62ad7e83-976b-4819-bce0-a09d16091074>
robots: classic
hostname: ip-10-233-31-227.ec2.internal
software: Nutch 1.6 (CC)/CC WarcExport 1.0
isPartOf: CC-MAIN-2017-13
operator: CommonCrawl Admin
description: Wide crawl of the web for March 2017
publisher: CommonCrawl
format: WARC File Format 1.0
conformsTo: http://bibnum.bnf.fr/WARC/WARC_ISO_28500_version1_latestdraft.pdf