Whaleshares Logo

馃摉 Markdown Basics - How to elevate your posts using Markdown!

jepu8 months ago7 min read

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

Comments

Sort byBest