1. What is Markdown?
Markup language is used to add formatting elements such as headings, bold / italics, lists, etc. to your text documents.
Text written in Markdown will be converted into HTML and vice versa.
2. Why should you use it?
- Markdown can be used in everything. You can use it to create websites , documents , notes , books , presentations , email messages , and technical documentation .
- Markdown is everywhere. Websites like Reddit and Github both support Markdown and a lot of Desktop and Web applications support it.
- We have another very popular markup language, which is HTML. It is commonly used in applications that use the internet from websites to email content or many online tutorials that also use html. However, the syntax of HTML is not well understood and visualized so HTML is not very user friendly. For example, we have the following HTML:
1 2 3 4 5 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> Chào em <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> Em tên gì? <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> Anh quen em ko nhỉ! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> Hình như em là vợ tương lai của anh đấy hehe! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> |
Looking at the HTML above, writing the opening and closing tags is quite long and annoying for me. Suppose for people who do not use HTML like me ^ – ^ but often use *. () … when writing text or something, remember the tags, write them and then show them. How can it be a problem, right?
Instead of writing complex text like HTML to display such content, we use Markdown much faster and simpler:
1 2 3 4 5 | # Chào em Chào em Em tên gì? Anh quen em ko nhỉ! |
3. The way it works
When you write in Markdown, the text will be stored in the original text file (raw text) with the extension .mh or .markdown. But then what? The way that my Markdown file was formatted (Formatted) was converted into HTML or a ready-to-print document.
The answer is that you need a Markdown Application to be able to process (compile) markdown files such as Microsoft Word, Dillinger, VS Code … to display Markdown-formatted text.
The Markdown Application uses something called the Markdown processor (often called the “parser” or “implementation – I don’t understand what is the implementation here? Read your explanation for me! !! “) to get into a formatted Markdown text into an HTML format (ie HTML) such as: Dillinger, on VS code, you refer to Compiling Markdown into HTML …
See the image for rooting visualization.
4. Use
4.1 – Title
1 2 3 4 5 6 7 | # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 |
Output:
h1
h2
h3
h4
h5
h6
4.2 – Paragraph
Use 1 blank line to separate one or more lines of text. Note that not indented by space or tab otherwise the text will be changed to Code block in markdown. For example:
1 2 3 4 | Chào em Em ăn khoai ko |
Output:
Hi
Do you eat potatoes?
4.3 – Line break
To wrap a line, use 2 or more spaces at the end of the line that you want to separate. For example:
1 2 3 | Em như ánh mặt trời. Nhìn em anh đã muốn... |
Output:
You are like the sun.
I wanted to look …
4.4 – Emphasis words
Bold
Have 2 way:
1 2 3 | Ai hay **Ảo tưởng** Thì bớt __Ảo Tưởng__ đi. |
Output:
Who or Illusion
Reduce your Illusions .
Italicized
The spelling is similar to italic, but has only 1 star and 1 dash before and after the word.
Bold and inclined
There are 4 ways but I just recommend 2 ways that people use most:
1 2 3 | Chủ tịch ***Cuong*** Vợ chủ tịch ___Ko biết___ |
Output:
Chairman Cuong
Chairman Ko ‘s wife doesn’t know
4.5 – Blockquotes
Add> before 1 paragraph.
1 2 | > Mùa đông lạnh thụt ... |
Output:
Cold winter …
4.6 – List
Drop one or more items in the parent item to get a nested list.
Orderly
Items in the list must start with 1 number + period + space + item name. Note : The number here is not the item number (ie any number> = 0): VD:
1 2 3 4 5 6 | 1. Sản phẩm 2. Liên hệ 6. Cháo lòng 5. Tiết cách |
Output:
- Product
- Contact
- Porridge heart
- Pudding
No order
Items starting with: 1 * or + or – + space + item name
1 2 3 4 5 | * Mùa xuân - Mùa hạ + Mùa thu * Mùa đông |
Output:
- Spring
- Summer
- Fall
- Winter
Add elements
To add other elements to a list while maintaining the continuity of the list, that element must be indented with 4 spaces or 1 tab.
1 2 3 4 | * Xuân đã đến bên em * Dáng xuân tuyệt vời |
Output:
- Spring has arrived
beside you - Great spring
4.7 – Code block
To define and define a block of code, we indent the tab or 4 spaces. This is not recommended because it is often confusing.
1 2 3 | Tết tết tết đến rồi Tao tao tao trắng túi rồi |
Output:
Because viblo does not support code blocks with indentation, you try here
4.8 – Horizontal ruler
There are 3 ways to make a horizontal ruler: 3 signs *** or – – – or ___
1 2 3 4 | *** - - - ___ |
Output:
4.9 – Links
See examples for visualizing roots:
1 2 | Muốn hiểu sâu, nhớ sâu, sau này quên thì hãy viết 1 blog trên [Viblo](https://viblo.asia) |
Output:
Want to understand deeply, remember deeply, later forget to write a blog on Viblo
Add titles
It appears a tooltip when you hover over the link.
1 2 | Hãy viết bài trên [Viblo](https://viblo.asia "Viblo việt nam") |
Output:
Please write on Viblo
urls & email address
To quickly convert a url or email into a link, put them in <> (the shorter version of the above, but not aesthetic and long )
1 2 3 | <https://www.markdownguide.org> < <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="0a6c6b616f4a6f726b677a666f24696567">[email protected]</a> > |
Output:
https://www.markdownguide.org
[email protected]
Format links
That is to make the links bold or italic.
1 2 3 | I love supporting the **[EFF](https://eff.org)**. This is the *[Markdown Guide](https://www.markdownguide.org)*. |
Output:
I love supporting the EFF .
This is the Markdown Guide .
Links of reference types
Understand simply to make the link I wrote in markdown it more beautiful, neat instead of you or put the url into 1 text like this:
1 2 | Ngày xửa ngày xưa có 1 anh tên [mạng xã hội lotus](https://lotus.vn/w/) vừa mới ra mắt đã bị chê lên chê xuống vì người việt ko ủng hộ hàng việt.... |
Now we have another type:
1 2 3 4 5 6 7 | (a) = Ngày xửa ngày xưa có 1 anh tên [mạng xã hội lotus][1] vừa mới ra mắt đã bị chê lên chê xuống vì người việt ko ủng hộ hàng việt.... (b) = [1]: <https://lotus.vn/w/> = (or) [1]: <https://lotus.vn/w/> "Mạng xã hội lotus việt nam" = (or) [1]: https://lotus.vn/w/ = (or) [1]: https://lotus.vn/w/ "Mạng xã hội lotus việt nam" |
Output: Once upon a time, there was a guy named Lotus, who was just launched, was criticized because Vietnamese people did not support Vietnamese goods ….
Note: (b) in the above code, you can put anywhere in the document you are writing, if (b) is placed immediately after (a), then (b) must be (a) a blank line. , [1] in (a) and (b) must be the same and the number 1 in [1] is unique (only [1] appears 1 time) if there exists 2 [1] then the link it chooses [1] Firstly, if the first [1] is faulty, then it’s the second one. Try it out to see how it goes here.
4.10 – Images
Syntax:
1 2 | ![giá trị alt](Đường dẫn tuyệt đối (absolute-path tên khác là 1 cái url đầy đủ) or đường dẫn tương đối (relative-path : home/views...) "titile - có hoặc ko có title cũng đc") |
Specifically everyone:
1 2 | ![Xinh thế em ơi!](https://znews-photo.zadn.vn/w660/Uploaded/....68232_n_1.jpg "Xinh thật sự <3") |
Output:
Linking Images
Syntax above image, we put in brackets [] + (in this url is to a certain page), for example, it rooted understand.
1 2 | [![Xinh như tó thế em ơi!](https://znews-photo.zadn.vn/w660/Uploaded/...)](https://news.zing.vn/dan-trai-xinh-gai-dep-chiem-spotlight-nho-loat-anh-mac-dong-phuc-post1003190.html) |
4.11 – Escaping characters
Escaping characters means to release characters used for formatting in markdown . For example, when you want to display as grab: * Ngoc Trinh * is in markdown you write so is it italicized the word Parenthesis Trinh, to display as you want, the more characters: in advance what you want to show Marketing.
1 2 | *Bưởi to lắm Trinh ê* |
Output:
* Grapefruit is very big Trinh ê *
4.12 – Tables
To create the table we use 3 or more dashes (—) and use pipes (|) to separate the columns.
1 2 3 4 5 | |Họ và tên | Giới tính| |---|----------------| |Sùng a bái | Nam| |Lò a hính|Nữ| |
Output:
First and last name | Sex |
---|---|
Sung Bai | male |
Fireplace | Female |
Align
To align the text in the column to the left, right or middle, add a colon:: before or after or both before and after.
1 2 3 4 5 | |Họ và tên | Giới tính|Dân tộc| |:---|:----------------:|----:| |Sùng a bái | Nam|Hơ mông| |Lò a hính|Nữ|Ê đê| |
Output:
First and last name | Sex | Nation |
---|---|---|
Sung Bai | male | Buttocks |
Fireplace | Female | Hey damn |
Format text
Format the text inside the table. For example, you can add links , code (only words or phrases in () and no code blocks ), and emphasis (emphasis): bold, italic …
Do not add headings, blockquotes, lists, horizontal rules, images, and HTML tags.
Escaping pipe characters
You can use (|) in a table by using its HTML character code: |
4.13 – Fenced code blocks
We have a way to create a code blocks in markdown is to use 4 spaces or tabs but this way it is not convenient, confusing roots. Instead, we use the fence to create code blocks instead of indenting as before. Depending on your Markdown processor or editor, select the appropriate fence. Use 3 ( ”) or 3 (~~~) before and after a code block.
1 2 3 4 5 6 | <span class="token punctuation">{</span> <span class="token property">"firstname"</span> <span class="token operator">:</span> <span class="token string">"cuong"</span> <span class="token punctuation">,</span> <span class="token property">"lastname"</span> <span class="token operator">:</span> <span class="token string">"Nguyen"</span> <span class="token punctuation">,</span> <span class="token property">"age"</span> <span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span> |
Output:
See details here!
Systax highlight
Many Markdown processors support systax highlighting for fenced code blocks. That is, adding color highlights for scripts written in different languages. Specify the language you write in the code block after 3 ” in front of the code. Refer here!
4.14 – Heading IDs
- Many Markdown processors support custom IDs for headings – some processors automatically add IDs to headings. Add this ID, we have direct link to the title that we set this ID and this ID, we can also edit them with CSS.
- Syntax: # (##, ### …) + heading name + {# + ten-ID}
- See VD in Heading IDs
Linking to Heading IDs
You click on the link and it jumps to the heading whose ID matches the ID in your link.
See details in Linking to Heading IDs when you click on Heading IDs in the table as it jumps to the Heading IDs heading.
4.15 – Strikethrough
Use (~~) before and after 1 word or phrase.
1 2 | ~~Em là Hương~~. Anh nhớ là anh chén em rồi mà hương. |
Output:
I am Huong . I remember that I ate you then flavored.
5. Summary
- And some other sections such as Task Lists , … then you refer to the homepage of Markdown dodge!
- Some other functions you can do on viblo here!
- If there is anything wrong with my article, please give me suggestions!
- I do not understand this Implementation term so you know, the comment below is for reference! thank you!
You can practice writing in Markdown Here
Reference source
https://quantrimang.com/markdown-la-gi-va-tai-sao-nen-hoc-no-ngay-hom-nay-159018
https://viblo.asia/helps/cach-su-dung-markdown-bxjvZYnwkJZ#_mo-dau-0
https://www.markdownguide.org/
https://www.codehub.vn/Markdown-La-Gi