🎩 The Magical World of Markdown: A Markdown Tutorial 🪄

Welcome, intrepid adventurer, to this fun, creative, and entertaining guide on all things Markdown! Think of this as your ultimate markdown cheat sheet, a Markdown tutorial that'll have you creating slick markdown files, mastering markdown syntax, and converting your notes to HTML faster than you can say "markdown to html"!

Markdown Editor Online

Markdown viewers and online editors let you view markdown in its formatted state. Most simply convert your markdown into an HTML structure and style it with CSS. There are many online markdown editors you can use to test it out today!

Introduction

Markdown is a lightweight plain-text format that transforms into rich HTML. It's beloved by developers, writers, and anyone who's ever used a Markdown editor (online or offline) to write documentation, blogs, or even academic papers in R Markdown.

What is Markdown?

Markdown is a simple markup language that allows you to create formatted text using plain text syntax. It's a way to write content that's easy to read and write, and can be easily converted into HTML, PDF, or other formats.

Markdown was created by John Gruber and Aaron Swartz in 2004 as a lightweight alternative to HTML. It's designed to be easy to learn and use—even for those without extensive technical knowledge.

Some common features of Markdown include:

• Headings: Created using # symbols (e.g. # Heading, ## Subheading, etc.)
• Bold and italic text: Created using ** and * symbols (e.g. **bold**, *italic*)
• Lists: Created using -, +, or * symbols, (e.g. - item 1, - item 2, etc.)
• Links: Created using [text](url) syntax (e.g. [Google](https://www.google.com))
• Images: Created using  syntax (e.g. )

Why use Markdown?

• Clean, readable source
• Easy conversion to HTML, PDF, or slides
• Supported by:
• GitHub
• VS Code
• Stack Overflow
• Notion
• Obsidian
• Typora
• React-markdown
• MarkdownPad
• ..and many more Markdown viewers, editors, and plugins

Using Markdown makes it easy to create and share content across different platforms and tools. Its simplicity and flexibility have made it a popular choice among writers, developers, and content creators.

Ready? Let's dive in and explore the world of Markdown!

Headers

Headers create structure—your digital signposts:

# H1 — The biggest Header
## H2 — Section Title
### H3 — Subsection
#### H4 — Smaller Still
##### H5 - Tiny Header
###### H6 — The Tiniest Header

The above markdown could potentially be rendered into HTML as:

<h1>H1 — The Biggest Header</h1>
<h2>H2 — Section Title</h2>
<h3>H3 — Subsection</h3>
<h4>H4 — Smaller Still</h4>
<h5>H5 — Tiny Header</h5>
<h6>H6 — The Tiniest Header</h6>

Use headers to craft a neat Markdown outline to generate PDFs or SEO-friendly HTML.

Paragraphs & Line Breaks

Plain text paragraphs are just separated by a blank line:

This is one paragraph.

This is another paragraph.

For a line break (without starting a new paragraph), end a line with two spaces:

First line␣␣
Second line

NOTE: Not all editors support this reliably, but it works well in GitHub-flavored Markdown (GFM).

Emphasis: Bold, Italic, Underline

Emphasis is your friend in making words pop.

• Italic with single asterisks or underscores: *italic* or _italic_.
• Bold with double asterisks or underscores: **bold** or __bold__.
• Bold & Italic by combining: ***both bold AND italic***.
• Strikethrough with tildes: ~~this item is finished~~

NOTE: Some markdown editors also support basic HTML elements like <s>...</s> or <b>...</b>. Markdown doesn't natively support an underline tag, but you can always mix in <u>underline</u> to accomplish this. However, not all markdown engines support strikethrough; it's GitHub-flavored and common—but not universal.

Markdown Lists: Ordered & Unordered

Unordered Lists

- Item one
- Item two
  - Sub-item
+ Another style with plus
* Or asterisk bullets

Ordered Lists

1. First step
2. Second step
  1. Sub-step
3. Final step

Lists are perfect for writing a markdown cheat sheet or outlining tasks in a markdown file.

Links: The Markdown Link

Create hyperlinks to your favorite tools!

[Click me!](https://www.example.com)

Or add a title (hover text):

[ts‑markdown‑parser on NPM](https://www.npmjs.com/package/ts-markdown-parser)

Rendered: ts‑markdown‑parser on NPM

This is the heart of any markdown hyperlink or Markdown link.

Images: Pictures Speak 📸

Embed images just like links, but start with !:

![Cute kitten](https://i.imgur.com/ET1LpQw.jpeg)

The above ![]() markdown syntax for images should render as if it were an <img src="https://i.imgur.com/ET1LpQw.jpeg" alt="Cute kitten"/> HTML element:

NOTE: For local images (not complete URLs), the syntax is the same: 

Use images to spice up your markdown editor, Markdown Viewer, or blog posts!

Code Blocks in Markdown

Code is an essential part of technical documentation and tutorials. Markdown makes it easy to display code with proper formatting for readability and syntax highlighting.

Inline Code

To show inline code, wrap the text in single backticks (`).

This example markdown, with an inline code snippet:

Use `git status` to check changes.

Should render and look like this formatted bit of text:

Use git status to check changes.

Multi-line Code Blocks

For multi-line markdown code blocks, wrap your code in triple backticks (```) followed by the language name (e.g. python or js).

You can also specify a language for syntax highlighting by adding it after the opening backticks:

Example Python code block:

```python
# Python function to greet a user
def greet(name):
    print(f"Hello, {name}!")

greet("Markdown User")
```

Example JavaScript code block:

```javascript
// JavaScript function to greet a user
function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet("Markdown User");
```

Example Golang (Go) code block:

```go
// Go function to greet a user
package main

import "fmt"

func greet(name string) {
    fmt.Printf("Hello, %s!\n", name)
}

func main() {
    greet("Markdown User")
}
```

The above example should render like so:

// Go function to greet a user
package main

import "fmt"

func greet(name string) {
    fmt.Printf("Hello, %s!\n", name)
}

func main() {
    greet("Markdown User")
}

NOTE: In Markdown, to show a backtick (`) without using a backslash to escape, you can use HTML entities. The HTML entity for a backtick is & directly followed by #96;.

Common Patterns

• Don't forget to specify the language (python, javascript, go, etc.) for better syntax highlighting.
• For code within a sentence, always use single backticks (e.g. "Use `npm install` to add a package.")
• For blocks, use triple backticks (```) before and after the code.

These blocks turn your markdown code blocks into beautifully formatted snippets.

Tables: markdown table & GitHub Markdown table

Tables can be tricky, but Markdown makes them doable:

```markdown
| Feature        | Syntax                          |
| ——————— | ——————————————--- |
| Bold           | `**bold**`                      |
| Italic         | `*italic*`                      |
| Link           | `[text](url)`                   |
| Table          | This one!                       |
```

The above can be rendered as a beautiful HTML <tbody> table with nested <tr> and <td> elements:

Horizontal Markdown Rules

Horizontal horizontal "rules" allow you to put a break in the format, or layout, of your markdown content or document:

### Some Content Here

This is a paragraph.

---

### More Content Here

This is another paragraph.

The above markdown will render as:

Some Content Here

This is a paragraph.

More Content Here

This is another paragraph.

Conclusion

Congratulations, you now possess the keys to the Markdown kingdom! From headers to lists, images to tables, you've seen how easy it is to craft rich, readable content. Use this, and other markdown cheat sheets, whenever you need a refresher or want to show off your editing markdown prowess in a markdown online editor or even in your local Markdown Viewer.

And hey, if you're ready to level up and convert your markdown into polished HTML, check out my very own markdown-to-HTML parser:

• ts‑markdown‑parser on Yarn
• ts‑markdown‑parser on NPM
• ts‑markdown‑parser on GitHub

My online markdown editor uses ts-markdown-parser under the hood!

Happy writing, formatting, and converting—from markdown to html, Markdown to PDF, or wherever your creativity takes you! 🎉