Typography

🚀 Introduction

The Markdown Guide is a comprehensive Markdown reference designed for both novices and experts. This guide was born out of frustration with existing Markdown references that are incomplete and inadequate.

📚 Resources

• Markdown Guide Official Website
• Markdown Guide GitHub Repository
• GitHub Markdown Documentation
• Markdown Cheatsheet
• The Ultimate Markdown Cheat Sheet

🔤 Headings

Markdown supports multiple ways to create headings:

Using Hash Symbols

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5Copy to clipboardErrorCopied

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Using HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>Copy to clipboardErrorCopied

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Using Underlines

Heading 1
=
Heading 2
-Copy to clipboardErrorCopied

Heading 1

Heading 2

📝 Text Styles

Bold Text

**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>Copy to clipboardErrorCopied

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 Text

*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>Copy to clipboardErrorCopied

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 Text

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

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Blockquotes

> 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.
>> Nested quote: The quick brown fox jumps over the lazy dog.
>>> Deeper nested quote: The quick brown fox jumps over the lazy dog.

> **Bold text in a blockquote** *with some italic text too.*Copy to clipboardErrorCopied

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.

Other Text Formatting

Monospaced Text

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

The quick brown fox jumps over the lazy dog.

Underlined Text

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

The quick brown fox jumps over the lazy dog.

Strikethrough Text

~~The quick brown fox jumps over the lazy dog.~~Copy to clipboardErrorCopied

The quick brown fox jumps over the lazy dog.

Boxed Text

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

Superscript and Subscript

2 <sup>53-1</sup> and -2 <sup>53-1</sup>

Subscript <sub>The quick brown fox jumps over the lazy dog.</sub>
Superscript <sup>The quick brown fox jumps over the lazy dog.</sup>Copy to clipboardErrorCopied

2 ^53-1 and -2 ^53-1

Subscript _{The quick brown fox jumps over the lazy dog.}

Superscript ^{The quick brown fox jumps over the lazy dog.}

🎨 Syntax Highlighting

Markdown supports syntax highlighting for code blocks:

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

Specify a language for proper highlighting:

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

📐 Alignments

Left Alignment

<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>Copy to clipboardErrorCopied

Center Alignment

<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>Copy to clipboardErrorCopied

Right Alignment

<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>Copy to clipboardErrorCopied

Text Alignment Example

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

My latest Medium posts

📊 Tables

HTML Table

<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>Copy to clipboardErrorCopied

Markdown Tables

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

You can also format tables with different styles:

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

Alternative syntax (no pipe at beginning/end):

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

Nested Tables

<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>Copy to clipboardErrorCopied

Line Breaks in Table Cells

| A | B | C |
|---|---|---|
| 1 | 2 | 3 <br/> 4 <br/> 5 |Copy to clipboardErrorCopied

Code Comparison Table

<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>Copy to clipboardErrorCopied

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

Basic Links

[The-Ultimate-Markdown-Cheat-Sheet](https://github.com/lifeparticle/Markdown-Cheatsheet)Copy to clipboardErrorCopied

The-Ultimate-Markdown-Cheat-Sheet

Reference-Style Links

[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-CheatsheetCopy to clipboardErrorCopied

The-Ultimate-Markdown-Cheat-Sheet

The-Ultimate-Markdown-Cheat-Sheet

Markdown-Cheat-Sheet

Relative Links

[Example of a relative link](rl.md)Copy to clipboardErrorCopied

Example of a relative link

Auto-Linking URLs

Visit https://github.com/Copy to clipboardErrorCopied

Visit https://github.com/

🖼️ Images

Basic Image Syntax

![alt text](https://images.unsplash.com/photo-1415604934674-561df9abf539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=80)Copy to clipboardErrorCopied

Reference-Style Images

![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=80Copy to clipboardErrorCopied

HTML Image with Additional Attributes

<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"/>Copy to clipboardErrorCopied

GIFs and Badges

<img src="https://media.giphy.com/media/qLHzYjlA2FW8g/giphy.gif" />

<img src="https://img.shields.io/badge/theultimatemarkdowncheatsheet-brightgreen.svg" />Copy to clipboardErrorCopied

📋 Lists

Ordered Lists

1. One
2. Two
3. ThreeCopy to clipboardErrorCopied

1. One
2. Two
3. Three

Nested Ordered Lists

1. First level
    1. Second level
        - Third level
            - Fourth level
2. First level
    1. Second level
3. First level
    1. Second levelCopy to clipboardErrorCopied

1. First level
   1. Second level
      • Third level
        • Fourth level
2. First level
   1. Second level
3. First level
   1. Second level

Unordered Lists

* 1
* 2
* 3

+ 1
+ 2
+ 3

- 1
- 2
- 3Copy to clipboardErrorCopied

• 1

• 2

• 3

• 1

• 2

• 3

• 1

• 2

• 3

Nested Unordered Lists

- First level
    - Second level
        - Third level
            - Fourth level
- First level
    - Second level
- First level
    - Second levelCopy to clipboardErrorCopied

• First level
  • Second level
    • Third level
      • Fourth level
• First level
  • Second level
• First level
  • Second level

HTML Unordered List

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>Copy to clipboardErrorCopied

• First item
• Second item
• Third item
• Fourth item

Task Lists

- [x] Fix Bug 223
- [ ] Add Feature 33
- [ ] Add unit testsCopy to clipboardErrorCopied

• Fix Bug 223
• Add Feature 33
• Add unit tests

📏 Horizontal Rules

---
***
___Copy to clipboardErrorCopied

📊 Diagrams (Added July 19, 2022)

Markdown now supports diagrams using Mermaid syntax:

pie
"Movies" : 80
"TV shows" : 20Copy to clipboardErrorCopied

📐 Mathematical Expressions (Added July 19, 2022)

Markdown now supports mathematical expressions:

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

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

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$Copy to clipboardErrorCopied

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

🔄 Special Characters

Character Examples

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

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

Hash symbol

• Hyphen symbol () Parentheses

• Plus symbol [] Square brackets _ Underscore

Escaping Special Characters

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

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

🌟 Extended Features

GitHub Emoji

:octocat:Copy to clipboardErrorCopied

Accordion (with docsify-accordion plugin)

+ Question 1? +

  Answer 1

+ Question 2? +

  Answer 2Copy to clipboardErrorCopied

• Question 1?

  Answer 1

• Question 2?

  Answer 2

Tabs

<!-- tabs:start -->

#### **English**

Hello!

#### **French**

Bonjour!

#### **Italian**

Ciao!

<!-- tabs:end -->Copy to clipboardErrorCopied

YouTube Videos

[![HashiQube: A Development Lab Using All the HashiCorp Products](https://img.youtube.com/vi/6jGDAGWaFiw/maxresdefault.jpg)](https://www.youtube.com/watch?v=6jGDAGWaFiw)Copy to clipboardErrorCopied

😀 Emoji Reference

GitHub and many Markdown platforms support emoji shortcodes. Here are some examples:

People Emoji

:bowtie:	:smile:	:laughing:
:blush:	:smiley:	:relaxed:
:smirk:	:heart_eyes:	:kissing_heart:

Nature Emoji

:sunny:	:umbrella:	:cloud:
:snowflake:	:snowman:	:zap:
:cyclone:	:foggy:	:ocean:

Objects Emoji

:bamboo:	:gift_heart:	:dolls:
:school_satchel:	:mortar_board:	:flags:
:fireworks:	:sparkler:	:wind_chime:

💡 For a full list of supported emoji, see the Emoji Cheat Sheet.