Markdown is a simple way to write and format text using plain text symbols. It’s a lightweight language that lets you create nicely formatted text without the use of complex coding. The idea is to make it easy for people to read and understand the formatting, even if they’re looking at the raw text.
This cheat sheet will go over some of the key components of markdown, including code syntaxes and examples that the reader can use to create their own highly formatted text articles.
These are the following markdowns:
Markdown Headings
It creates different levels/sizes of headings.
Markdown Syntax:
Markdown syntax for headings uses hash symbols (#) to denote different levels of headings, helping to structure and organize content by visually indicating the hierarchy of information.
HTML Syntax:
HTML syntax in Markdown involves using angle brackets (<>) and tags to format text, providing more control over styling and structure compared to Markdown’s simpler syntax.
| Element |
Description |
HTML Syntax |
Markdown Syntax |
| H1 |
Largest heading |
<h1>Heading 1</h1> |
# Heading 1 |
| H2 |
Second largest heading |
<h2>Heading 2</h2> |
## Heading 2 |
| H3 |
Third largest heading |
<h3>Heading 3</h3> |
### Heading 3 |
| H4 |
Fourth largest heading |
<h4>Heading 4</h4> |
#### Heading 4 |
| H5 |
Fifth largest heading |
<h5>Heading 5</h5> |
##### Heading 5 |
| H6 |
Sixth largest heading |
<h6>Heading 6</h6> |
###### Heading 6 |
Text Styles
Markdown allows us to apply many styles, such as bold, italics, blockquotes, underlining, strike-through, etc., to a selected text selection.
| Element |
Description |
Syntax |
| Bold |
Makes text bold. |
**text** or __text__ |
| Italics |
Makes text italic. |
*text* or _text_ |
| Blockquotes |
Indicates extended quotations. |
> Quoted text |
| Underline |
Underlines text. |
<ins>Underlined text</ins> |
| Strike-through |
Strikes through text. |
~~text~~ |
| Boxed |
Creates a box around text. |
<table><tr><td>Text</td></tr></table> |
| Superscript |
Creates superscript text. |
<sup>Superscript</sup> |
| Subscript |
Creates subscript text. |
<sub>Subscript</sub> |
Syntax Highlighting
Syntax highlighting in Markdown allows you to format and highlight code snippets for better readability. It’s particularly useful when sharing code in technical documentation or online forums.
| Feature |
Syntax |
Output |
| Single Line Code |
` int z = 19; ` |
int x = 19; |
| Multiline Code |
``` int y = 4;
cout << y << endl;
``` |
int y = 4;
cout << y << endl; |
| Syntax Highlighting with Language Specified |
``` Python
int x = 10;
cout << x << endl;
``` |
Python
int x = 10;
cout << x << endl; |
Markdown Tables
Markdown tables are a way to organize data in a structured format within a Markdown document. They consist of rows and columns, with each cell containing data. Tables in Markdown are created using a combination of vertical bars (|) and hyphens (-) to define the columns and rows, respectively. The first row typically contains the column headers, while subsequent rows contain the data. For example:
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
This code produces the following table:
| Column 1 |
Column 2 |
Column 3 |
| Data 1 |
Data 2 |
Data 3 |
| Data 4 |
Data 5 |
Data 6 |
- In Markdown, you can align the values of the columns of a table to the left, right, or center using the
:--:, :--, or --: symbols, respectively. This is done by placing these symbols between the vertical bars (|) in the table’s header row.
Example:
| Left-aligned | Center-aligned | Right-aligned |
|:-------------|:--------------:|--------------:|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
Output:
| Left-aligned |
Center-aligned |
Right-aligned |
| Data 1 |
Data 2 |
Data 3 |
| Data 4 |
Data 5 |
Data 6 |
- Additionally, you can build a table with multiple lines using the HTML <br> tag. This tag can be used within a cell to create line breaks, allowing you to display multi-line text in a single cell.
Example:
| Column 1 | Column 2 |
|----------|----------|
| Line 1 | Line 1 |
| Line 2 | Line 2 |
| Line 3 | Line 3 |
Output:
| Column 1 |
Column 2 |
| Line 1 |
Line 1 |
| Line 2 |
Line 2 |
| Line 3 |
Line 3 |
Links
| Link Type |
Description |
Syntax |
Output |
| Inline Link |
Used to link users to another page, displayed as blue hyperlinked words. |
[Link Text](https://www.geeksforgeeks.org/) |
Link Text |
| Reference Link |
Used to link one information object to another, by providing some references to that new page. |
[Link Text] [reference text][reference text]: https://www.geeksforgeeks.org/ |
Link Text |
| Relative Link |
Shows the relationship between the current page’s URL and the linked page’s URL. |
[A relative Link] (rl.md) |
A relative Link |
| Auto Link |
Automatically converts URLs into clickable links. |
Visit https://www.geeksforgeeks.org/ |
Visit https://www.geeksforgeeks.org/ |
Images and GIFs
Inline Image:
Use an exclamation mark ! followed by square brackets [] for the alt text and parentheses () for the image URL.
Syntax:
![Alt Text] (Link)
Example:
![Alt Text] (https://media.geeksforgeeks.org/gfg-gg-logo.svg)
Reference Image:
Similar to reference links, you can define the alt text and image URL separately.
Syntax:
![Alt Text][1] and [1]:Link
Example:
![Alt Text][1] and [1]: https://media.geeksforgeeks.org/gfg-gg-logo.svg
Inline GIF:
Use the same syntax as inline images.
Syntax:
Example:
![Alt Text] (https://media.geeksforgeeks.org/wp-content/uploads/20240222163852/g1.gif)
Reference GIF:
Similar to reference images, you can define the alt text and GIF URL separately.
Syntax:
![Alt Text] [1] and [1]: Link
Example:
![Alt Text] [1] and [1]: https://media.geeksforgeeks.org/wp-content/uploads/20240222163852/g1.gif
Lists
Ordered Lists:
An ordered list defines a list of items in which the order of the items matter.
1. First item
2. Second item
3. Third item
Output:
- First item
- Second item
- Third item
Ordered List with Sublists:
An ordered list with sublists is a hierarchical list where each item can have its own sublist. This structure is useful for organizing information in a structured and hierarchical manner.
1. Item 1
1. Item 2
- Item 3
2. Item 1
1. Item 2
3. Item 1
1. Item 2
Output:
- Item 1
- Item 2
- Item 1
- Item 2
- Item 1
- Item 2
Unordered Lists:
With the asterisk(*), plus (+), or minus (-) signs, we can make unordered lists as demonstrated below:
With plus(+)
Output:
+ Item 1
+ Item 2
With asterisk(*)
Output:
* Item 1
* Item 2
With minus(-)
Output:
- Item 1
- Item 2
Unordered Nested Lists:
Similar to sorted lists, unordered lists can likewise be nested into several sublists below them. The markdown example that follows demonstrates the use of nested unordered lists.
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 1
- Item 2
Output:
Horizontal Rule:
A horizontal rule is used to separate content within a Markdown document. It is created by placing three or more hyphens, asterisks, or underscores on a line by themselves.
---
***
___
In Markdown, you can create comments using HTML comments. HTML comments are enclosed in <!-- and --> tags.
<!-- This is a comment -->
Output:
<!– This is a comment –>
Escape Characters
In Markdown, you can use escape characters to display characters that have special meaning in Markdown syntax. To use an escape character, you simply precede the character with a backslash (\).
After escaping by using the \ symbol as:
\* Asterisk
\\ Backslash
\` Backtick
\{} Curly braces
\. Dot
\! Exclamation mark
\# Hash symbol
\- Hyphen symbol
\() Parentheses
\+ Plus symbol
\[] Square brackets
\_ Underscore
Output:
* Asterisk
\ Backslash
` Backtick
{ Curly braces
. Dot
! Exclamation mark
# Hash symbol
- Hyphen symbol
() Parentheses
+ Plus symbol
[ ] Square brackets
_ Underscore
Share your thoughts in the comments
Please Login to comment...