Skip to content

⚫ The Ultimate Markdown Cheat Sheet ⚫


Important

Check out the official documentation on GitHub to learn more about writing and formatting syntax. Additionally, you can read the latest updates and features on Markdown by visiting the GitHub blog.

For hands-on learning:

Explore the module on Microsoft Learn.

 
Markdown-Cheatsheet ↗️
 

  • Introduction
    View Introduction

    Markdown is a way of writing rich-text content using plain text formatting syntax.

  • Headings
    View Headings

    Organise your content levels using standard ATX-style hash headings.

  • Text styles
    View Styles

    An overview of how to apply different visual formats to your text.

  • Normal
    View Normal

    Standard body text formatting for general paragraphs.

  • Bold
    View Bold

    Use double asterisks to give your text strong emphasis.

  • Italic
    View Italic

    Use single underscores or asterisks for subtle emphasis.

  • Bold and Italic
    View Combined

    Combine both styles for maximum impact on specific words.

  • Blockquotes
    View Blockquotes

    Highlight external quotes or callouts using the > syntax.

  • Monospaced
    View Monospaced

    Fixed-width text often used for technical terms or code.

  • Underlined
    View Underlined

    Applying underlines to text via HTML or specific extensions.

  • Strike-through
    View Strike

    Draw a line through text to indicate deletions or corrections.

  • Boxed
    View Boxed

    Wraps text in a visual container or border.

  • Subscript
    View Subscript

    Position text slightly below the normal line (e.g., H₂O).

  • Superscript
    View Superscript

    Position text slightly above the normal line (e.g., X²).

  • Small Text
    View Small

    Render text at a reduced size for fine print or captions.

  • Text Color
    View Color

    Changing the foreground color of your text elements.

  • Multiline
    View Multiline

    Handling text blocks that span across several lines.

  • Syntax Highlighting
    View Syntax

    Applying colour and formatting to various prog languages.

  • Inline code
    View Inline

    Embedding short snippets of code within a sentence.

  • Code block
    View Block

    Dedicated sections for multi-line source code.

  • Diff Code block
    View Diff

    Visualising changes, additions, and deletions in code.

  • Alignments
    View Alignments

    Positioning text to the left, right, or center.

  • Tables
    View Tables

    Organising data into structured rows and columns.

  • Links
    View Links

    Hyperlinking text to URLs or internal document anchors.

  • Inline Link
    View Inline

    Standard links defined immediately with the text.

  • Reference Link
    View Ref

    Defining link destinations elsewhere in the document.

  • Footnote
    View Footnote

    Adding citations or extra notes at the bottom of the page.

  • Relative Link
    View Relative

    Linking to other files within the same project or folder.

  • Auto Link
    View Auto

    Automatic conversion of URLs and emails into clickable links.

  • Section Link
    View Section

    Jump directly to a specific heading or anchor on the page.

  • Hover
    View Hover

    Adding tooltips or titles that appear on mouseover.

  • Enclosed
    View Enclosed

    Wrapping links within specific characters or delimiters.

  • Highlight & Link
    View Link

    Applying highlights to text that also functions as a link.

  • Images
    View Images

    Embedding and formatting visual assets in your content.

  • Theme
    View Theme

    Handling image styles based on user preferences.

  • Picture tag
    View Picture

    Using HTML5 picture tags for advanced image handling.

  • Dark/Light mode
    View Mode

    Swapping images based on the active theme.

  • Group
    View Group

    Displaying multiple images together in a gallery or set.

  • Badges
    View Badges

    Small status indicators often used for versioning or CI/CD.

  • Videos
    View Videos

    Embedding external video content or local media files.

  • Lists
    View Lists

    Structuring content using various list types.

  • Ordered
    View Ordered

    Creating sequential, numbered lists of items.

  • Unordered
    View Unordered

    Bullet-point lists for non-sequential information.

  • Task
    View Tasks

    Interactive or static checklists for project tracking.

  • Buttons
    View Buttons

    Creating call-to-action buttons within your documentation.

  • Emoji Button
    View Button

    Enhancing buttons with decorative or functional icons.

  • Collapsible
    View Collapsible

    Using details and summary tags to hide/show content.

  • Horizontal Rule
    View Rule

    Inserting thematic breaks or dividers between sections.

  • Diagrams
    View Diagrams

    Flowcharts and sequence diagrams using Mermaid or similar.

  • Mathematics
    View Math

    Rendering LaTeX or MathJax equations and formulas.

  • Alerts
    View Alerts

    Warning, info, and success callouts (admonitions).

  • Mentions
    View Mentions

    Syntax for tagging specific users or teams.

  • PRs & Issues
    View Refs

    Automatically linking to repository issues and pull requests.

  • Color models
    View Models

    Working with HEX, RGB, and HSL color values.

  • View Code
    View Code

    Techniques for displaying raw source code to users.

  • Code in titles
    View Titles

    Using backticks within header levels.

  • Ref Labels
    View Labels

    Advanced usage of labels for document cross-referencing.

  • Miscellaneous
    View Misc

    A collection of extra tips and less common features.

  • Comments
    View Comments

    Adding hidden developer notes within the source file.

  • Escaping
    View Escaping

    Using backslashes to render literal Markdown characters.

  • Emojis
    View Emojis

    Inserting icons and smileys using shortcode syntax.

  • Line break
    View Break

    Forcing new lines without starting a new paragraph.

  • Back to top
    View Top

    Adding navigation links to return to the page start.

  • Bitbucket
    View Bitbucket

    Specific Markdown flavors and features for Bitbucket.

  • Azure DevOps
    View Azure

    Guide to Markdown usage within Azure Project Wikis.

  • MDX
    View MDX

    Using JSX components directly inside your Markdown files.

  • Tools
    View Tools

    Recommended editors and plugins for MD development.

  • MaterialX Start Page
    Return to

    Back to the project's main landing page.

  • MkDocs➻MaterialX
    Return to MaterialX

    Back to the root documentation.

Introduction⚓︎

Introduction

Markdown is a way of writing rich-text (formatted text) content using plain text formatting syntax. It is also a tool that converts the plain text formatting to HTML.

  • 2004: John Gruber developed Markdown.
  • 2014: CommonMark was established as a standard specification for Markdown to resolve inconsistencies and ambiguities in Markdown implementations. This initiative was spearheaded by John MacFarlane and backed by other Markdown enthusiasts to ensure a reliable and consistent specification.

This guide will provide you with a comprehensive understanding of the key commands in GitHub Flavored Markdown (GFM), it is a strict superset of CommonMark. You can read the full article, The Ultimate Markdown Cheat Sheet on Medium.

Headings⚓︎

Headings

Headings

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

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1
=
Heading 2
-

Headings

Headings

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

Renders as: Heading 1 (largest) → Heading 6 (smallest)

Text Styles⚓︎

Text styles

Normal

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Text styles

Bold

Mac: command+B
Windows: control+B

**The quick brown fox jumps over the lazy dog.**

__The quick brown fox jumps over the lazy dog.__

<strong>The quick brown fox jumps over the lazy dog.</strong>

Italic⚓︎

Italic

Mac: command+I

Windows: control+I

*The quick brown fox jumps over the lazy dog.*
_The quick brown fox jumps over the lazy dog._
<em>The quick brown fox jumps over the lazy dog.</em>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Bold and Italic⚓︎

Bold and Italic

**_The quick brown fox jumps over the lazy dog._**
***The quick brown fox jumps over the lazy dog.***
<strong><em>The quick brown fox jumps over the lazy dog.</em></strong>

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Blockquotes⚓︎

Blockquotes

Mac: command+shift+.

Windows: control+shift+.

> The quick brown fox jumps over the lazy dog.

> The quick brown fox jumps over the lazy dog.
>
> The quick brown fox jumps over the lazy dog.
>
> The quick brown fox jumps over the lazy dog.

> The quick brown fox jumps over the lazy dog.
>> The quick brown fox jumps over the lazy dog.
>>> The quick brown fox jumps over the lazy dog.

> **The quick brown fox** *jumps over the lazy dog.*

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Monospaced⚓︎

Monospaced

<samp>The quick brown fox jumps over the lazy dog.</samp>

The quick brown fox jumps over the lazy dog.

Underlined⚓︎

Underlined

<ins>The quick brown fox jumps over the lazy dog.</ins>

The quick brown fox jumps over the lazy dog.

Strike-through⚓︎

Strike-through

~~The quick brown fox jumps over the lazy dog.~~

The quick brown fox jumps over the lazy dog.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ~~Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.~~ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ~~Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.~~

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<strike>

```js
console.log('Error');
```

</strike>


console.log('Error');

Boxed⚓︎

Boxed

<table><tr><td>The quick brown fox jumps over the lazy dog.</td></tr></table>

The quick brown fox jumps over the lazy dog.

Subscript⚓︎

Subscript

log<sub>2</sub>(x)
Subscript <sub>The quick brown fox jumps over the lazy dog.</sub>

log2(x)

Subscript The quick brown fox jumps over the lazy dog.

Superscript⚓︎

Superscript

2 <sup>53-1</sup> and -2 <sup>53-1</sup>
Superscript <sup>The quick brown fox jumps over the lazy dog.</sup>

2 53-1 and -2 53-1

Superscript The quick brown fox jumps over the lazy dog.

Small Text⚓︎

Small Text

Start The quick brown fox jumps over the lazy dog. End

Start The quick brown fox jumps over the lazy dog. End

Start <sup><sub>The quick brown fox jumps over the lazy dog.</sub></sup> End

Start <sub><sup>The quick brown fox jumps over the lazy dog.</sup></sub> End

Text Color⚓︎

Using MathJax syntax:

Color Name Code Syntax Example (Hover for Hex)
Apricot <font color="#FBB982">...</font> The quick brown fox jumps over the lazy dog.
Aquamarine <font color="#00B5BE">...</font> The quick brown fox jumps over the lazy dog.
Bittersweet <font color="#C04F17">...</font> The quick brown fox jumps over the lazy dog.
Black <font color="#221E1F">...</font> The quick brown fox jumps over the lazy dog.
Blue <font color="#2D2F92">...</font> The quick brown fox jumps over the lazy dog.
BlueGreen <font color="#00B3B8">...</font> The quick brown fox jumps over the lazy dog.
BlueViolet <font color="#473992">...</font> The quick brown fox jumps over the lazy dog.
BrickRed <font color="#B6321C">...</font> The quick brown fox jumps over the lazy dog.
Brown <font color="#792500">...</font> The quick brown fox jumps over the lazy dog.
BurntOrange <font color="#F7921D">...</font> The quick brown fox jumps over the lazy dog.
CadetBlue <font color="#74729A">...</font> The quick brown fox jumps over the lazy dog.
CarnationPink <font color="#F282B4">...</font> The quick brown fox jumps over the lazy dog.
Cerulean <font color="#00A2E3">...</font> The quick brown fox jumps over the lazy dog.
CornflowerBlue <font color="#41B0E4">...</font> The quick brown fox jumps over the lazy dog.
Cyan <font color="#00AEEF">...</font> The quick brown fox jumps over the lazy dog.
Dandelion <font color="#FDBC42">...</font> The quick brown fox jumps over the lazy dog.
DarkOrchid <font color="#A4538A">...</font> The quick brown fox jumps over the lazy dog.
Emerald <font color="#00A99D">...</font> The quick brown fox jumps over the lazy dog.
ForestGreen <font color="#009B55">...</font> The quick brown fox jumps over the lazy dog.
Fuchsia <font color="#8C368C">...</font> The quick brown fox jumps over the lazy dog.
Goldenrod <font color="#FFDF42">...</font> The quick brown fox jumps over the lazy dog.
Gray <font color="#949698">...</font> The quick brown fox jumps over the lazy dog.
Green <font color="#00A64F">...</font> The quick brown fox jumps over the lazy dog.
GreenYellow <font color="#DFE674">...</font> The quick brown fox jumps over the lazy dog.
JungleGreen <font color="#00A99A">...</font> The quick brown fox jumps over the lazy dog.
Lavender <font color="#F49EC4">...</font> The quick brown fox jumps over the lazy dog.
LimeGreen <font color="#8DC73E">...</font> The quick brown fox jumps over the lazy dog.
Magenta <font color="#EC008C">...</font> The quick brown fox jumps over the lazy dog.
Mahogany <font color="#A9341F">...</font> The quick brown fox jumps over the lazy dog.
Maroon <font color="#AF3235">...</font> The quick brown fox jumps over the lazy dog.
Melon <font color="#F89E7B">...</font> The quick brown fox jumps over the lazy dog.
MidnightBlue <font color="#006795">...</font> The quick brown fox jumps over the lazy dog.
Mulberry <font color="#A93C93">...</font> The quick brown fox jumps over the lazy dog.
NavyBlue <font color="#006EB8">...</font> The quick brown fox jumps over the lazy dog.
OliveGreen <font color="#3C8031">...</font> The quick brown fox jumps over the lazy dog.
Orange <font color="#F58137">...</font> The quick brown fox jumps over the lazy dog.
OrangeRed <font color="#ED135A">...</font> The quick brown fox jumps over the lazy dog.
Orchid <font color="#AF72B0">...</font> The quick brown fox jumps over the lazy dog.
Peach <font color="#F7965A">...</font> The quick brown fox jumps over the lazy dog.
Periwinkle <font color="#7977B8">...</font> The quick brown fox jumps over the lazy dog.
PineGreen <font color="#008B72">...</font> The quick brown fox jumps over the lazy dog.
Plum <font color="#92268F">...</font> The quick brown fox jumps over the lazy dog.
ProcessBlue <font color="#00B0F0">...</font> The quick brown fox jumps over the lazy dog.
Purple <font color="#99479B">...</font> The quick brown fox jumps over the lazy dog.
RawSienna <font color="#974006">...</font> The quick brown fox jumps over the lazy dog.
Red <font color="#ED1B23">...</font> The quick brown fox jumps over the lazy dog.
RedOrange <font color="#F26035">...</font> The quick brown fox jumps over the lazy dog.
RedViolet <font color="#A1246B">...</font> The quick brown fox jumps over the lazy dog.
Rhodamine <font color="#EF559F">...</font> The quick brown fox jumps over the lazy dog.
RoyalBlue <font color="#0071BC">...</font> The quick brown fox jumps over the lazy dog.
RoyalPurple <font color="#613F99">...</font> The quick brown fox jumps over the lazy dog.
RubineRed <font color="#ED017D">...</font> The quick brown fox jumps over the lazy dog.
Salmon <font color="#F69289">...</font> The quick brown fox jumps over the lazy dog.

Go to: Full Table

Multiline⚓︎

Multiline

The quick\
brown fox\
jumps over\
the lazy dog.

The quick\
brown fox\
jumps over\
the lazy dog.

Syntax Highlighting⚓︎

Inline Code⚓︎

Inline Code

A class method is an instance method of the class object. When a new class is created, an object of type Class is initialized and assigned to a global constant (Mobile in this case).

You can use command + e on Mac or control + e on Windows to insert inline code.

Code Block⚓︎

Code Block 
public static String monthNames[] = {"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"};

```
public static String monthNames[] = {"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"};
```

public static String monthNames[] = {"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"};

```java
public static String monthNames[] = {"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"};
```

Refer to this and this GitHub document to find all the valid keywords.

Diff Code Block⚓︎

Diff Code Block 
## git diff a/test.txt b/test.txt
diff --git a/a/test.txt b/b/test.txt
index 309ee57..c995021 100644
--- a/a/test.txt
+++ b/b/test.txt
@@ -1,8 +1,6 @@
-The quick brown fox jumps over the lazy dog
+The quick brown fox jumps over the lazy cat

 a
-b
 c
 d
-e
 f

```diff
## git diff a/test.txt b/test.txt
diff --git a/a/test.txt b/b/test.txt
index 309ee57..c995021 100644
--- a/a/test.txt
+++ b/b/test.txt
@@ -1,8 +1,6 @@
-The quick brown fox jumps over the lazy dog
+The quick brown fox jumps over the lazy cat

 a
-b
 c
 d
-e
 f
```

- Text in Red
+ Text in Green
! Text in Orange
# Text in Gray
@@ Text in Purple and bold @@

```diff
--- a/file
+++ b/file
- Text in Red
+ Text in Green
! Text in Orange
# Text in Gray
@@ -1,1 +1,1 @@ Text in Purple and bold
```

Alignments⚓︎

Alignments

Click to see code 
![Vintage clock](https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80){ width=100 }

Alignments

Click To See Code 
<div align="center">
![Vintage clock](https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80){ width=100 }
</div>



Alignments

Click To See Code 
<div align="right">
![Vintage clock](https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80){ width=100 }
</div>




<h3 align="center"> My latest Medium posts </h3>


My latest Medium posts

Tables⚓︎

Tables

<table>
  <tr>
    <td width="33%">The quick brown fox...</td>
    <td width="33%">The quick brown fox...</td>
    <td width="33%">The quick brown fox...</td>
  </tr>
</table>








The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Code:Tables Below 
| Default | Left align | Center align | Right align |
| - | :- | :-: | -: |
| 9999999999 | 9999999999 | 9999999999 | 9999999999 |
| 999999999 | 999999999 | 999999999 | 999999999 |
| 99999999 | 99999999 | 99999999 | 99999999 |
| 9999999 | 9999999 | 9999999 | 9999999 |

| Default    | Left align | Center align | Right align |
| ---------- | :--------- | :----------: | ----------: |
| 9999999999 | 9999999999 | 9999999999   | 9999999999  |
| 999999999  | 999999999  | 999999999    | 999999999   |
| 99999999   | 99999999   | 99999999     | 99999999    |
| 9999999    | 9999999    | 9999999      | 9999999     |

Default    | Left align | Center align | Right align
---------- | :--------- | :----------: | ----------:
9999999999 | 9999999999 | 9999999999   | 9999999999
999999999  | 999999999  | 999999999    | 999999999
99999999   | 99999999   | 99999999     | 99999999
9999999    | 9999999    | 9999999      | 9999999
Default Left align Center align Right align
9999999999 9999999999 9999999999 9999999999
999999999 999999999 999999999 999999999
99999999 99999999 99999999 99999999
9999999 9999999 9999999 9999999
Default Left align Center align Right align
9999999999 9999999999 9999999999 9999999999
999999999 999999999 999999999 999999999
99999999 99999999 99999999 99999999
9999999 9999999 9999999 9999999
Default Left align Center align Right align
9999999999 9999999999 9999999999 9999999999
999999999 999999999 999999999 999999999
99999999 99999999 99999999 99999999
9999999 9999999 9999999 9999999
Code: tables Below 
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>

<td>

| A | B | C |
|--|--|--|
| 1 | 2 | 3 |

</td><td>

| A | B | C |
|--|--|--|
| 1 | 2 | 3 |

</td></tr> </table>

  • Heading 1

    A B C
    1 2 3

  • Heading 2

    A B C
    1 2 3 
| A | B | C |
|---|---|---|
| 1 | 2 | 3 <br/> 4 <br/> 5 |
A B C
1 2 3
4
5
Code: Table Below 
<table>
<tr>
<th>Before Hoisting</th>
<th>After Hoisting</th>
</tr>
<tr>
<td>
<pre lang="js">
console.log(fullName); // undefined
fullName = "Dariana Trahan";
console.log(fullName); // Dariana Trahan
var fullName;
</pre>
</td>
<td>
<pre lang="js">
var fullName;
console.log(fullName); // undefined
fullName = "Dariana Trahan";
console.log(fullName); // Dariana Trahan
</pre>
</td>
</tr>
</table>
Before Hoisting After Hoisting 
console.log(fullName); // undefined
fullName = "Dariana Trahan";
console.log(fullName); // Dariana Trahan
var fullName;

var fullName;
console.log(fullName); // undefined
fullName = "Dariana Trahan";
console.log(fullName); // Dariana Trahan

Links⚓︎

Inline⚓︎

Inline Links

Click To See Code 
[The-Ultimate-Markdown-Cheat-Sheet](https://github.com/lifeparticle/Markdown-Cheatsheet

The-Ultimate-Markdown-Cheat-Sheet

Reference⚓︎

Inline Reference

Click To See Code 
[The-Ultimate-Markdown-Cheat-Sheet][reference text]

[The-Ultimate-Markdown-Cheat-Sheet][1]
[Markdown-Cheat-Sheet]

[reference text]: https://github.com/lifeparticle/Markdown-Cheatsheet
[1]: https://github.com/lifeparticle/Markdown-Cheatsheet
[Markdown-Cheat-Sheet]: https://github.com/lifeparticle/Markdown-Cheatsheet

The-Ultimate-Markdown-Cheat-Sheet

The-Ultimate-Markdown-Cheat-Sheet

Markdown-Cheat-Sheet

Footnote⚓︎

Footnote.1

Some other important footnote.2

Footnote.[^1]

Some other important footnote.[^2]

[^1]: This is footnote number one.
[^2]: Here is the second footnote.

Footnotes

Footnote.1

Some other important footnote.2

Click To See Code 
Footnote.[^1]

Some other important footnote.[^2]

<img src="https://github.com/lifeparticle/Markdown-Cheatsheet/assets/1612112/f55f13ff-8566-48f8-9353-edf3474523fd" width="250">

[^1]: This is footnote number one.
[^2]: Here is the second footnote.

Relative⚓︎

Relative

Click To See Code 
[Example of a relative link](Creating-Your-Site.md)

Example of a relative link

Auto⚓︎

Auto

Click To See Code 
[Visit Github](https://github.com)

Visit Github

Email

Click To See Code 
Email at example@example.com

Email at example@example.com

Section⚓︎

Section

Click To See Code 
 <img width="503" alt="Screen Shot 2024-02-04 at 12 49 07 pm" src="https://github.com/lifeparticle/Markdown-Cheatsheet/assets/1612112/fd69c9d9-82d7-44ce-a1ed-2e8d48881097">

Hover⚓︎

Hover

Click To See Code 
You can use [BinaryTree](https://binarytree.dev/ "Array of Developer Productivity Tools Designed to Help You Save Time") to create markdown tables.

You can use [BinaryTree]("Array of Developer Productivity Tools Designed to Help You Save Time") to create markdown tables.

You can use BinaryTree to create markdown tables.

You can use BinaryTree to create markdown tables.

Enclosed⚓︎

Enclosed

Click To See Code 
<https://github.com>

https://github.com

Highlight Words and Link it to a URL

Click To See Code 
[BinaryTree](https://binarytree.dev/)

![Jun-15-2024 09-55-51](https://github.com/lifeparticle/Markdown-Cheatsheet/assets/1612112/68d9c7a9-6b05-472f-bbc6-c1e180674502)

BinaryTree

Images⚓︎

Use relative header

Click To See Code 
![alt text](https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=80 "Title text")

Use relative header

Click To See Code 
![alt text][image]
[image]: https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=80 "Title text"

Use relative header

Click To See Code 
<img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" border="10"/>

Use relative header

Click To See Code 
<img src="https://media.giphy.com/media/qLHzYjlA2FW8g/giphy.gif" />

Use relative header

Click To See Code 
<img src="https://img.shields.io/badge/theultimatemarkdowncheatsheet-brightgreen.svg" />

Use relative header

Animated SVG of the text 'Markdown-Cheatsheet' in white letters.

Click To See Code 
<img src="./supported_file_extensions/md.svg" alt="Animated SVG of the text 'Markdown-Cheatsheet' in white letters."/>

Binary Tree
Binary Tree

Theme⚓︎

Using Picture Tag⚓︎

The HTML <picture> element, along with the prefers-color-scheme media feature, enables you to dynamically adjust images according to the user's color scheme preference, providing options for both light and dark modes.

For example, the code snippet below demonstrates how to display a dark-themed BinaryTree logo when the user's device is set to a dark mode, and a light-themed BinaryTree logo for light mode settings:

Using Dark and Light Mode⚓︎

Using Dark and Light Mode

[![Badge][Logo-dark]](https://binarytree.dev#gh-dark-mode-only)
[![Badge][Logo-light]](https://binarytree.dev#gh-light-mode-only)

[Logo-dark]: https://github-readme-stats.vercel.app/api?username=lifeparticle&theme=graywhite&show_icons=true#gh-light-mode-only

[Logo-light]: https://github-readme-stats.vercel.app/api?username=lifeparticle&theme=dark&show_icons=true#gh-dark-mode-only

This image shows a summary of Mahbub Zaman's GitHub statistics.

GitHub Readme Stats Themes

Group⚓︎

Horizontal Images

Horizontal Images





Click To See Code 
<p>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
</p>

Horizontal Images With Gap

Horizontal Images With Gap





Click To See Code 
<p>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" hspace="5" alt="alt text"/>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" hspace="5" alt="alt text"/>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" hspace="5" alt="alt text"/>
</p>

Vertical Images

Vertical Images





Click To See Code 
<p>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
<br>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
<br>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
</p>

Vertical images With Gap

Vertical images With Gap





Click To See Code 
<p>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
<br>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
<br>
  <img src="https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2772&q=80" width="100" height="100" alt="alt text"/>
</p>

Badges⚓︎

Badges

![GitHub forks](https://img.shields.io/github/forks/lifeparticle/Markdown-Cheatsheet?style=for-the-badge)

Videos⚓︎

Videos

To embed a video in Markdown, you need to first upload the video file and then reference it inline:

https://github.com/user-attachments/assets/90c624e0-f46b-47a7-8509-97585dc3688a

Lists⚓︎

Ordered⚓︎

Ordered

Mac: command+shift+7

Windows: control+shift+7

1. One
2. Two
3. Three
  1. One
  2. Two
  3. Three
1. First level
    1. Second level
        - Third level
            - Fourth level
2. First level
    1. Second level
3. First level
    1. Second level
  1. First level
  2. Second level
    • Third level
      • Fourth level
  3. First level
    1. Second level
  4. First level
    1. Second level

Unordered⚓︎

Unordered

Mac: command+shift+8

Windows: control+shift+8

* 1
* 2
* 3

+ 1
+ 2
+ 3

- 1
- 2
- 3
  • 1
  • 2

  • 3

  • 1

  • 2

  • 3

  • 1

  • 2
  • 3
- First level
   - Second level
     - Third level
        - Fourth level
- First level
   - Second level
- First level
   - Second level
  • First level
    • Second level
      • Third level
        • Fourth level
  • First level
    • Second level
  • First level
    • Second level
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>


  • First item

  • Second item

  • Third item

  • Fourth item

Task⚓︎

Task

- [x] Fix Bug 223
- [ ] Add Feature 33
- [ ] Add unit tests
  • Fix Bug 223
  • Add Feature 33
  • Add unit tests

Buttons⚓︎

<kbd>cmd + shift + p</kbd>

cmd + shift + p

<kbd> <br> cmd + shift + p <br> </kbd>

 
 cmd + shift + p 
 

<kbd>[Markdown-Cheatsheet](https://github.com/lifeparticle/Markdown-Cheatsheet)</kbd>

Markdown-Cheatsheet

[<kbd>Markdown-Cheatsheet</kbd>](https://github.com/lifeparticle/Markdown-Cheatsheet)

Markdown-Cheatsheet

Button with Emoji⚓︎

 
Markdown-Cheatsheet ↗️
 

<kbd> <br> [MD-Cheatsheet](https://github.com/lifeparticle/Markdown-Cheatsheet)↗️ <br> </kbd>

Collapsible Items (28 July 2023)⚓︎

<details>
  <summary>Markdown</summary>

-  <kbd>[Markdown Editor](https://binarytree.dev/me)</kbd>
-  <kbd>[Table Of Content](https://binarytree.dev/toc)</kbd>
-  <kbd>[Markdown Table Generator](https://binarytree.dev/md_table_generator)</kbd>

</details>


Markdown

Horizontal Rule⚓︎

---
***
___

Diagrams (19 July 2022)⚓︎

Mermaid Diagram

```mermaid
pie
"Movies" : 80
"TV shows" : 20
```

pie
"Movies" : 80
"TV shows" : 20

Mathematical Expressions (19 July 2022)⚓︎

IMPORTANT!

Check out the official documentation on GitHub to learn more about writing and formatting MathJax syntax.

This is an inline math expression $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

This is an inline math expression \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$
\[ x = {-b \pm \sqrt{b^2-4ac} \over 2a} \]

Alerts (8 January 2024)⚓︎

> [!NOTE]
> Essential details that users should not overlook, even when browsing quickly.

<br>

> [!TIP]
> Additional advice to aid users in achieving better outcomes.

<br>

> [!IMPORTANT]
> Vital information required for users to attain success.

<br>

> [!WARNING]
> Urgent content that requires immediate user focus due to possible risks.

<br>

> [!CAUTION]
> Possible negative outcomes resulting from an action.

[!NOTE]
Essential details that users should not overlook, even when browsing quickly.


[!TIP]
Additional advice to aid users in achieving better outcomes.


[!IMPORTANT]
Vital information required for users to attain success.


[!WARNING]
Urgent content that requires immediate user focus due to possible risks.


[!CAUTION]
Possible negative outcomes resulting from an action.

Mention people and teams⚓︎

In issues:

@lifeparticle

Example shown in issue

In markdown file:

https://github.com/lifeparticle

https://github.com/lifeparticle

Reference issues and pull requests⚓︎

In issues:

#1
#10

Example shown in issue

In markdown file:

https://github.com/lifeparticle/Markdown-Cheatsheet/issues/1
https://github.com/lifeparticle/Markdown-Cheatsheet/pull/10

https://github.com/lifeparticle/Markdown-Cheatsheet/issues/1

https://github.com/lifeparticle/Markdown-Cheatsheet/pull/10

Color models⚓︎

In issues:

`#ffffff`
`#000000`

Example shown in issue

View Code⚓︎

Click either the Code (top right) or Raw (top left) option to see the markdown code.

NOTE!

Make sure you have clicked the markdown file to see the above view.

Code in titles⚓︎

In issue, and pull request titles.

TEST ISSUE

`TEST` ISSUE

Reference Labels⚓︎

Labels referenced by URLs in Markdown are now automatically rendered.

https://github.com/lifeparticle/Markdown-Cheatsheet/labels/documentation

https://github.com/lifeparticle/Markdown-Cheatsheet/labels/documentation

Miscellaneous⚓︎

Comments⚓︎

<!--
Lorem ipsum dolor sit amet
-->

Escaping Markdown Characters⚓︎

  • Before escaping
* Asterisk

\ Backslash

` Backtick

{} Curly braces

. Dot

! Exclamation mark

# Hash symbol

- Hyphen symbol

() Parentheses

+ Plus symbol

[] Square brackets

_ Underscore`
  • Asterisk Backslash ` Backtick {} Curly braces . Dot ! Exclamation mark

Hash symbol ⚓︎

  • Hyphen symbol

() Parentheses

  • Plus symbol

[] Square brackets _ Underscore

  • After escaping
\* Asterisk
\\ Backslash
\` Backtick
\{} Curly braces
\. Dot
\! Exclamation mark
\# Hash symbol
\- Hyphen symbol
\() Parentheses
\+ Plus symbol
\[] Square brackets
\_ Underscore

* Asterisk \ Backslash ` Backtick {} Curly braces . Dot ! Exclamation mark # Hash symbol - Hyphen symbol () Parentheses + Plus symbol [] Square brackets _ Underscore

Emojis⚓︎

:octocat:

Complete list of github markdown emoji markup

Line break⚓︎

You can use <br> to insert a single line break. Make sure to use an em space . For example:

<table><tr><td> <br> The quick brown fox jumps over the lazy dog. <br> </td></tr></table>
 
 The quick brown fox jumps over the lazy dog. 
 

Or

<table><tr><td> <br><br><br> The quick brown fox jumps over the lazy dog. <br><br><br> </td></tr></table>
 


 The quick brown fox jumps over the lazy dog. 


 

Back to top⚓︎

First place the following code at start of your markdown file

<a name="top"></a>

Then use one of the following code at the place you want to return to top.

Back to top

⬆

[Back to top](#top)

[:arrow_up:](#top)

Bitbucket⚓︎

Bitbucket Supported Markdown for READMEs. Also, create a table of contents.

Azure DevOps Project wiki⚓︎

Azure DevOps Supported Markdown for Project wiki.

MDX⚓︎

You can write JSX in your markdown document using MDX.

Tools⚓︎

  1. Create a Markdown table of content - binarytree, github-markdown-toc
  2. Create an empty Markdown table - Tablesgenerator
  3. Convert Excel to Markdown table - Tableconvert
  4. Markdown preview for Sublime Text 3 - Packagecontrol
  5. Markdown preview Visual Studio Code - Markdown Preview Enhanced
  6. A collection of awesome markdown goodies - Awesome Markdown
  7. Markdownlint - markdownlint, markdownlint-cli2, markdownlint-cli2-action, vscode-markdownlint
  8. A lightweight Python utility for converting various files to Markdown - Markitdown
  9. A SSE MCP server for calling MarkItDown - MarkItDown-MCP
Author: IGT Developers <igt-dev@lists.freedesktop.org>
Date: 2023-01-27
Version: |PACKAGE_STRING|
Copyright: 2009,2011,2012,2016,2018,2019,2020,2023,2025 Intel Corporation
Manual section: |MANUAL_SECTION|
Manual group: |MANUAL_GROUP|

Basic writing and formatting syntax⚓︎

Create sophisticated formatting for your prose and code on GitHub with simple syntax.

Headings⚓︎

To create a heading, add one to six # symbols before your heading text. The number of # you use will determine the hierarchy level and typeface size of the heading.

# A first-level heading
## A second-level heading
### A third-level heading

When you use two or more headings, GitHub automatically generates a table of contents that you can access by clicking the "Outline" menu icon within the file header. Each heading title is listed in the table of contents and you can click a title to navigate to the selected section.

Styling text⚓︎

You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text in comment fields and .md files.

Style Syntax Keyboard shortcut Example Output
Bold ** ** or __ __ Command+B (Mac) or Ctrl+B (Windows/Linux) **This is bold text** This is bold text
Italic * * or _ _ Command+I (Mac) or Ctrl+I (Windows/Linux) _This text is italicized_ This text is italicized
Strikethrough ~~ ~~ or ~ ~ None ~~This was mistaken text~~ This was mistaken text
Bold and nested italic ** ** and _ _ None **This text is _extremely_ important** This text is extremely important
All bold and italic *** *** None ***All this text is important*** All this text is important
Subscript <sub> </sub> None This is a <sub>subscript</sub> text This is a subscript text
Superscript <sup> </sup> None This is a <sup>superscript</sup> text This is a superscript text
Underline <ins> </ins> None This is an <ins>underlined</ins> text This is an underlined text

Quoting text⚓︎

You can quote text with a >.

Text that is not a quote

> Text that is a quote

Quoted text is indented with a vertical line on the left and displayed using gray type.

NOTE!

When viewing a conversation, you can automatically quote text in a comment by highlighting the text, then typing R. You can quote an entire comment by clicking , then Quote reply. For more information about keyboard shortcuts, see Keyboard shortcuts.

Quoting code⚓︎

You can call out code or a command within a sentence with single backticks. The text within the backticks will not be formatted. You can also press the Command+E (Mac) or Ctrl+E (Windows/Linux) keyboard shortcut to insert the backticks for a code block within a line of Markdown.

Use `git status` to list all new or modified files that haven't yet been committed.

To format code or text into its own distinct block, use triple backticks.

Tip

Some basic Git commands are: 

git status
git add
git commit

For more information, see Creating and highlighting code blocks.

If you are frequently editing code snippets and tables, you may benefit from enabling a fixed-width font in all comment fields on GitHub. For more information, see About writing and formatting on GitHub.

Supported color models⚓︎

In issues, pull requests, and discussions, you can call out colors within a sentence by using backticks. A supported color model within backticks will display a visualization of the color.

The background color is `#ffffff` for light mode and `#000000` for dark mode.

Here are the currently supported color models.

Color Syntax Example Output
HEX `#RRGGBB` `#0969DA`
RGB `rgb(R,G,B)` `rgb(9, 105, 218)`
HSL `hsl(H,S,L)` `hsl(212, 92%, 45%)`

NOTE!

  • A supported color model cannot have any leading or trailing spaces within the backticks.
  • The visualization of the color is only supported in issues, pull requests, and discussions.

  1. This is footnote number one. ↩↩

  2. Here is the second footnote. ↩↩