Use Markdown from basic to advanced

Tram Ho

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:

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:

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.
Markdown illustration

4. Use

4.1 – Title

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:

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:

Output:
You are like the sun.
I wanted to look …

4.4 – Emphasis words

Bold

Have 2 way:

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:

Output:
Chairman Cuong
Chairman Ko ‘s wife doesn’t know

4.5 – Blockquotes

Add> before 1 paragraph.

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:

Output:

  1. Product
  2. Contact
  3. Porridge heart
  4. Pudding

No order

Items starting with: 1 * or + or – + space + item name

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.

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.

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 ___

Output:


4.9 – Links

See examples for visualizing roots:

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.

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 😊😊 )

Output:
https://www.markdownguide.org
[email protected]

Format links

That is to make the links bold or italic.

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:

Now we have another type:

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:

Specifically everyone:

Output:
Xinh thế em ơi!

Linking Images

Syntax above image, we put in brackets [] + (in this url is to a certain page), for example, it rooted understand.

Output:
Xinh như tó thế em ơi!

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.

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.

Output:

First and last nameSex
Sung Baimale
FireplaceFemale

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.

Output:

First and last nameSexNation
Sung BaimaleButtocks
FireplaceFemaleHey 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: &#124;

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.

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.

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

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo