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.

#
# : 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.

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.

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

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.

To be continued