Copyright (c) 2023 Juan Sierra | ing.juan.sierra.sm@gmail.com
In this text, we can easily and solidly learn the syntax of the Markdown language.
Thank you for supporting me and giving this project a star ⭐.
↰ What is Markdown?
Markdown is one of the world's most popular lightweight markup languages:
- Created by John Gruber in 2004.
- Use Markdown's syntax to define the format of the text.
- Markdown's syntax is as readable as possible, and we can read it even if it isn't rendered.
- It can be used to create websites, documents, notes, books, presentations, email messages, and technical documentation.
- It is portable because it is a simple text file and is supported and used by many websites like Reddit and GitHub.
↰ Markdown's syntax
↰ Headings
-
Add from 1 to 6 (#) (depending on the heading level) before the words that compose it.
- Always put a space after the number signs (#).
- Put blank lines before and after a Heading.
-
There is an alternative syntax for heading levels 1 and 2, on the line below the text, add any number of:
- == characters for heading level 1
- -- characters for heading level 2.
# h1: Heading Level 1h1: Heading Level 1 =====
## h2: Heading Level 2h2: Heading Level 2 ------------
### h3: Heading Level 3 #### h4: Heading Level 4 ##### h5: Heading Level 5 ###### h6: Heading Level 6
↰ Paragraphs
Separate with a blank line (Type Enter) 2 paragraphs or lines of text.
Paragraph 1.
Paragraph 2.Paragraph 1.
Paragraph 2.
↰ Line Breaks
-
Add 2 or more spaces after the line text (trailing whitespace) and type Enter.
-
You can use the
<br>HTML tag as alternative.Line text. Other line text.<br> Other line text.Line text.
Other line text.
Other line text.
↰ Emphasis
We can emphazise a text using bold or italic.
↰ Bold:
Add two underscores or asterisks before and after the text to be emphasized.
text to be __emphasized with bold__
text to be **emphasized with bold**text to be emphasized with bold
text to be emphasized with bold
↰ Italic:
Add one underscores or asterisks before and after the text to be emphasized.
text to be _emphasized with italic_
text to be *emphasized with italic*text to be emphasized with italic
text to be emphasized with italic
↰ Bold and Italic:
Add three underscores or asterisks or a combination of them before and after the text to be emphasized.
text to be ___emphasized with italic and bold___
text to be ***emphasized with italic and bold***
text to be **_emphasized with italic and bold_**
text to be __*emphasized with italic and bold*__ text to be emphasized with italic and bold
text to be emphasized with italic and bold
text to be emphasized with italic and bold
text to be emphasized with italic and bold
-
If you need to emphasize letters within a word, just use asterisks.
the*word*emphasized the**word**emphasized the***word***emphasized
thewordemphasized
thewordemphasized
thewordemphasized
↰ Blockquotes
A Blockquote is used to write an exact paragraph or quote so that it can be distinguished from the rest of the text.
-
Add a (>) before the quote or paragraph.
-
To separate paragraphs, add a blank line by adding a (>) and typing enter.
-
Add (>>) or more before a nested Blockquote.
-
Put blank lines before and after Blockquote.
> This is an exact paragraph or exact quote. > > Add a blank line between paragraphs. >> Nested Blockquote. >>> Other nested Blockquote.
This is an exact paragraph or exact quote.
Second line.Add a blank line between paragraphs.
Nested Blockquote.
Other nested Blockquote.
-
Blockquotes can use the most of Markdown formatted elements (not all).
> # Blockquote. > Second line. > ------------- > Add a blank line between paragraphs. >> - Nested Blockquote. >> - Nested Blockquote.
Add a blank line between paragraphs.
- Nested Blockquote.
- Nested Blockquote.
↰ Lists
We can create ordered and unordered lists.
↰ Ordered lists:
-
Add Ordered list items with integer numbers followed by period and space.
-
The list have to start with number one after, don't worry about the numerical order.
1. one item 1. two item 3. three item 15321. four item
- one item
- two item
- three item
- four item
↰ Unordered lists:
-
Add Unordered list items with a dash (-), asterisk (*), or plus sign (+) followed by a space.
-
As a good practice, only use one type of sign for the entire list.
+ item + other item + other item
- item
- other item
- other item
* You can add another list or Markdown element to a list just by indenting it into one of its items.
1. one item ordered list
2. second item: add unordered list
+ item
+ other item
+ add a Blockquote
> Blockquote
3. third item- one item ordered list
- second item: add unordered list
- item
- other item
- add a Blockquote
Blockquote
- third item
↰ Links
We can create a link to go to an external website or a specific section of the document.
-
A link is made top of a link text enclosed in square brackets and the url enclosed in parentheses.
-
Optionally, you can add a Title by enclosing in (" ") and placing it right next to the URL. This is displayed when the mouse hovers over the link.
[This is a link](https://www.markdownguide.org) [This is a link](https://www.markdownguide.org "Optional Title")
-
A section is a document heading. You can use a link to go to a specific section in your document or inside an external website.
-
Place the section name in lowercase instead of the URL immediately after a (#) omitting the special characters and replacing the spaces with dashes.
# The Example: Link $ #Secti0ns [link to section](#the-example-link--secti0ns "Go to section") [Heading IDs](https://www.markdownguide.org/extended-syntax#heading-ids)
* When you have links within a text it can make it difficult to read, to solve this you can use the Reference-style Links that divide the link into two parts.
-
First part: You put this part in the text. It consists of 2 sets of brackets. Inside the first set of brackets, you put the link text, and inside the second set of brackets (it's not case-sensitive) you put a tag, which is basically a text that serves as a reference to join the first part to the second part.
-
Second part: You can put this part anywhere in the document, it consists of 2 mandatory attributes and one optional:
- The tag enclosed in square brackets followed by a colon and at least one space.
- The URL optionally enclosed in angle brackets (< >).
- (Optional) The Title for the link can be enclosed in double quotes (" "), single quotes (' '), or parentheses.
<!-- Readable text --> This is text, and you can place one or more [Reference-style Links][tag] like [link 1][1] and [link 2][Not Case-sensitive] that help us not to affect the readability of the text. <!-- Tags with URL: They are not rendered. --> [tag]: https://www.markdownguide.org/basic-syntax/#formatting-the-second-part-of-the-link "Go to Reference-style Link" [1]: <#links> [not case-Sensitive]: #links (Go to links)
This is text, and you can place one or more Reference-style Links like link 1 and link 2 that help us not to affect the readability of the text.
↰ URLs and Email Addresses:
You should enclose the URL or email in angle brackets (<>); however, if you don't, they may be automatically converted to links if your Markdown processor supports it.
<https://www.markdownguide.org>
https://www.markdownguide.org
<email@example.com>
https://www.markdownguide.org
https://www.markdownguide.org
email@example.com
* You can indicate the URL or email as Inline code by enclosing it in backticks ( ` ). If you don't want a URL to be linked automatically.
https://www.markdownguide.org
`https://www.markdownguide.org`https://www.markdownguide.org
https://www.markdownguide.org
↰ Images
The syntax for adding images is very similar to the link syntax, just add a sign (!) at the beginning.
- An Image is made top of an Alternative text (Text to display in case the image fails to render.) enclosed in square brackets and the image URL enclosed in parentheses.
- Optionally, you can add a Title by enclosing in (" ") and placing it right next to the URL. This is displayed when the mouse hovers over the image.
↰ Linked images:
To add a link to an image, enclose the image syntax within brackets, and then add the URL within parentheses.
[](https://icon-library.com/images/markdown-icon/markdown-icon-4.jpg)
↰ Code
We can create inline code or code blocks.
↰ Inline code:
Enclose the phrase or code in backticks (`). If the code includes one or more backticks, use double backticks (``).
This is a text that has a `<code>`.
This is a text that has `` a `<code>` with backticks inside``.This is a text that has a <code>.
This is a text that has a `<code>` with backticks inside.
↰ Code blocks:
When we have more than one line of code, we use code blocks, There are two options to create a code block:
- Indenting: Indent all the lines of code.
- Fenced: Depending on your Markdown processor or editor, add three backticks (```) or three tildes (~~~) on the lines before and after the code block. Optionally, you can also add syntax highlighting, specifying a language next to the backticks before the fenced code block.
```
<code>
<span>code block</span>
</code>
```
``` html
<code>
<span>fenced code block</span>
</code>
```<code>
<span>code block</span>
</code>
<code>
<span>fenced code block</span>
</code>↰ Tables
To create a table, in the first step is mandatory to define the table header, whose syntax consists of two lines:
- On the first line, you must place the column headers, separated by a vertical pipe ( | ).
- On the second line, you must place three or more hyphens under each column header_ and separate each group of hyphens with a pipe ( | ).
The second step is to create each of the rows, where the content of each of the columns is separated by a pipe. You can add links, inline code (not code blocks), and emphasis.
* You must put a pipe ( | ) at the beginning and end of each of the lines of the table.
| column header 1 | Column header 2|
|-------------------|----------------|
| _row 1.1_ | ___row 1.2___ |
| [row 2.1](#tables)| `row 2.2` |
|column header 1|Column header 2|
|-----|---|
|_row 1.1_|___row 1.2___|
|[row 2.1](#tables)|`row 2.2`|
| column header 1 | Column header 2 |
|---|---|
| row 1.1 | row 1.2 |
| row 2.1 | row 2.2 |
| column header 1 | Column header 2 |
|---|---|
| row 1.1 | row 1.2 |
| row 2.1 | row 2.2 |
↰ Alignment:
You can align the content of each of the columns to the left, right, or center by adding a colon ( : ) to the left, right, or on both side of the hyphens within the second line of the table header.
|left alignment |Center alignment |right alignment |
|:------------------|:---------------:|---------------:|
| _row 1.1_ | ___row 1.2___ | row 1.3 |
| [row 2.1](#tables)| `row 2.2` | row 2.3 |
| left alignment | Center alignment | right alignment |
|---|---|---|
| row 1.1 | row 1.2 | row 1.3 |
| row 2.1 | row 2.2 |
row 2.3 |
↰ Horizontal Rules
On a line, add only three or more asterisks (***), hyphens (---), or underscores (___). Add a blank line before and after a horizontal rule.
---
******
__________
↰ Additional syntax
You can use additional syntax if your Markdown editor or processor supports it, such as GitHub.
↰ Strikethrough
You can strike through multiple words by enclosing them in two tilde symbols (~~) to indicate that these words are in error or should be removed from the document.
these ~~words should be removed~~ from the documentthese words should be removed from the document
↰ Task Lists
You can create a task list with checkboxes you have to define three parts separated by a space:
- A hyphen (Indicates the beginning of a list item).
- The checkbox that is created with a pair of brackets that enclose an
xif it is selected or aspaceif it is not. - The list item.
- [x] item selected
- [ ] item not selected
- [x] item selected- item selected
- item not selected
- item selected
↰ Emojis
You can add emojis by copying them from a source like Emojipedia and pasting them into the Markdown text, or you can also use Emoji Shortcodes which enclose the names of the emojis (spaces are replaced by an underscore) in ( : ).
this is an emoji copied 😉
this is an emogi shortcode :wink:this is an emoji copied 😉
this is an emogi shortcode 😉
↰ Escaping Characters
To display any character that is used in Markdown syntax, just add a backslash ( \ ) before it.
This table shows the characters that you can escape with backslash:
| Character | Name |
|---|---|
| # | pound sign |
| \ | backslash |
| ` | backtick |
| * | asterisk |
| + | plus sign |
| - | minus sign (hyphen) |
| _ | underscore |
| { } | curly braces |
| [ ] | brackets |
| < > | angle brackets |
| ( ) | parentheses |
| . | dot |
| | | pipe |
| ! | exclamation mark |
For example:
__\#__: This is a pound sign
__\!__: This is an exclamation mark#: This is a pound sign
!: This is an exclamation mark