๐Ÿ“– Markdown Basics - How to elevate your posts using Markdown!

last month

Formatting a post is probably one of the hardest thing to do, especially if you're not familiar with Markdown. For those who don't know Markdown is a lightweight markup language that uses plain text and converts them into HTML. Basically, it's like coding HTML for non technical people.

Learning Markdown by heart is gonna prove useful especially once you decide to become a regular on Whaleshares or any other similar platform, it'll make you more efficient in posting and make your posts more pleasing for the readers.

This post is designed to give you a crash course on Markdown and help put you in the right track to become a Markdown guru. We will cover the following topics.

  1. Headers
  2. Lists
    • Ordered Lists
    • Unordered Lists
  3. Formatting
    • Bold
    • Italic
    • Strikethrough
  4. Images
  5. Links
  6. Blockquotes
  7. Tables
  8. Inline Codes
  9. Code Blocks
  10. Some other noteworthy commands

Headers

Almost every post will have headers, its a way to specify a topic being discussed as well as transition from topic to topic seamlessly.

There are six headers in total, in HTML we use the <h1>,<h2>,<h3>,<h4>,<h5>,<h6>while in Markdown we use the # or number sign. We can use up to six # which is equal to <h6> in HTML.

Header 1 - #

Header 2 - ##

Header 3 - ###

Header 4 - ####

Header 5 - #####
Header 6 - ######

####### Header 7 - ####### - Incorrect syntax

As stated above there are only six headers available, going past that and you will end up printing the number signs.

divider.png

Lists

Lists are a great way to write down topics as you might have seen from the table of contents above. There are two types of list, ordered and unordered lists.

An ordered list can be achieved using numbers, example:

Syntax: 
1. Apple
2. Banana
3. Watermelon
4. Pineapple



Result:

  1. Apple
  2. Banana
  3. Watermelon
  4. Pineapple

An unordered list can be made in various way, one can use the + ,* or - sign. All of which will produce the same list.

Syntax
+ This is a list made 
+ with the plus sign

- Another list made with
- the minus sign

* Lastly I used 
* the asterisk sign
* in making this list



Result

  • This is a list made
  • with the plus sign
  • Another list made with
  • the minus sign
  • Lastly I used
  • the asterisk sign
  • in making this list
    divider.png

Text Formatting

Text formatting will really come in handy when you want to put emphasis on a certain text, or make edits to your initial post but not remove any certain paragraphs to avoid confusions.

Just like lists there are more than one way to format texts, one way is using the * sign while the other way is using the _ sign.

Syntax
**I'm a bold text**
*I'm Itallic*
~~Strikethrough~~



Result
I'm a bold text
I'm Itallic
Strikethrough

divider.png

Images

One way to catch the attention of readers is through images. It's fairly easy how to import them too.

![NAME_INCASE_IMG_DOESNT_LOAD](IMG_URL)

NAME_INCASE_IMG_DOESNT_LOAD basically means that if your image doesn't load due to a specific error it'll show it as that as well, it is important to note that the name shouldn't be taken for granted as it will serve as a backup "image". Nothing's worst than not seeing an image where you expect it to be.

Syntax
![logo-small.png](https://whaleshares.io/imageupload_data/57f27c091d518777899ec686742ff0359cbc05b6)



Result
logo-small.png

divider.png

Links

Links are a great way to reference something or someone if needed. For usernames and urls on Whaleshares it's automatic.
example:
@whaleshares
https://www.google.com

If you do however want to give a specific username or url an alternate name you can do so by using [alternate_name](username_or_url)

Syntax
Join us [here.](https://whaleshares.io)



Result
Join us here.

divider.png

Blockquotes

Have you ever wanted to quote an author but didn't know how? Well lucky for us Markdown has blockquotes.

To use Blockquotes we simply need to use the > sign. If you do however have multiple paragraphs that you want to put in one blockquote, you must put a > on every line to avoid formatting issues.

Syntax
>This is a poem for you
>A poem I wrote Just for you
>
> Did you like my poem for you?



Result

This is a poem for you
A poem I wrote Just for you

Did you like my poem for you?

divider.png

Tables

Tables are a great way to show data in a formal manner. It's a bit tricky to use this one because it's like your building the skeleton of your table with - and | , but when you master it. It'll be a great addition to your markdown arsenal.

Syntax
Header 1 | Header 2
----- | -----
Data 1 | Data 2
Data 3 | Data 4



Result

Header 1Header 2
Data 1Bold text
Data 3# Header 1
link+ Hello

Note that some Markdown like Headers and Tables don't work inside of tables.

divider.png

Inline Codes

As you can see from my post I use a lot of inline codes to show the different codes in their "raw" or "uncompiled" states. This can be done by using the ` sign.
Syntax: `[link](https://whaleshares.io)`
Result: [link](https://whaleshares.io)

divider.png

Code Blocks

Code blocks are a way to highlight lengthy codes that keep their formats. This can be done just like the inline code but instead of using one we use three ` on both start and finish of the code block.

function foo(int x, int y){
     return true;
}

divider.png

Some other noteworthy commands

  • To center a texts or images one can use the <center></center> tags.
Syntax
#### <center> look at me at the center</center>

look at me at the center


  • To place texts or images on the left or right side of the page, one can use the "pull-left" or "pull-right" classes.
Syntax
<div class="pull-right">๐Ÿ“– book on the left</div>
<div class="pull-left">๐Ÿ“– book on the right</div>
๐Ÿ“– book on the left
๐Ÿ“– book on the right


  • You can mix and match different markdown with each other.
Syntax
This is a <a href="">normal link</a> This is **<a href=""> bold link</a>** and a *<a href="">italicized link</a>*.

This is a normal link This is bold link and a italicized link.

divider.png

Conclusion

And we're done! Hope you managed to learn something today. Let me know if I missed anything down at the comment section.

divider.png

If you think I deserve your vote, please head over to the Witness page and click on the (^) right next to my name "jepu".

As always thanks for reading and see you in the next one,

jepu.png

Authors get paid when people like you share their post.
If you enjoyed what you read here, create your account today and start earning FREE WLS!
Sort Order: ย trending

Oh, there are some that i totally didn t know!

Thanks @jepu! This will be super useful!

Thanks a lot for this initiative @jepu.
I'm sure a lot of people will benefit from this.
Cheers!

Great guide jepu๐Ÿ˜ƒ anyone can have a look when they want to post a creative one. Good Job

Thank you @jepu for this reference , This can be really useful for creating good presentation articles/blogs.

Very informative and easy to read! Might be good to add the following code for a clickable image:

<a href="https://discord.gg/C6PQmvF"><img src="https://whaleshares.io/imageupload_data/57f27c091d518777899ec686742ff0359cbc05b6"></a>

will be a clickable image redirecting to the Whaleshares Discord.

ยท

Cool tip man. thank you

Nice. I have been using markdown in my testnet post. I gues it still have here. But, it have gone. ๐Ÿ˜

Its very help full dear
nice post for new ones.

I find that writing the code to make the blog posts look eye-catching actually takes longer than writing the post itself! Thanks for the helpful insight in to the world of HTML coding for blogs!

Amazing post! For newbs like me!

Very useful @jepu! sharing to everyone in my grup on ds :) voted for witness too!

Question, what the best way to insert GIFS? (I like this form of visual art and making some music too, so having visual+music hits the sweet spot (in 2.0 life I am also a programmer (in smaller area for microelectronics))

ยท

Hey @samprock,

Inserting a GIF is pretty much the same way you would do an Image. Let's remember the ![alt_name](url) syntax.

First you go to your favorite GIF generating site. I personally use GIPHY as I can make my own GIFs on there as well.

Once you've found a particulary GIF you like or want to add in you could just click on the Copy link and use the GIF Link and that's what you use as your url.

![giphy.gif](https://media.giphy.com/media/yoJC2A59OCZHs1LXvW/giphy.gif)

Result
giphy.gif

It seems that the drag and drop feature for GIFs aren't supported just yet, hopefully in the future it will be.

ยท
ยท

Awesome! Tanks for reply @jepu :)

I tried dropping gif file and link (I use giphy too), but did not realize wrap it as link (I am pro programmer duuh, so that's were brain damage come from lol)

It seems works neatly! Much peace!

silentzen

Great tips @jepu a couple in there I didn't know. It's always great to find ways to elevate our posts!

Good contribution for those who are not familiar with these commands. I love the command of "pull-left" or "pull-right", when I combine them as you have done but with images higher than wide, I get the effect of decorations on the sides in my poems, you could see how it looks in my post, thanks for sharing

@jepu, bookmarking this baby for later! Some there I did not even know :) Thanks for sharing <3

Thanks @jepu for the tutorial. Now we will be able to put out more good looking posts on Whaleshares. I was actually learning this last night, now you added to that knowledge.

Thanks!

@jepu great post, i ges its the same as steemit, greetings

ยท

Yep it's pretty much the same on Steemit. But some users on here don't even know of Steemit so it would be nice to have a simple guide of our own.

wow , Thanks alot for this tutorial about markdown i believe those who are new to the content platform like this will find this good because is well detailed, i gain some from it too thanks once again jepu.

Thanks Jepu, it's a very useful guide!

I will definitely come back to it from time when I am making a post.

ยท

indeed it worth come checking time to time , bro how been you my flame fire

ยท
ยท

๐Ÿ”ฅDoing good thanks ๐Ÿ˜€
Been studying for my exams lately.

How are you?

ยท
ยท
ยท
ยท
ยท
ยท
ยท

I'll probably be there a bit more now that I have more time again ๐Ÿ˜€

Now this is what I call a valuable post! Thank you for sharing this, it will come in handy for many people, I'm sure :)

Iโ€™ve been waiting for a post like this to help with my formatting- Thank you mate! And yeah Iโ€™ll give you a witness vote โœŒ๏ธ

Thanks so much jepu, markdown has been difficult for me to remember but this post I'm saving lol

Thank you for this post @jepu , it will really help my next post, joined whaleshares about a week ago, feels good to be here!