A Gentle Introduction To Markdown

What is Markdown?

Markdown is a lightweight markup language. It is a markup language that is easy-to-read , easy-to-write, a markup language that uses tags to define elements within a document, which means a markup language will show you only the textual representation. Tags are the basic formatting tool for any markup language, tags should indicate what should be displayed on a preview. Tags have three major components which are

opening tag: (<p>),

content: this is a paragraph

and

closing tag: </p>

Why Markdown?

  • Markdown is a lot easier for the eyes than other markup languages like HTML, XHTML because it does not need lots of tags, for someone who has not seen an HTML document it would be difficult to read the codes, reading a markdown document would make easily sense to anyone.

  • Markdown has fewer errors because of its nature of syntax it is hard to make an error and easy to debug, if you were to miss a stroke in an HTML file you will have to go through each line of codes to find that missing stroke.

    • Markdown makes it easy to write for the internet i.e blog posts, making forums, used by many generating static sites.
    • A markdown file can be converted to an HTML or XHTNL file, so you do not need to study HTML to know how to use markdown.

      Syntaxes for markdown

      Just like other markup languages markdown has a structure or make up of codes, called a syntax . these syntaxes inlcudes making: headings, bold text, italic text, list, table, uploading images and links.

  • Making headings in markdown is done by using the hashtag #, the more hashtags you use the smaller the heading
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5

output

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

  • Bold letters

The syntax for bolding letters is, double-asterisks_letter/word_double-asterisks to make a letter bold you can also use double-underscore_letter/word_double-underscore

 **a bold text**

output:

a bold text

 __using underscore__

output:

>using underscore

  • Italic letters

The syntax for italics is, asterisks_letter/word_asterisks, you can also use underscore_letter/word_underscore

*an italics text*

output:

an italics text

_an italics text_

output:

an italics text


  • Making a list

There are two types of list you should know how two make

  1. Unorder List
  2. Order list

An Unordered list is represented by using bullets for the items on the list, it can also have a sublist. This list is represented with an asterisk or a single dash and a space before the item in the list, for a sublist to be implemented it would have to be under an item using the same syntax.

Making an Unordered List

* veldibrus
  * you are a fugitive in this world

- mirion
  -  mission: befriend dojo master

* sitiperioum
  * mission: stop the the assassination of the chosen prince

Output:

  • veldibrus

    • you are a fugitive in this world
  • mirion

    • mission: befriend dojo master
  • sitiperioum

    • mission: stop the the assassination of the chosen prince

Notice: The sublist in an unordered list is represented by a white ring bullet while the head list is a white dot bullet

Making an Ordered list

This list is a sequential order wherein its syntax the numbering of the item in the list cannot be skipped.

1. Grandfather
1. Grandmother
1. Father 
1. Mother
1. Child

Output:

  1. Grandfather
    1. Grandmother
    2. Father
    3. Mother
    4. Child

  • Uploading a link To refer to a website on a blog post ordinarily you would need to upload the link in your markdown code, all you need to do is browse that website copy its URL. When you are done with copying the link, you will use two important things which are a square bracket and a bracket close to each other, the square bracket should be placed in front of the normal bracket. Then in the square bracket, you would insert the name of the website and in the bracket, you would paste the link of the copied website. For Example, I wrote an article on websites for reading manga online and I want to have those websites on the article page. .

To read manga online, here are some certified websites

1. [ mangapark](https://mangapark.net/ )
1. [mangakakalot](https://mangakakalot.com/ "mangakakalot") 
1. [mangapanda](http://manga-panda.xyz/  "mangapanda")

output

  1. mangapark
  2. mangakakalot
  3. mangapanda

Note that in my first example the name of the website did not pop out like the other two examples instead the URL popped out, this is because in my first syntax I did not put the name of the website in a quote. What you would need to do is leave a space and use a doublequote to quote the name of the website.


  • Uploading an Image Just like uploading a website you browse an image,copy it's URL follow the same syntax but this time you wikk put an exclamation mark at the front of the square bracket.
    ![A neon picture](https://images.app.goo.gl/xQfKvVeXLP9THnYt7)
    
    Output:

A neon picture


Mkaing Tables A table can be made in markdown without needing to draw, just imagine drawing a multiplication table you draw lines for rows and columns. In markdown, these rows and columns are made using straight strokes. If you want a table of two majors apps and coins and be able to insert pieces of information under them, you would need to make a table of dashes in your table so any other information that comes under them would be minors.


| Apps    | Coins |
| --------|-------|       
| Luno   |  Bitcoin, Ethereum, Tron, Ripple, Litecoin| 
|Biance  |  Bitcoin, Ethereum, Tron, Ripple, Litecoin|
|Busha  | Ripple, Ethereum, Naira token,|
|||

Output:

AppsCoins
LunoBitcoin, Ethereum, Tron, Ripple, Litecoin
BianceBitcoin, Ethereum, Tron, Ripple, Litecoin
BushaRipple, Ethereum, Naira token,

If i want to add another major information followed with minors all i need to do is go the syntax and add a fourth stroke


| Apps    | Coins | Amount|
| --------|-------|-------|
| Luno   |  Bitcoin, Ethereum, Tron, Ripple, Litecoin| 67, 34, 33, 29, 9| 
|Biance  |  Bitcoin, Ethereum, Tron, Ripple, Litecoin| 2, 100, 67, 45, 65|
|Busha  | Ripple, Ethereum, Naira token,| 12, 12, 69, |
|||

Output:

AppsCoinsAmount
LunoBitcoin, Ethereum, Tron, Ripple, Litecoin67, 34, 33, 29, 9
BianceBitcoin, Ethereum, Tron, Ripple, Litecoin2, 100, 67, 45, 65
BushaRipple, Ethereum, Naira token,12, 12, 69,

Playing around or working with these syntaxes will help you to master them faster

Working with markdown on Visual Studio Code

Although markdown has different text editors, markdown can be installed as an extension on VS Code. Markdown has many extensions on vs cod some are free wy some are no, some extensions on markdown shows the preview beside the coding making it convenient for the programmer to debug and see the immediate result.

To install an extension you would need to open Visual Studio Code and then click on extensions, on the search icon search for a markdown extension and install.

Start by clicking on file, select new file then save the name of the file as README.md, then you can start coding and formatting, make sure to always save your progress, use Ctrl S to save, or you can turn on AutoSave under file.