The Fourier Transform is a powerful mathematical tool that allows us to decompose complex signals into simpler, periodic components. This technique has far-reaching applications, from audio processing to image compression…
- Introduction
- Headings
- Text styles
- Syntax Highlighting
- Alignments
- Tables
- Links
- Images
- Badges
- Lists
- Buttons
- Collapsible items (28 July 2023)
- Horizontal Rule
- Diagrams (19 July 2022)
- Mathematical expressions (19 July 2022)
- Alerts (8 January 2024)
- Mention people and teams
- Reference issues and pull requests
- Color models
- View Code
- Code in titles
- Reference Labels
- Miscellaneous
- Bitbucket
- Azure DevOps Project wiki
- MDX
- Tools
Introduction
Markdown is a way of writing rich-text (formatted text) content using plain text formatting syntax. This is a handwritten note! 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 is a handwritten note! I made this because i wanted to add little notes to my essays the way we write on the margins of books. . 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.
- what
- i have done affects my soulas established as a standard specification for Markdown to resolve inconsistencies and ambiguities in Markdown implementations. Was established as a standard specification for Markdown to resolve inconsistencies and ambiguities in Markdown implementations.
- bidewas established as a standard specification for Markdown to resolve inconsistencies and ambiguities in Markdown implementations.
Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
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
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
=
Heading 2
-
Heading 1
Heading 2
Text styles
Normal
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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>
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.
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
**_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.
Blockquotes
Mac: command+shift+.
Windows: control+shift+.
> The quick brown fox jumps over the lazy dog.
<br>
> 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.
<br>
> 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.
<br>
> **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
<samp>The quick brown fox jumps over the lazy dog.</samp>
The quick brown fox jumps over the lazy dog.
Underlined
<ins>The quick brown fox jumps over the lazy dog.</ins>
The quick brown fox jumps over the lazy dog.
Strike-through
~~The quick brown fox jumps over the lazy dog.~~
The quick brown fox jumps over the lazy dog.
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strike>Sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</strike> 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. <strike>Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</strike>
</pre>
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
<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
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
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.
Text Color
Using MathJax syntax:
Color Name | Code | Example |
---|---|---|
Apricot | $\color{Apricot}{The\ quick\ brown\ fox\ jumps\ over\ the\ lazy\ dog.}$ | $\color{Apricot}{The\ quick\ brown\ fox\ jumps\ over\ the\ lazy\ dog.}$ |
Aquamarine | $\color{Aquamarine}{The\ quick\ brown\ fox\ jumps\ over\ the\ lazy\ dog.}$ | $\color{Aquamarine}{The\ quick\ brown\ fox\ jumps\ over\ the\ lazy\ dog.}$ |
Bittersweet | $\color{Bittersweet}{The\ quick\ brown\ fox\ jumps\ over\ the\ lazy\ dog.}$ | $\color{Bittersweet}{The\ quick\ brown\ fox\ jumps\ over\ the\ lazy\ dog.}$ |
Black | $\color{Black}{The\ quick\ brown\ fox\ jumps\ over\ the\ lazy\ dog.}$ | $\color{Black}{The\ quick\ brown\ fox\ jumps\ over\ the\ lazy\ dog.}$ |
Multiline
The quick
brown fox
jumps over
the lazy dog.
The quick\
brown fox\
jumps over\
the lazy dog.
Syntax Highlighting
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
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
## 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
- Text in Red
+ Text in Green
! Text in Orange
# Text in Gray
@@ Text in Purple and bold @@
```
Alignments
<p align="left">
<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"/>
</p>
<p align="center">
<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"/>
</p>
<p align="right">
<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"/>
</p>
<h3 align="center"> My latest Medium posts </h3>
My latest Medium posts
Tables
<table>
<tr>
<td width="33%"">
The quick brown fox jumps over the lazy dog.
</td>
<td width="33%">
The quick brown fox jumps over the lazy dog.
</td>
<td width="33%">
The quick brown fox jumps over the lazy dog.
</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. |
| 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 |
<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 | Heading 2 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
| A | B | C |
|---|---|---|
| 1 | 2 | 3 <br/> 4 <br/> 5 |
A | B | C |
---|---|---|
1 | 2 | 3 4 5 |
<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
[The-Ultimate-Markdown-Cheat-Sheet](https://github.com/lifeparticle/Markdown-Cheatsheet)
The-Ultimate-Markdown-Cheat-Sheet
Reference
[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
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.
Relative
[Example of a relative link](rl.md)
Auto
Visit https://github.com/
Visit https://github.com/
Email at [email protected]
Email at [email protected]
Section
Hover
You can use BinaryTree to create markdown tables.
You can use BinaryTree to create markdown tables.
Enclosed
<https://github.com/>
Highlight words and link it to a URL
[BinaryTree](https://binarytree.dev/)
Images
Alt text and title are optional.
![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")
![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"
<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"/>
<img src="https://media.giphy.com/media/qLHzYjlA2FW8g/giphy.gif" />
<img src="https://img.shields.io/badge/theultimatemarkdowncheatsheet-brightgreen.svg" />
[![BinaryTree](https://github.com/lifeparticle/lifeparticle/blob/master/gh_social_light.png)](https://binarytree.dev/)
<a href='https://binarytree.dev/' target='_blank'> <img src='https://github.com/lifeparticle/lifeparticle/blob/master/gh_social_light.png' /> </a>
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:
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/lifeparticle/lifeparticle/blob/master/gh_social_dark.png">
<source media="(prefers-color-scheme: light)" srcset="https://github.com/lifeparticle/lifeparticle/blob/master/gh_social_light.png">
<img alt="BinaryTree" src="https://github.com/lifeparticle/lifeparticle/blob/master/gh_social_light.png" width="200">
</picture>
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
<a href="https://github.com/anuraghazra/github-readme-stats#gh-light-mode-only">
<img src="https://github-readme-stats.vercel.app/api?username=lifeparticle&theme=graywhite&show_icons=true#gh-light-mode-only" width="350" alt="This image shows a summary of Mahbub Zaman's GitHub statistics."/>
</a>
<a href="https://github.com/anuraghazra/github-readme-stats#gh-dark-mode-only">
<img src="https://github-readme-stats.vercel.app/api?username=lifeparticle&theme=dark&show_icons=true#gh-dark-mode-only" width="350" alt="This image shows a summary of Mahbub Zaman's GitHub statistics."/>
</a>
Badges
![GitHub forks](https://img.shields.io/github/forks/lifeparticle/Markdown-Cheatsheet?style=for-the-badge)
Lists
Ordered
Mac: command+shift+7
Windows: control+shift+7
1. One
2. Two
3. Three
- One
- Two
- Three
1. First level
1. Second level
- Third level
- Fourth level
2. First level
1. Second level
3. First level
1. Second level
- First level
- Second level
- Third level
- Fourth level
- Third level
- Second level
- First level
- Second level
- First level
- Second level
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
- Third level
- Second 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
- [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>
[<kbd>Markdown-Cheatsheet</kbd>](https://github.com/lifeparticle/Markdown-Cheatsheet)
Button with emoji
<kbd> <br> [Markdown-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>
Horizontal Rule
---
***
___
Diagrams (19 July 2022)
```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
In markdown file:
https://github.com/lifeparticle
https://github.com/lifeparticle
Reference issues and pull requests
In issues:
#1
#10
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`
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:
: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. |