User blog:Godisme/The Ultimate Wiki Markup Guide

So after I introduced the Bleach Wiki:Arena, I came to realize that not many people understand wiki markup and so this is my guide to understanding what wiki markup is and how to use it. This will be constantly updated as I have more time to work on it and if you have any questions on how to do something, leave it in the comments and I will add it in.

What is it?
So when I say wiki markup, you are likely not really sure what I mean. Wiki markup is the code that wikis run on. When certain characters are entered into a wiki, the wiki will automatically format it into something special. So if you enter #Hi in the editor, the wiki will automatically format that as #Hi. This is wiki markup. So in this blog, I am going to run down a lot of the essentials of wiki markup, what they do and how to use them.

Numbered Lists
The pound symbol is the code for a numbered list. If you type the pound symbol, it will replace that with the next number in the list.

Example:


 * 1) This is number 1.
 * 2) This is number 2.
 * 3) This is number 3

Will automatically format to:


 * 1) This is number 1.
 * 2) This is number 2.
 * 3) This is number 3

Make sure that you don't have any blank lines between each pound sign or else the list won't continue and there will be another number one, such as if you were to do this:


 * 1) This is number 1.


 * 1) This is number 2.
 * 2) This is number 3.

Will format to:


 * 1) This is number 1.


 * 1) This is number 2.
 * 2) This is number 3.

Unordered Lists
Exactly the same as an ordered list except you use * instead of #

Blank Lines
One of the more abstract things is the use of blank lines in wiki markup. Basically it boils down to this: This is text This is text as well

Formats to:

This is text This is text as well

But if you were to throw a blank line in there:

This is text

This is text as well

You would end up getting:

This is text

This is text as well.

Using a blank line is the only way to get two lines of text to be on a separate lines.

Horizontal Line
Another really easy thing. If you want to add a horizontal line across the page, just put:. That will produce:

Links
Links can be both simple and complex depending on how you use them. There are three kinds of links you can use, Internal, External and Interwiki

Internal Links
Very simple here. To link to any page on this wiki while you are on this wiki, just take the page name and surround it with.

Example:

Sōsuke Aizen

formats as:

Sōsuke Aizen

You can also change what the links says by using a | and entering what you want the link to say afterwards.

Example:

The best character ever

formats as:

The best character ever

Also with internal links, you need to know the namespace of what you are linking to. The namespace is just the prefix before the article name. Earlier I linked to the Arena, when I linked to it, I needed to put Bleach Wiki: before the word Arena as it is in the Bleach Wiki namespace. If you want to link to your user page you need to put User: in front of the name. My user name is Godisme, but I can't simply go Godisme because no page by that name exists in the main article space, aka the pages with no prefixes. So if I want to link to my user page, I need to do the following:

User:Godisme

which will format as:

User:Godisme

and if I want it to just say Godisme, I need to use a pipe like so:

Godisme

which will format as:

Godisme.

If you are linking to an image, say Aizen.png, you need to put Image: in front of it. Now this is where it gets tricky, there are two namespaces that will format as more than just a link, those are the Image/File namespaces (Image and File are two names for the namespaces where pictures are stored) and the category namespace. So let's look at these in a little more depth

Links to the File/Image and Category namespace
There are two things you can do with these namespace, you can display the picture for the file namespace and categorize the page you are on with the category namespace, or you can just link to it. For right now, I am just going to cover how to link to it. I will go into how to do the other options when I get more specific with categories and files.

So just linking to these is very simple, just put a colon before the prefix. So if I wanted to link to Aizen.png, I just do the following:

File:Aizen.png

which will format as:

File:Aizen.png

And just like other links, I can use a pipe to change what my link says.

This is a good picture

which will format as:

This is a good picture

The exact same rules apply to linking to a category.

Interwiki Links
Because Bleach Wiki is hosted by Wikia, there are a ton of other wikis all hosted by Wikia as well that can be linked to very easily through wiki markup. If you are linking to another wiki, there is no need for an external link so long as the wiki is also on wikia.

There are two things to understand when using an interwiki link and those are the letters w and c.

The prefix w: in a link, tells the wiki that you are linking to Community Central, the central hub of all wikis. So if I wanted to link to my user page on community central, I would put:

w:User:Godisme

which formats as:

w:User:Godisme

If you click the link, you will see that you end up on community.wikia.com/wiki/User:Godisme, which you can see is a pretty handy shortcut to typing out the url.

So once you are on central, the prefix c: tells the wiki that you are linking to another wiki. To do this you need the part of the url that comes before the .wikia.com, not the wiki name itself. A good example of this is the Fairy Tail Wiki. While the name of the wiki is Fairy Tail Wiki, the part before the .wikia.com is just fairytail with no space. So if you were on community central, the following would link to Fairy Tail Wiki:

fairytail

But since we are not on community central, that won't work here. So in order to link to another wiki, we simply need to tell the wiki to go to community central and then back to another wiki, which you do by combining w and c as follows:

w:c:fairytail

which formats as:

w:c:fairytail

Click it and you will end up on Fairy Tail Wiki. Now that we can link between wikis, you can get even more specific by linking to specific pages. This is done through another colon like the following:

w:c:fairytail:Laxus Dreyar

which formats as:

w:c:fairytail:Laxus Dreyar

Click it and you will end up on the page for Laxus Dreyar on Fairy Tail Wiki. From there, all other rules of links apply, you can add pipes to change what the link says or you can add the namespace in there to link to different namespaces.

Ignoring Wiki Markup
So by now, you are probably thinking "If all of this is done automatically, how are you showing all of this without the wiki turning it into what its supposed to?" The answer is pretty simple, there are two tags that can make it so that the wiki does not automatically format your text. These are the nowiki and pre tags.

So first questions: What is a tag?

A tag is a special bit of code that when wrapped around something, will format it in a predetermined way. You can recognize a tag by arrows (<>). A tag starts with and ends with. That is pretty important as only when you enter that, will the tag stop formatting text. So the nowiki tag is perfect for getting the wiki to not format anything on a single line. Usually when you put,

#hi

It comes out as:


 * hi

But if I put:

#hi

It comes out as:

#hi

The pre tag works exactly like this except for two key differences. The first is that the pre tag surrounds everything in a box. The second is that it disables ALL wiki markup. The nowiki tag can't stop certain things, such as the pre tag from formatting. Pre stops all wiki formatting so if you ever have a bunch of stuff you want to write down that includes a bunch of things that will format, use a pre tag

Headings
Headings, or sections as some people say, are very simple. Its all controlled through the equal sign (=). Basically, the more equal signs you have on either side of the name of the header, the lower the level of heading you get. So

=Heading=

produces a level 1 heading called Heading. If you add one more = on each side of the word heading, it goes down a level. Most commonly on this wiki, you will see level 2 ( ==Heading== ) and level three ( ===Heading=== ) headings. So what does all of this do? Take a look above and notice the table of contents. See how it shows 1,2, 2.1, 2.2, 2.3, 2.3.1 etc? Thats because I have organized everything into different headings. The added benefit is when you click on the heading in the table of contents, it will go directly to that part of the page. Because this is a wiki, you can also specifically edit only that section.

Bold and Italics
These two are very simple. To italicize text, use  . To bold text, use  .

Italics

formats to:

Italics

Bold

formats to:

Bold

Categories
I talked a little bit earlier about linking to categories, but now I will talk a bit about what categories are and how to use them. Basically, a category connects groups of similar pages. For instance, most wikis have a Characters category. This groups all characters into a single list that makes navigation easier. Look at Ichigo's page and you will see a lot of links on the bottom that say Characters, Male, Shinigami etc. These are all categories and are pretty simple to work with. I said earlier that to link to a category, you need to add a colon before the word category. But if you just want to add a page to a category, remove the colon and link the category as you would link a page, this will add it to the category. A word of warning though, Wikia in their infinite wisdom, has decided that wikia should no longer tell you if the category you added actually exists or not. When you link to a page that does not exist, the link is red. When you link to a page that does exist, the link is blue. When you add a category that exists, the link is blue. When you add a category that does not exist, the link is blue. See their logic? Me neither. Ill post an individual fix for this in the comments later as it is a css fix and not wiki markup.

Images
I debated whether to put images in the intermediate section or the basic section. They are kind of in between as they can be very simple, or a little more complex depending on what it is you want to do with them.

The basic way to add an image is as follows:



Now that probably does not make a lot of sense to you so here is what that all means. You start as if you were making a link with the brackets. Then place the word Image: to tell the link that it is in the image namespace (you can also use the word File: and it will do the same thing, but this wiki, for the sake of consistency, uses Image: instead). Then you need the file name, simply the name of the picture you want to use. So like all of my examples, I will be using Aizen. So now we have. The last part on there is the extension. Every image has an extension on it which tells you what kind of file it is, be it a png, a jpg, gif, bmp, whatever. So now we have, and when I post that, I get:



Which is a pretty nice picture.

But wait, there's more! Yes, images can be customized even more, so below, I will post the full extent of what you can do with an image.



So from above, you know the first part of this, the Filename.extension part. The next part of that is thumb. That controls whether or not the image is a thumbnail. A thumbnail is shrunk down and has a border around it and a place for a caption. If you want it to be a thumbnail, keep the word thumb in there. If you don't want it to be a thumbnail, take the word thumb out and also remove the caption, as only thumbnails have captions. So the above is not a thumbnail, below is a thumbnail.



So next is the position, simply where it is aligned on the page. You have three options here, left, right or center. Plug one of those words in in place of the word position and it will align itself to your wishes. Thumbnails default right, non thumbnails default left. Next is the size. There are 2 parts to the size, you can just use the square size, or you can get specific. So, take out the word size and enter the amount of pixels you want. So for example:



The above is a 200px image. You just need to change what the size is if you want a square image. Alternatively, you can get exact with your lengths and widths.



Above is an image that is 200 px by 100px in length, which I inputted with the code. And that is how you control size. On this wiki, we set all our images to 190px in size, but you can adjust the default size of unsized thumbnails in your preferences.

Next up there is the link. You can make an image into a link by using the code link=page, where page is the name of the page you want to link to. So for example:



Is the code for an image of Aizen that links to his page, which will look like this:



You can also use interwiki links there, it functions exactly the same as any internal link would.

And finally, we have the caption. Simple enough, if you are making a thumbnail, you can make it say something.



would produce:



So now that we have all of that, let's combine it all and make an image of Aizen that is a thumbnail, positioned in the middle of the page, that links to his page, is 200px in size and says "Aizen is the best character ever". To do so, we put:



and that is going to produce:



Color and the Span Tag
One of the biggest requests I see when helping people is that people want to know how to add color to what they write. On this wiki, we make it simple. We have a template called color that will add color for you. To use it write the following:

This is colored red

which formats as:

This is colored red

I will cover templates a little more later so that you will understand why that looks the way it does, but for now, I will just point out to you how to use this specific template. So on this one, there are two variables (things that you can change). The first variable comes after the first | and is the color you want. In my example above, I wanted red text, so I put the word red in there. When you use the template, you can use any word found here. After the second pipe is what you actually want to write. So put in whatever you want and it will be in the color you want, just make sure you placed the }} as the very last thing.

Now here is where it gets technical. The color template works because it uses and HTML tag called span. What span is is a special tag used in web design that allows text to be formatted in a variety of ways. Some of you may be familiar with and the span tag is what has replaced the font tag in modern web design. The reason I say use span rather than font is because font is what is called a deprecated tag. That means that certain browsers no longer support it and so it does nothing in those browsers. The span tag works with all browsers. So to start, lets look at how to change the color with a span tag.

This is colored red

Formats as:

This is colored red

You can also get more technical and use a hexidecimal value instead of a color name if you want. To do that, just replace red with a # and something from here. For example:

This is colored red

formats as:

This is colored red

That is just one use of the span tag, you can also modify things such as font size with the span tag.

This is size 20 font.

will format to:

This is size 20 font.

The reason why the span tag was chosen over the font tag for continued use is its ability to put all these different uses of it into one tag. So I can combine multiple commands like so:

This is size 20 font colored red.

which formats as:

This is size 20 font colored red.

You can string as many different commands as you want in there, provided you just separate them with a semicolon.

Signatures
Signatures are a way for people to tell that something you wrote is by you. If you go to vote in the arena, you need to sign your vote to take credit for what you wrote. Signatures can be as simple or as difficult as you want them to be. Most basically, you can just type ~ to sign your name. That will add a link to your userpage and your talk page. Now for something a little more difficult.

Custom Signatures
You will notice that some people on this site have a fancy looking signature. I am hesitant to teach how to do this as it can be massively complicated and can screw up pages if you do not do it right. So I will go over how to make a simple custom signature and then touch very briefly on advanced signatures.

First off, let's look at Mohrpheus's signature, which is a good example of a nice simple custom signature. His signature looks like this:

Mohrpheus  (Talk)

To do that, he uses the following code:

Mohrpheus  (Talk)

Look at what he has done here, he has just combined a few of the elements I have already mentioned above. He starts with just a link to his user page, he adds a pipe so he can change what the link says, and adds a span tag to change the color of what it displays. When you are changing the color of a link, you always want to put your span tag after the pipe or else it will not work. He also uses ''' to bold his name. The next part of his signature is a link to his talk page, but look how he uses a w:c: interwiki link to his talk page here. This means that whatever wiki he goes to, if he signs, that link will always direct back to his talk page here. His span tag is nearly the same as the first one he used but he also shrinks the font size down to 25%. Nothing too complicated there and looks pretty nice.

Once you have an idea of what you want to do with your signature and have the code you want, you need to place it. To get it so that when you sign, that code shows up, you need to go to Special:Preferences. See where it says Signature? Enter your code in that box. Then hit the button below which says that you want to use wikicode in your signature. Then just hit save and you are good to go.

Now let's look at a slightly more advanced sig, which is Yyp's.

Yyp's signature is too big to fit in the box in his preferences, so instead, he stores the code in User:Yyp/sig. Take a look at that page and you will see the following code:

 ~ ~ У у p   < t al k >

Now that looks like a lot, but we'll break it down. He starts with five ' which is bolding an italicizing all his text. The next part is his user page link, notice his span tag. He changes something I haven't talked about yet. That span tag changes the cursor when you hover over his link. Hover over it and your cursor will change to a question mark. He also added a title so that when you hover over his link, it will say "Yyp is a Bleach Wiki Administrator." Next he uses a font tag to change his font color (bad Yyp, never use a font tag, some browsers can't recognize it.) What follows is pretty simple from there, he has two tildes (~) each a different color. He does the same to each letter in his name, changing to a different shade of green. The only thing you may not recognize from there on is the  tag. All that does is raise the text between the tags higher than other text.

Once all that is said and done, his sig will come out displaying like this:

 ~ ~ У у p   < <font color="#00bb00">t <font color="#00aa00">al <font color="#009900">k <font color="#008800">>

I said before that his sig is too big to fit in the preferences line. Because of this, he keeps the code in a subpage of his userpage. He also has to do what is called templating his sig. I will cover this a little more when I talk about templates, but he has to create a second subpage of his userpage and in there, he just places the following:. Then in his preferences, he places on that line. Then, whenever he signs, it will just place on the page. I will cover more of how this works under the templates section.

Finally, I will show my sig. I am hesitant to show it as it is very complicated and should not really ever be copied in any way because one missed ending tag and the entire page will break. So here goes. My sig looks like this:

The code behind that is

<span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="padding-left:2px; color:white; background:-moz-linear-gradient(top, #000000 70%, #3c3b3b 30%); background:-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(70%, #000000), color-stop(30%, #3c3b3b)); border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-bottom-right-radius:2ex; border-top-right-radius:2ex;"><span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"> God   |<span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"> Pray    <span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid white; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;"><span style="border: 2px solid black; border-top-left-radius:2ex; border-bottom-left-radius:2ex; border-top-right-radius:2ex; border-bottom-right-radius:2ex;">

So yeah, its really long and does a lot of different things. I too have to template my sig like Yyp. Basically, what my sig does is it creates a series of loops of black and white which surround each other for a swirl effect. I use gradients to fill in the parts that display my name and talk, and I have also added a variable to insert the time into the signature. I'm not really going to get too much more in depth about that but if you have questions, Ill answer them in the comments.

Tables
I will be the first to admit, I hate tables. Tables are too overcomplicated on wikis. I usually leave the table coding to other people as they are far more complicated than they should be. But this is the advanced section, so I am going to go into some detail about tables and how to set them up and a few different styles of tables.

Below is the code to a very basic table. It is not flashy or anything, it is just nice and easy.

If you enter that, the wiki will format it like this:

Now, thats not too bad, but let's break it down into what it is. Any table starts with {|. It tells the wiki that you are starting a table. Next you see class="wikitable". This tells the wiki to format the table according to the rules of what it knows as a wikitable. You can give it other classes, but we will stick with wikitable for now. Next is your border. Some people like borders, others don't. If you don't want a border, enter 0 in there. If you do want a border, enter a value larger than 0. The bigger it is, the thicker the border will be. Finally, where you see "style=", treat it like you would a span tag, the color property as you know changes the font color and background controls the color of the background. I have set it to transparent here. So that takes care of the basic set up. Once you have that all set up, you need to put |- to signify the start of a new row. Every | in there signifies a new column. You can have as many columns as you want, so long as you keep the number of columns per row the same in every row. When you are done with a row, put another |- in order to go to the next one. When you are all done filling out your table |} will close the table. This is not terribly hard, but there is a lot of room for mistakes.

Now for something more advanced. This is the table that is being used over in the Bleach Wiki:Grammar Corner.

and the code behind that is as follows:

As you can see, that is a whole lot more complicated. I will try to break it down as best I can. To start, the table starts like any other table, with {|. However, it does not assign a class, this is because it is going to define everything for itself. So first up, it assigns a border of 1. Next are the cellpadding and cellspacing, which control how much space between each individual cell there are and how much space is in each cell. Next is the style tag. The only things you haven't seen here are the Radius template, which controls the degree to which the table edges are rounded, and the width property, which simply controls how much of the page the table spans. You may not have seen float before but all its doing is positioning the table in the center of the page. The next line is more styling. The colspan property defines how many columns there are in this table. This one is set at 3. Now comes more rounding and styling, this is controlling this specific header row and setting the size, the background color, the font color etc. Where you see the |, the text that follows is the header on the table.

So now it breaks into a new row and these three columns act as the headers to the rest of the columns. These three columns are given more padding, a background, font color and are aligned center. Once all that is defined, the actual table info starts. Each cell needs to be aligned individually. You can see in here that it is not necessary to put each | on a new line, you can put them all on one if you want. Thats pretty much all there is to that, but if you have questions, as always, ask.

To be continued