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.
Links
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