This is the archive of the old Colorless! Go to the new Colorless →

Markdown Tutorial - How to... (Thread)

First off, sumimasen dear admin and staff but I could not take that any longer! those five helplines down there just don't cut it. And since Lumiex did such a good job, I want to support you guys here!

The tutorial will start one post below, why? cause I want to explain everything right HERE. For everyone who is not interested in certain matters of theColorless or the internet just scroll down. :3

Markdown:

First of we want to introduce the markdown system, only a few of you might be familiar with it. It was built to make common used HTML codes easier to use. So that you can change your text’s format with much more ease and that it does not necessarily break the flow of your typing.

The reason for all that is

that the user’s aka YOU won’t have such a hard time with pressing a button to make everything bold or italic or change the size with something complicated. BUT it is by no means a stand-in for HTML. You do not have to know both but it’ll come in handy if you do.

Why is that so?

‘Cause not every site uses markdown, there are a few plugins but hardly anyone thinks of those because BB-code and HTML are more commonly used. That being said let’s progress, shall we?
Let’s start with something simple, like how it’s done … like making a sentence for example…
“We are the colorless and love to make fancy stuff”

You will see that sentence a whole lot today, you better love it, ‘cause I won’t change that even if it kills me. Ya hear me, no complaining otherwise we’ll break this up right here and I’ll go n listen to Vocaloid!
*cough*

So to smooth things up I'll split this tutorial into three posts with certain headers, hopefully this will help you all along the way. If not god help us all...

Once we have our little sentence and are good to go, there’s a lot of explaining to do:
You are able to make that little sentence bold, italic or underlined to your liking. Where you normally had to use something HTML like:
<b> text in between </b> for bold stuff
<i> text in between </i> and for italic
<u> your Text </u> for underlined statements

there is now a much easier way to do so, now let’s do some magic with this:

  • One * (asterisk) on both sides of a word or sentence will result in (italic):
    "We are the colorless and love to make fancy stuff"

  • Two * (asterisk) will look like this (bold):
    "We are the colorless and love to make fancy stuff"

  • ** and _ (a underscore) will result in this one (italic and bold):
    "We are the colorless and love to make fancy stuff"

  • `` those backticks will do the following (Source text)
    "We are the colorless and love to make fancy stuff"

Making a list

By the way a - (dash) and “space” between a sentence will result in a list like the one above. There’s even a way to make a numbered one.

  1. Such a list is easily made with the following
  2. Just post a “8.” Without the quotation marks in front of your text
  3. And then for every next step a “1.”
  4. that way you will get a list like that, isn't that neat?
Quotes:

To make quotes a simple > (inequality sign) like this at the beginning of a sentence will do and it will look like this:

"We are the colorless and love to make fancy stuff

Loving it already? You should, otherwise this would get much more tedious, it might even save seconds of your life. If yes, good because we are not done yet! :D

How to make a header

Ever wanted to make a header and you are too lazy to remember all that HTML stuff? Well now you’ve got the fool’s license to do so right away with that:

/# (a hash, some might call it number sign) will give you this result:

“We are the colorless and love to make fancy stuff”

For every hash the font will get a bit smaller this might even make you feel like an ophthalmologist but bear with it.

“We are the colorless and love to make fancy stuff”

“We are the colorless and love to make fancy stuff”

How to re-name a link

Once you have a link you want to post here, there are two ways to do so, one easy one, and a gimmick one.
The easy one is really not so hard to get, since you only have to use () (brackets) those guys again, and a name

http://thecolorless.net/ <- our site link plain and simple, so let’s rename this fella by posting something in brackets behind the actual link:

http://thecolorless.net/ (TheColorless) it will normally result in
TheColorless

You’re even able to make bold or italic links that way with much ease by putting the punctuation inside of the brackets, like I did above. Now onward to the fancy way!

Like above you have your link and what you like to name it, but you can even make a title for a link, try it!

[TheColorless](http://thecolorless.net/ "We are not the Dollars!!")

This is what you get by writing it that way:
We are TheColorless

How do you make a spoiler

well simply you have to put two normal - (dashes) before and behind the text you want to spoiler.
I've tried this several times and sometimes it doesn't seem to work when you want to edit a post. It's kinda weird but handy even though spoiler tags would be more convenient.

We are the colorless and love to make fancy stuff

When you want to put a picture in a spoiler you just have to put a blank space between your dashes and the link to the picture you want to show off.

well that's about it... hope this helps give it ya all and good luck *bows*

Oh and if you want to know how to use all this knowledge in a good way:

CLICK HERE for Lumiex's Tomare! thread
and read it and have fun doing so!

saved

Great Tutorial, @Alkaid, well done!
Maybe stickying this would be a good thing, what do the other staff members think?

It seems like there should be a separate instructional/tutorial sub-forum with a single sticky pointed towards it that contains tutorials like this. The sub-forum would contain each tutorial thread, but regular users would be disallowed from creating new threads there. In other words... set up a 'one sticky to rule them all' type of thing.

Otherwise, stickies start taking over the main page.

I think both the Pandemic thread as well as this tutorial could be categorized together in a tutorial type sub-forum.

I agree, @Fieyr, we have a damn lot of stickies already.
And honestly, I like what you're suggesting.
Maybe a Board for FAQs and Site-related Help would be a good solution, since we have no access to the FAQ subpage etc as it is. And threads are easily expandable, and we can always add new ones.
Having a sticky or sth as an Index to the individual topics would be easy to set up.

@DarkChaplain - Exactly. And this may be obvious, but the index thread needs to be very clear and concise. Not a wall of text or anything so that users don't get lost on their way there.

The index should be just links, and properly labeled. With maybe, big emphasis on the maybe, a 1 sentence explanation of the index. The links themselves should be self explanatory and easy to quickly scan for what you're looking for.

Although a picture of Index would be acceptable...

http://chocolatesyrupywaffles.com/wp-content/uploads/2010/10/Ayako_To_Aru_Majutsu_no_Index_II__01_H264_1280x7200B30EF8D.mkv_snapshot_02.10_2010.10.08_18.27.3.jpg

I agree. The index thread should just give an overview, and the titles of threads need to be descriptive of the contents.
Also, a picture wouldn't hurt xD

girlfriendddd~ you are FABULOUS

Nice tutorial! Though you could have just linked to this page instead...

Also! ` is not a single quotation mark, it is called a "backtick". And there is no reason to start your numbered list with a "8.", it can be any number, and the point is that you number it properly in the real text (1, 2, 3 etc). Because the whole point of Markdown is basically being easy to write and easy to read even when it's not converted to HTML. (This is the source code of the main page of the Markdown project). And the last thing is that > is not a bracket, but a greater-than sign. Brackets are:

  • [ square bracket
  • { curly bracket
  • ( normal bracket

You should also mention that code blocks (intended by 4 spaces), ordered and unordered lists as well as blockquotes only work when separated from the rest of the text by at least one empty newline.

Cheers! :)

Well I got my lazy ass onto the markdown site and learned a alot because of this thread, So thanks for making me less lazy.

@Fieyr & @DarkChaplain
Well good to see that our dear @Admin is a hard working lad, he already made a thread so that every other "tutorial-ish" one is linked to it. Isn't it nice to see that there are not so many stickies around anymore? :3
To tell you guys the truth ...I always hated that myself when I had to fight through those walls of posts just to read one single thread so it's definitely a huge improvement.
Love the Index picture though I'm usually more a Misaka and Saten kinda person >:3

@Lumiex ...>//////>''' eto... thank you. Even though Dave proved already that I'm not so fabulous *bows*

@Dave well all I can say is thanks, my english is far from perfect, that's why I really appreciate every kind of help I can get to improve in that matter. Though I thought that chosing a specific number would ease the learning process for our dear newcomers. They are still free to try around of course and I'm still working on making the HTML stuff kind of understandable for everyone. Since even for me it's not that easy to keep everything of that in mind.
Especially color codes are a huge obstacle for most people, so it's good to see that markdown is kinda name sensitive here. Once again thank you very much. :]

@Deftones No prob, had to fight my way through all that myself and without real visual examples it's kinda hard to get. Especially so when you not exactly gulped a HTML manual down your throat. ^^''

@Alkaid & @DarkChaplain

Just between us, I'm more of a Misaka guy myself too :)

With that said, I love our new index thread. It's very well laid out and really grabs your attention. Well done. I think this will make everyone's lives easier in that now we have one place where we can direct new users that covers all the bases.

Very great thread. I learned a few things, and that makes me happy.

I really needed this. Gives cookie

man so much reading i cant take it its like school

You are on the old site. New site is here:

The site has been updated on the 24th December 2011. Please go there when you are finished with the archives.

  • 481,435 posts
  • 2,075 threads
  • 23,121 users