If you’ve set up a Github repository or been on developer discussion forums, then you’ve probably come across Markdown. If you haven’t, then this guide is for you. Markdown is a lightweight markdown language that’s written in plain-text and usually converted into HTML. It was created by John Gruber and has readability as its core purpose. It is especially used for writing README files and by static site generators like Jekyll, Hugo, etc. This article will go over basic Markdown syntax and Github-Flavored Markdown.

We’ll start with the basics.

Headings

In markdown, headings(h1, h2, h3, h4, h5, h6) are represented by hash tags.

<h1>Hello</h1> = #Hello
<h2>Salut</h2> = ##Salut
<h3>Hola</h3> = ###Hola
<h4>Ciào</h4> = ####Ciào
<h5>Ni Hau</h5> = #####Ni Hau
<h6>Marhaba</h6> = ######Marhaba

Lists

Unordered lists(ul) are represented by the asterisk symbol or the plus/minus sign.

<ul>
  <li>Python</li>
  <li>Ruby</li>
  <li>Javascript</li>
  <li>Swift</li>
</ul>

# this would be represented by:

* Python
* Ruby
* Javascript
* Swift

Or

+ Python
+ Ruby
+ Javascript
+ Swift

Or

- Python
- Ruby
- Javascript
- Swift

Ordered Lists are pretty straight-forward, they are presented by numbers.

<ol>
  <li>Rwanda</li>
  <li>Uganda</li>
  <li>Kenya</li>
  <li>Tanzania</li>
</ol>

# This would be represented by:

1. Rwanda
2. Uganda
3. Kenya
4. Tanzania

Or

1. Rwanda
1. Uganda
1. Kenya
1. Tanzania

# In other words, the order of the numbering doesn't matter, the result is the same.

Emphasis

The asterisk sign(*) and the underscore symbol(_) are used for emphasis to represent <em> tags and <strong tags. One asterisk/underscore before and after a word represent italics. Two underscores/asterisks represent the bold format. If you want a word/sentence to be both italicized and in bold, then you use triple asterisks/underscores.

This is how you would represent links in markdown:

<a href="https://mellowviews.com">Mellowviews</a>

[Mellowviews](https://mellowviews.com)

# If you want to add a title attribute:

<a href="https://pesachoice.com" title="PesaChoice">PesaChoice</a>

[PesaChoice](https:pesachoice.com "PesaChoice")

Images

This is how you would represent an inline image in markdown:

<img alt="Sunset" src="https://source.unsplash.com/random/?sunset" />

![Sunset](https://source.unsplash.com/random/?sunset)

# The alt Text goes inside square brackets after an exclamation mark and the image source goes inside parantheses after the square brackets.

Blocks of Code

If you wanted to highlight code inline, you would wrap the code inside Back Tick signs(``).

`<p>Hello World</p>`


Output: <p>Hello World</p>

For a block of code, triple back ticks are used to wrap language-specific code. To declare what language the block of code will be, you simply write the name of the language after the first set of triple backticks:

```python
print “Hello World”
```


Output:

print "Hello World"

Blockquotes

To represent blockquotes, you make use of the ‘less-than sign(>)’:

> This is a blockquote

Output:

This is a blockquote

Horizontal Rule

<hr /> is represented by triple or more dashes(---)

Ampayinka
---------

Output:

Ampayinka


Github Flavored Markdown

README files on Github, Gitlab, etc. are written in Markdown. Github has a flavor of markdown that supports tables and tasklists.

Tables
| Album | Artist | Release Year | Rating |
| ----- |------ | ------ | ----- |
| DAMN  | Kendrick Lamar | 2017 | ★★★★✩ |
| Illmatic | Nas | 1994 | ★★★★★ |

Output:

Album Artist Release Year Rating
DAMN Kendrick Lamar 2017 ★★★★✩
Illmatic Nas 1994 ★★★★★


PS: Used Unicodes 2605 and 2729 for the black and clear stars respectively. This might vary depending on which platform you’re working.

Tasklists

- [ ] Write essay on Satire
- [X] Workout
- [X] Buy Coffee
- [ ] Read Arundhati Roy's new book

Output:

  • Write essay on Satire
  • Workout
  • Buy Coffee
  • Read Arundhati Roy’s new book


FIN