Mastering-Markdown

Mastering Markdown w/ wesbos

Paragraphs

Single line p:

This is a paragraph in one line. Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, beatae.

Multi line p:

This is a paragraph with line break.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, sed.

Bold & Italic:

Italic (*, _):

This is an italic paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, illum.

Bold (**, __):

This is a bold paragraph. Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, voluptatem!

Blod & Italic p (_, *, ___):

This is bold and italic paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit, mollitia.

This is bold and italic paragraph. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit, mollitia.

You can combine them

Strikethrough (~~):

~~this is a Strikethrough paragraph. Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, mollitia?~~

Headings

h1

h2

h3

h4

links

link with key:

make sute to visit this link for more informations.

Example:

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

GitHub uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.

Images

normal image:

image with tooltip/title:

image with key:

image inside link:

Lists

unordered list (ul):

fruits:

Apple
Banana
Orange

Blueberry
Grapes
Lychee

Mulberry
Peach
Pineapple

ordered list (ol):

How To Make Awesome Pizza at Home;

Make your own pizza dough.
Keep the sauce and toppings simple.
Bake it hot.

Make your own pizza dough.
Keep the sauce and toppings simple.
Bake it hot.

nested list:

fruits:
- Apple
  - Blueberry
    - Grapes
- Banana
- Orange
vegetables:
- Spinach
  - Garlic
- Carrots
  - Kale
    - Ginger
- Broccoli

How To Make Awesome Pizza at Home:

Make your own pizza dough.
- How To Make the Best Basic Pizza Dough
- Homemade Thin-Crust Pizza
- Quick No-Rise Pizza Dough
- The Best Pizza Dough for Grilling
Keep the sauce and toppings simple.
- How To Make Homemade Pizza Sauce
- How To Make the Best Pesto: The Easiest, Simplest Method

Example:

First Article:
- Title:
  
  Lorem ipsum dolor sit amet.
- Image:
- Body:
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti laudantium id temporibus, rerum dolore aliquid enim sequi voluptas repellat cum! Doloremque blanditiis est omnis dolorem sequi similique, corporis atque officia? Molestiae est unde ad dignissimos omnis odio aliquid, sit debitis.
  
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, dolore! Magnam doloremque dolor eveniet illum, itaque obcaecati praesentium beatae animi aut earum nostrum dolorum dolorem ratione sapiente cumque totam quas saepe voluptatum repellat, a ad? Pariatur placeat rem laborum dolore enim nobis, ullam, sit, eveniet aspernatur minima doloribus nisi! Culpa?
- Links:
  1. Github.
  2. My Website.
    - Home
    - Blog
    - Projects
      - Instagram Clone
    - Contact

Line Breaks

full line break

empty line:

line 1

line 2

br tag:
line 1
line2

Horizontal Rules

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed, tempora?

Block Quotes

"The way to get started is to quit talking and begin doing."

-Walt Disney

Code Blocks

inline code blocks

Hey, did you try const x = y + 1;?

Git diff

-const x = y + 50;
+const x = y - 50;

full code blocks

JavaScript

const a = Math.floor(Math.random() * (10 - 1)) + 1;
console.log(`Random value between 1 and 10 is ${a}`);

CSS

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	position: relative;
	overflow-y: auto;
}

body {
	font-size: 1rem;
	line-height: normal;
	font-weight: 400;
}

a,
a:visited {
	text-decoration: none;
}

button {
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
}

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>React Doc</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<header id="header-container">
			<div id="logo">
				<img
					src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K"
					alt="React Logo"
				/>
				<h1>React</h1>
			</div>
			<button id="hamberger-menu">
				<svg viewBox="0 0 100 80" width="40" height="40">
					<rect width="100" height="20"></rect>
					<rect y="30" width="100" height="20"></rect>
					<rect y="60" width="100" height="20"></rect>
				</svg>
			</button>
		</header>
		<nav id="navbar">
			<header>
				<h1 id="menu-title">Main Concepts</h1>
			</header>
			<a href="#hello_world" class="nav-link">Hello World</a>
			<a href="#introducing_jsx" class="nav-link">Introducing JSX</a>
			<a href="#rendering_elements" class="nav-link">Rendering Elements</a>
			<a href="#components_and_props" class="nav-link">Components and Props</a>
			<a href="#state_and_lifecycle" class="nav-link">State and Lifecycle</a>
			<a href="#composition_vs_inheritance" class="nav-link">Composition vs Inheritance</a>
		</nav>

		<main id="main-doc">
			<section class="main-section" id="hello_world">
				<header>
					<h1>Hello World</h1>
				</header>
				<p class="sub-title">The smallest React example looks like this:</p>
				<code>
					ReactDOM<span class="function-name">.render</span><span class="other">(</span>
					<br />
					<span class="other margin-left-20"><</span><span class="html-element">h1</span><span class="other">></span>Hello, world!<span
						class="other"
						><</span
					><span class="other">/</span><span class="html-element">h1</span><span class="other">>,<br /></span
					><span class="margin-left-20">document</span><span class="function-name">.getElementById</span><span class="other">(</span
					><span class="arg">'root'</span><span class="other">)</span><br /><span class="other">);</span></code
				>
				<p>It displays a heading saying “Hello, world!” on the page.</p>
				<a class="codepen-anchor" target="_blank" href="https://reactjs.org/redirect-to-codepen/hello-world">Try it on CodePen</a>
				<p>
					Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this
					guide will have editable examples like this one.
				</p>
				<hr />
				<h2 class="read-more">Read More:</h2>
				<ul>
					<li>
						<a target="_blank" href="https://reactjs.org/docs/hello-world.html#how-to-read-this-guide">How to Read This Guide</a>
					</li>
					<li>
						<a target="_blank" href="https://reactjs.org/docs/hello-world.html#knowledge-level-assumptions">Knowledge Level Assumptions</a>
					</li>
				</ul>
			</section>
		</main>
	</body>
</html>

Example

Change md preview background from Dark to light on vscode

go to Pereferences > Settings
Search for markdow style
add

https://cdn.jsdelivr.net/gh/dhdhagar/vscode-md-preview-light/style.min.css

In VSCode, just edit the Markdown: Styles configuration or add the following line to settings.json

"markdown.styles": ["https://cdn.jsdelivr.net/gh/dhdhagar/vscode-md-preview-light/style.min.css"]

Tables

table text deriections:

value	direction
:----	Left
:---:	Center
----:	Right

Align Center:

key	value
Lorem ipsum dolor sit.	Lorem ipsum dolor sit.

Align Left:

key	value
Lorem ipsum dolor sit.	Lorem ipsum dolor sit.

Align Right:

key	value
Lorem ipsum dolor sit.	Lorem ipsum dolor sit.

Example:

Markdown All in One Keyboard Shortcuts:

Key	Command
Ctrl + B	Toggle bold
Ctrl + I	Toggle italic
Ctrl + Shift + ]	Toggle heading (uplevel)
Ctrl + Shift + [	Toggle heading (downlevel)
Ctrl + M	Toggle math environment
Alt + C	Check/Uncheck task list item
Ctrl + Shift + V	Toggle preview
Ctrl + K V	Toggle preview to side

Checkbox

Shopping List:

Apples
Bananas
Bread
Muffins

Directory & file structures

project
│   README.md
│   file001.txt
│
└───folder1
│   │   file011.txt
│   │   file012.txt
│   │
│   └───subfolder1
│       │   file111.txt
│       │   file112.txt
│       │   ...
│
└───folder2
    │   file021.txt
    │   file022.txt

Other example

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

melboudali/Mastering-Markdown