Amblem
Furkan Baytekin

Master Markdown: Simplify Writing with Syntax

Learn MarkDown easily, can be learned in a short time.

Master Markdown: Simplify Writing with Syntax
111
15 minutes

Markup, or markup languages, are interpreted by the necessary programs and made easier for people to understand.

The most commonly used and well-known of these is HTML (Hyper Text Markup Language). MarkDown, on the other hand, reversed the word Up and made a word game of its own.

MarkDown is a markup language that also supports HTML tags and can be easily learned in a very short time.

Why Should I Learn MarkDown?

If you are reading this article on Github - first of all, star the original repo - you must have noticed that there are README.md files in almost every repo on Github. These files are interpreted as HTML by Github on the repo’s website and displayed on the page. As you will notice, the file you are currently reading is also a README.md file. So, first of all, you should learn markdown to introduce our projects correctly on Github.

Secondly, you may want to publish markdown-based blog posts. There are programs that automatically add the texts you write with MarkDown to your website. You can learn MarkDown to use it here.

I also keep my lecture notes in MarkDown format because it is easy to write. Then it is very easy to introduce these notes to my programs.

It is also very easy to introduce your text to programs logically.

MarkDown Elements

The main purpose of MarkDown is to display our writings logically in web browsers. Since web browsers also understand HTML, the elements we write with MarkDown must also be converted to HTML. So let’s see what we have.

MarkDown Elements:

Now let’s look at what these are one by one.

Fonts

You may want to write bold, italic, strikethrough, underline colorful background text in places where you need to draw attention in your text.

However, many MarkDown renderers will not support underline or colored background text. You will need to use HTML codes here.

md
* **Bold text**
* __Bold text__
* _Italic text_
* *Italic text*
* ___Bold italic text___
* _**Bold italic text**_
* **_Bold italic text_**
* ~~Strikethrough text~~
* <u>Underline text</u>
* ==Text with colored background== (Mostly not supported.)
* <mark>Text with colored background</mark>

The HTML version of these displays is as follows:

html
<ul>
<li><b>Bold text</b></li>
<li><b>Bold text</b></li>
<li><i>Italic text</i></li>
<li><i>Italic text</i></li>
<li><b><i>Bold italic text</i></b></li>
<li><i><b>Bold italic text</b></i></li>
<li><b><i>Bold italic text</i></b></li>
<li><strike>Strikethrough text</strike></li>
<li><u>Underline text</u></li>
<li>==Full text == (Mostly not supported.)</li>
<li><mark>Full text</mark></li>
</ul>

The document is processed state:

Headings

Web browsers define 6 levels of headings by default. Logically, these heading levels are scanned by search engines. While definitions are made in HTML as <h1>Level 1 Heading</h1>, <h6>Level 6 Heading</h6>, these are defined in MarkDown

md
# Level 1 Heading
## Level 2 Heading
### Level 3 Heading
#### Level 4 Heading
##### Level 5 Heading
###### Level 6 Heading

is shown as. In other words, we put as many # as the number of degrees. However, make sure there is a space between the heading and #.

The processed version of the document:

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

Paragraphs

You do not need to specify anything for the paragraph. Normally shown as <p>Paragraph text here.</p> in HTML, this element is indicated with only one extra line break in MarkDown.

When you skip a single line, the paragraph continues as is. You must leave an extra line break to go to a second paragraph.

Note: We know that we can write code more easily in the text editor with the command to split the line we show with the vgw shortcut in Vim into multiple lines. Therefore, it is important to skip the extra line.

The rendered output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut labore et dolore magna aliqua. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Eget egestas purus viverra accumsan in nisl nisi scelerisque.

Sodales ut etiam sit amet nisl purus in. Aliquam ultrices sagittis orci a scelerisque purus Etiam dignissim diam quis enim lobortis scelerisque. Scelerisque in dictum non consectetur a. Nibh venenatis cras sed felis. nunc faucibus a pellentesque sit amet.

Ordered and Unordered Lists

We use two different types in lists, where the order is important and when it is not.

Ordered Lists

In ordered lists, the order is automatically incremented by web browsers.

Therefore, you do not have to increment it yourself in HTML and MarkDown forms. You just need to give the initial value to MarkDown is sufficient for. A list element is created by putting a number, a period and a space.

md
1. List Element
2. List Element
3. List Element

representation is actually

md
1. List Element
1. List Element
1. List Element

is the same as . This representation is shown in HTML as follows.

html
<ol>
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>

</ol>

As you can see, we did not give any order for sorting in the HTML display.

If we wanted to start sorting in another way, we could start writing with any number we wanted. In this case, it will be enough to pay attention to the number of the first element.

md
17. List Element
1. List Element
1. List Element

This display means the following in HTML:

html
<ol start="17">
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ol>

Note: Unfortunately, MarkDown can only use the default listing types. You need to set the numbers, letters, Roman numerals, etc. with css or html .

The processed version of the document:

  1. List Element
  2. List Element
  3. List Element

Unordered Lists

This type of list is used in cases where the order of the elements is not important. Here, the element is specified by using -, * or + followed by a space.

md
* List Element
- List Element
+ List Element

The HTML equivalent of this representation will be as follows:

html
<ul>
<li>List Element</li>
</ul>
<ul>
<li>List Element</li>
</ul>

<ul>
<li>List Element</li>
</ul>

It will mean because we used 3 different list element operators here. Therefore, we have 3 different lists.

The processed version of the document:

Nested Lists

A list element can also have sub-elements. In these cases, you can leave a tab space or 4 spaces. Also, ordered and unordered lists can be nested. For example:

md
* List Element
1. Sublist Element
1. Sublist Element
- Sublist Element of Sublist
- Sublist Element of Sublist
- Sublist Element of Sublist
1. Sublist Element

* List Element
* List Element

The rendered document:

  1. Sublist Element
  2. Sublist Element
  1. Sublist Element

Code Blocks

Code blocks are rendered by every renderer, but not all of them provide syntax highlighting. If you are going to write a README file on Github, you can use this feature.

Code blocks are shown as follows:

md
```
def sayHi():
print("Hello World!")
```

The quotes used here are specified as back quote, backtick.

The HTML equivalent of this notation is as follows.

html
<code>
def sayHi():
print("Hello World!")
</code>

The processed version of the document:

def sayHi():
print("Hello World!")

Let’s also look at syntax coloring. As I said, this feature may not be supported by every platform. To use it, it is enough to write the name of the language you want or the file extension at the beginning of the code block.

md
```js
const sayHi = () => {
console.log("Hello World")
}
```

md
```rust
fn main() {
println!("Hello World!")
}
```

The processed version of the document:

js
const sayHi = () => {
console.log("Hello World")
}

rust
fn main() {
println!("Hello World!")
}

Horizontal Brackets

They are brackets used to separate two texts. In HTML, they are shown with the <hr/> element, while in MarkDown they are used in ---, ***, *-*, -*- like these.

The processed version of the document:

Images

It is also very easy to add images to a document. You can add images by putting an exclamation point, then inside the vertical brackets the image description and inside the brackets the image address. For example:

md
![Blue Penguin Wallpaper](https://raw.githubusercontent.com/Elagoht/OneLinePinguin/main/pinguin-blue.png)

The HTML equivalent of this representation is as follows:

html
<img alt="Blue Penguin Wallpaper" src="https://raw.githubusercontent.com/Elagoht/OneLinePinguin/main/pinguin-blue.png"/>

The processed version of the document:

Blue Penguin Wallpaper

With links or hyperlinks, we can create links within the page or to other pages. You can create a link by putting the text you want to link in right brackets and the link in brackets. In other words, you can think of links as images without an exclamation mark at the beginning.

md
[Click](https://www.youtube.com/@herkesicinlinux) to subscribe to my channel!

The HTML equivalent of this representation is as follows:

html
<p>
To subscribe to my channel <a href="https://www.youtube.com/@herkesicinlinux">click</a>!
<p>

The processed form of the document will be as follows:

To subscribe to my channel click!

Also, if a link and the link text will be the same, instead of writing the same link inside the right brackets and parentheses, you can write the link directly between the less than and greater than signs.

md
My Github Profile Address: <https://github.com/Elagoht>

The processed form of the document:

My Github Profile Address: https://github.com/Elagoht

Quotes

Quotations are texts such as aphorisms that we normally show in quotation marks, they can be shown on multiple lines:

md
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
> tempor incididunt ut labore et dolore magna aliqua. Et malesuada fames hungry
> turpis egestas maecenas pharetra convallis. Eget egestas purus viverra
> accumsan in nisl nisi scelerisque.

In HTML, this command is represented as follows:

html
<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
 Eiusmod tempor incididunt ut labore et dolore magna aliqua. meat malusada
 fames ac turpis egestas maecenas pharetra convallis. Eget egestas purus
 viverra accumsan in nisl nisi scelerisque.</p>
</blockquote>

Processed version of the text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et malesuada fames hungry turpis egestas maecenas pharetra convallis. Eget egestas purus viverra accumsan in nisl nisi scelerisque.

Tables

Although it is quite difficult to detect tables on HTML, they work in MarkDown It is very easy. However, the tables you write in MarkDown must have a There should be a header line.

When separating cells with a pipe (|), after the header line, a line with cells - is written once:

md
| Header 1 | Header 2 |
| -------- | -------- ||
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

It can be shown as follows, but it can also be shown as follows to make it more readable for those who read the text in its raw form:

md
| Heading 1 | Heading 2 |
| --------- | --------- |
| Cell 1    | Cell 2    |
| Cell 3    | Cell 4    |

This representation in HTML will look like this. As you can see, the Markdown version is much easier to read.

html
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>

The processed version of the document:

Heading 1 Title 2
Cell 1 Cell 2
Cell 3 Cell 4

However, we should also note that if you want to extend a cell or row, or merge cells, you will have to use HTML codes.

However, you can also decide how to align the data in tables. If you put a colon (:) before the dashes, it aligns to the left, if you put it after the dashes, it aligns to the right, if you put it on both sides, it aligns to the center.

md
| Product | Price |
| :-----: | ----: |
|  Coat   |   999 |
|  Shoes  |   399 |
|  Pants  |   449 |
|  Shirt  |   299 |

The processed version of the document:

Product Price
Coat 999
Shoes 399
Pants 449
Shirt 299

Footnotes

We are quite used to seeing these notes in books and computer documents. As a substantial information, we write some word meanings or additional information such as translator’s notes. Although Markdown supports this, it may not be supported by all processors[1]. You can use it as follows.

Text to be explained[^1]

...

[^1]: Explanation of the text

Processed version of the document:

Text to be explained[2]

…

Definition Lists

Definition lists are used to give multiple concepts and their definitions together. This feature may not be available in all processors.

md
Rust
: Rust, which is a low-level language, provides the highest
performance in memory management.

Python
: It is one of the high-level languages ​​and the flexibility of its syntax makes it very useful. However, it is quite slow compared to other languages.

JavaScript
: A scripting language used to create dynamic web page content that runs client-side in the web browser.

Shell Script
: A scripting language used for Unix shell programming.

The HTML equivalent of the display will be as follows:

html
<dl>
<dt>Rust</dt>
<dd>Rust, which is a low-level language, provides the highest performance in memory management.</dd>
<dt>Python</dt>
<dd>It is one of the high-level languages ​​and the flexibility of its syntax makes it very useful. However, it is quite slow compared to other languages.</dd>
<dt>JavaScript</dt>
<dd>It is a scripting language used to create dynamic web page content that runs client-side in the web browser.</dd>
<dt>Shell Script</dt>
<dd>It is a scripting language used for Unix shell programming.</dd>
<dt>Rust</dt>
<dd>Rust, which is a low-level language, provides the highest performance in memory management.</dd>
</dl>

Processed version of the document:

Rust
Rust, which is a low-level language, provides the highest performance in memory management.
Python
It is one of the high-level languages ​​and the flexibility of its syntax makes it very useful. However, it is quite slow compared to other languages.
JavaScript
It is a scripting language used to create dynamic web page content that runs client-side in the web browser.
Shell Script
It is a scripting language used for Unix shell programming.

Task Lists

A feature that can meet needs such as to-do lists, shopping lists, etc. This feature may not be supported everywhere. You can also use other list element markers instead of -.

md
- [X] Read the document carefully.
- [ ] Star the Github repo.
- [ ] Subscribe to the Youtube channel.

The processed version of the document:

Emojis

Probably one of the least supported features. You can find a list of all emojis at https://github.com/markdown-templates/markdown-emojis

md
:point_right::point_left:

The processed version of the document:

👉👈

Headers and Footers

You can also write notations like H2O, 3rd, 1st with Markdown.

md
* H~2~O
* H~2~SO~4~
* 1^st^
* 2^nd^
* 3^rd^
* 4^th^

html
<ul>
<li>H<sub>2</sub>O</li>
<li>H<sub>2</sub>SO<sub>4</sub></li>
<li>1<sup>st</sup></li>
<li>2<sup>nd</sup></li>
<li>3<sup>rd</sup></li>
<li>4<sup>th</sup></li>
</ul>

The processed text:

When MarkDown Is Not Enough

As you may have noticed, MarkDown is a markup language developed to be practical and easy. If you are going to do more complicated things than the simplicity of MarkDown, you can do it with HTML.

For example, the code below is a MarkDown code, but it is exactly the same as HTML.

Because in MarkDown, you can escape to HTML tags whenever you want.

md
<table>
<thead>
<tr>
<th>Category</th>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Clothing</td>
<td>Coat</td>
<td>999</td>
</tr>
<tr>
<td>Shoes</td>
<td>399</td>
</tr>
<tr>
<td>Pants</td>
<td>449</td>
</tr>
<tr>
<td rowspan="3">Book</td>
<td>Software</td>
<td>147</td>
</tr>
<tr>
<td>Novel</td>
<td>68</td>
</tr>
<tr>
<td>Personal Development</td>
<td>73</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="center">Total</td>
<td>2135</td>
</tr>
</tfoot>
</table>

The processed version of the document:

Category Product Price
Clothing Coat 999
Shoes 399
Pants 449
Books Software 147
Novels 68
Personal Development 73
Total 2135

Course Finished 😊

If you found the course really useful, don’t forget to share it with your friends.

  1. If you can get here now, it means that this feature is supported by the program you are using. ↩︎

  2. Explanation of the text ↩︎

Suggested Blog Posts

Cover art of the suggested blog post

The Birth of The Alan Parsons Project: From Pink Floyd to Prog Rock Greatness

Cover art of the suggested blog post

SEO Factors for Developers & Content Creators

Cover art of the suggested blog post

How Schema.org and JSON-LD Impact Your Site's SEO?