Imron Rosyadi
  • Hi 👋🏼
  • Background Removal
  • _v_images
    • 20211023055131420_4883.png
  • Me
    • Hi 👋🏼
    • My Awesome Android Apps
    • Book and Tutorial Plan
    • Browser Extension and Add-On
    • Imron Rosyadi CV
    • My Awesome Gadget
    • My Github Readme
    • Hi 👋🏼
    • MS Word Add In
    • My Workflow
    • Research Plan
    • Services on rosyadi.com and irosyadi Blog Networks
    • List of Uninstalled Windows Apps
    • My Awesome List of Windows Apps
  • Academia
    • Academia Resource
    • Arxiv and Paper Preprint
    • Awesome Browser Research Tools
    • Citation Tools
    • Awesome Conferences Tools
    • Funny Research Papers
    • Awesome Scientific Journal Tools
    • Awesome Latex Tools
    • Awesome Document Research Tools
    • Curated Papers
    • paper-exploration-tool-extended
    • Awesome Paper Exploration Tools
    • Awesome Paper Reading Tools
    • paper-search-extended
    • Paper and Article Search Tools
    • Awesome Research and Academic Writing Assistant Tools
    • How to Write Research Paper
    • PhD How To
    • Research Resources
    • Scientific Report Tools
    • Scihub - Paper Search
    • Technology for Society
    • Thesis Search
  • ai
    • Chat-GPT
    • GPT-2
    • GPT-3
  • App
    • 3D Tools
    • Arduino Graph Plotter Apps
    • Terminal in Arduino
    • Cloud GPU
    • Awesome Desktop Apps
    • Desktop Search App
    • Digitizer - Converting Graph into Data
    • Earth Map and Tools
    • Electronics EDA Tools
    • File Compression Optimization
    • Awesome List of File Converter Apps
    • File Sharing, File Transfer and File Sync
    • Free Apps for Developers
    • Free Apps for Students
    • Free Cloud Compute Infrastructure
    • Google Sheet Tools
    • Image Format Conversion
    • Interactive Code in Webpage
    • Jupyter Notebook Apps
    • Map Tools
    • Awesome List of Maps
    • Movie App
    • Note Calculator
    • Awesome List of OCR Apps
    • Octave Online Server
    • Open Source Apps
    • PC to Android Connection
    • PDF Tools
    • Phone Tools
    • Presentation Apps and Tools
    • Project and Time Management
    • QR Code and Barcode Apps
    • Read Mode Tool
    • Remote Desktop
    • RSS Tools
    • Secure Communications
    • Spreadshseet (Sheet) Apps and Tools
    • Symbolic Math Solver
    • Text Manipulation and Expansion
    • Torrent
    • Tracking Apps
    • Traffic Simulation
    • USB Tools
    • Utility Calculator
    • Website Cloning
    • Windows Application Manager
    • Windows Debloat Tools
    • Windows Launcher
  • Awesome
    • Awesome Free Stuffs from Internet
    • Color Science and Tools
    • Financial Tools
    • Game
    • History Tools and Apps
    • Linux Resources
    • Awesome Microcontroller and Microcomputer
    • Open Source Resources
    • Photography Resources
    • Regex
    • Unicode
    • Vexillology
    • Weather
  • Book
    • Awesome Open Source Documents
    • Book with Code
    • Computer Graphics Books, Tutorials, and Courses
    • Deep Learning Books, Tutorials, and Courses
    • Ebook Reader
    • E-book Search Engine Tools
    • eBook
    • Free and Open Electrical Engineering Books
    • Free and Open Books Repository and Provider
    • Free and Open Books
    • Image Processing Book and Tutorial
    • Interactive Books
    • Libgen - Book Search Engine
    • Math Books, Tutorials, and Courses
    • Numerical Computing Resources
    • Open Glossary
    • Pretext Book
    • Statistics Books, Tutorials, and Courses
    • z-lib - Book Search Engine
  • Course
    • Computer Science
    • Control Design with Frequency Method
    • Control Systems Resources
    • Control Systems
    • Standford CS231n 2017 Summary
    • CS231n Resources
    • Digital Signal Processing
    • Electronic Resources
    • Electronics
    • Embedded Systems
    • Free Online Course
    • Fundamentals of Electrical Engineering
    • Instrumentation
    • Kuliah
    • Linear Algebra
    • Machine Learning Andrew Ng Quizzes
    • Machine Learning by Andrew Ng Resources
    • Machine Learning CS299
    • Math Resources
    • MK Dasar Teknik Elektro
    • MK Internet of Things
    • MK Machine Learning
    • MK Matematika Teknik
    • MK Pengolahan Sinyal Digital
    • MK Sistem Kendali Cerdas
    • MK Sistem Kendali Lanjut
    • MK Sistem Kendali
    • Rangkaian Listrik
    • Statistic and Probability
  • data-engineering
    • Awesome Data Set
    • CSV Tools
    • Data Format Conversion Tools
    • Data Science Books, Tutorials, and Courses
    • Data Science Resources
    • Data Tools
    • Awesome List of Data Visualization
    • Awesome List of Dataset
  • Digital Media
    • IPTV
    • Awesome List of Animation Apps
    • Audio, Music, Radio, and Podcast Streaming Apps
    • Audio and Music Tools
    • Awesome WASM Apps
    • Face and Pose Animation
    • Free Audio and Music
    • Free Icons
    • Free Image
    • Free Videos
    • Generative 3D Image
    • Generative Audio Music
    • Generative Color Colorization
    • Generative Image
    • Generative Machine Learning GAN
    • Generative Text
    • Generative Video
    • GIF Tools
    • Historical Colorization
    • Awesome List of Image Editors, Converters, and Processors
    • Speech to Speech (Fake Voice Generator)
    • Speech to Text Apps
    • Awesome List of SVG Applications
    • Text to Speech Apps
    • Awesome List of Video Editors
    • Visual and Optical Illusion
  • Drawing and Diagram
    • Awesome List of Diagram Apps
    • Drawing Tools
    • Graph Tools and Apps
    • Lightboard
    • Sketching, Hand Drawing, and Hand Writing Web App
  • Hacking, Privacy, and Security
    • Two Factor Authentication
    • Awesome List of Adblock Apps
    • Adblock Testers
    • Bookmarklets
    • Awesome Desktop and Browser Automation
    • DNS Leak Checkers
    • DNS Tools
    • Email Alias and Forwarding
    • Encryption and Cryptography
    • Google Hacking
    • Hosts File Management
    • IP Tools
    • Link Tracker
    • My IP Address Checkers
    • Cloud Network Tools
    • OSINT Tools
    • Paywall Bypass
    • Web-based Ping and Latency Tools
    • Port Forwarding
    • Prank
    • Privacy, Security and Anonymity Apps
    • Subdomain Takeover
    • Userscript
    • VPN and Wireguard
    • Web Scraping
    • Web Testing
    • Website Monitoring
  • How To
    • Anaconda How To
    • Chrome How To
    • Cloudflare How To
    • Docker Howto
    • Google Docs How To
    • Google Sheet How To
    • LanguageTool Word How To
    • MATLAB How To
    • Microsoft Word How To
    • Netlify
    • Network How To
    • Notepad++ How To
    • Obsidian How To
    • Octave How To
    • Powerpoint Howto
    • Shortcut How To
    • Tailscale How To
    • Windows 10 How To
    • Wordpress Howto
    • Zotero How To
  • Learning
    • Anki and Spaced Repetition
    • Certification
    • Language Learning
    • Learning and Education Resources
  • machine-learning
    • Awesome NLP Projects
    • CT-Scan for Covid-19 Classification using Machine Learning
    • Emotion Detection with Machine Learning
    • Face Expression and Detection
    • Face Mask Detection with Machine Learning
    • Interesting Machine Learning Papers
    • Land Cover Classification
    • Machine Learning Books and Tutorials
    • Machine Learning Course
    • Machine Learning Glossary
    • Machine Learning Metrics
    • Machine Learning Resources
    • Machine Learning SOTA and Model Zoo
    • Machine Learning Tools
    • Machine Learning in Agriculture
    • Machine Learning for Earth Science
    • Hardware for Machine Learning
    • Machine Learning for Health
    • Machine Learning for Image Processing
    • Machine Learning Embedded Devices
    • Machine Learning in Mobile Devices
    • Machine Learning News and Blog
    • Machine Learning for Satellite Images
    • Machine Learning for Sport Pose Analysis
    • Machine Learning in Sports
    • Machine Learning Teaching
    • Awesome List of Machine Learning Visualization
    • Neural Network
    • NLP with GPT
    • NLP for Bahasa Indonesia
    • NLP Models
    • Object Detection
    • Reinforcement Learning
    • Safety Helmet and Plate Detection
  • Markdown
    • About Markdown
    • Basic Markdown Cheatsheet (example of Heading 1)
    • Basic Syntax of Markdown
    • Awesome Bookmarklet
    • commonmark
    • complete-markdown-cheatsheet
    • Extended Commonmark
    • Extended Markdown Cheatsheet
    • Extended Syntax of Markdown
    • Getting Started about Markdown
    • List of Library for Commonmark Extension
    • List of Extension in Markdown
    • Markdown Cheatsheet
    • Style Guide for Markdown Writing
    • Markdown Tools and Apps
    • About Pandoc
  • Note
    • 100 Days Challenge
    • Arduino in Industrial
    • About Compiler and Interpreter
    • Convolution
    • Emoji
    • File Format
    • Interesting Blog
    • Interesting Story
    • Kalman Filters
    • Op-Amp
    • Open Culture
    • Open Directory Search
    • Open Source Hardware
    • Open Healthcare Library
    • Patent and Intellectual Property
    • PID Control
    • Routh-Hurwitz
    • Social Media
    • Zeer Evaporation Pot
  • programming
    • Javascripts Books, Tutorials, and Courses
    • Javascript Resources
    • Numpy Resources
    • Programming for Kids Books, Tutorials, and Courses
    • Programming References
    • Programming Resources
    • Python Books, Tutorials, and Courses
    • Python in Browser
    • Python Resources
  • Random Notes
    • 2020 Q3
    • 2020 Q4
    • 2021 Q1
    • 2021 Q2
    • 2021 Q3
    • 2022 October
    • 2022 Q1
    • 2022 Q2
    • 2023 January
    • 2023 May
    • Bookmarks on Ebooks
    • Bookmarks
    • test
  • Research
    • Awesome Google Colab Notebooks
    • Awesome Jupyter Notebooks
    • Debutanizer Column
    • Digital Twin News
    • Digital Twin in Vehicles
    • FPGA
    • NCBI Papers with Code
    • PHM in Motor
    • Plant Identification
    • Open Source Robotic Simulator
    • Awesome Science Blogs and Forums
    • Sign Language Recognition
    • Soft Sensor
    • Solar Energy
    • Time Series Forecasting
    • Virtual Reality and Augmented Reality
  • Web Apps
    • Alternative Frontend of Popular Websites
    • Alternative to Popular Websites
    • Bookmarks Tool
    • Captive Portal Access
    • Color Format Conversion
    • Deepfake - This Thing Does Not Exist
    • Document Tools
    • Domain Name Tools
    • Free Cloud Storage
    • Free Resources in Internet
    • Github Apps and Tools
    • Hacker News Apps
    • Hosted Open Source Services
    • Instagram Apps
    • Awesome List of Interactive and Explorable Webs
    • News Agregator
    • No Code Platforms
    • Number Format Conversion
    • Online IDE
    • Platform as a Service
    • Random Data Generator
    • Reddit Apps
    • Search Engine App
    • Self-hosted Applications
    • Software Search
    • Spartan and Text Only Websites
    • Network Speed Test Apps
    • Twitter Apps
    • Unit Conversion
    • URL Shortener
    • virtual-browser
    • Check Live Status of Website
    • Web Tools
    • Document Tools Suite
    • Wikipedia Apps
    • Awesome Youtube Apps
  • Web Development
    • Awesome CSS
    • Special Markdown Case
    • Markdown for This Blog
    • Classless CSS
    • Developer Tools
    • experimental-heading-1
    • Title
    • Experimental iFrame
    • Experimental Markdown
    • Jamstack and WebApps
    • List of Static Web Generator
    • Web Metrics and Performance Analysis
    • Webdev Resources
    • Web List
    • Website Rank
  • Writing
    • Free GPT Playground
    • Book Publication
    • Online Dictionaries
    • Exobrain Blogs and Digital Gardens
    • Grammar Checkers
    • Awesome Latex Editors
    • Awesome Latex Learning
    • Awesome Markdown Apps
    • Mathematics Editor and Calculator
    • Notetaking Tools
    • Online Documentation Tools
    • Sentence Paraphraser
    • Word Phrase Banks
    • Plagiarism Checkers
    • Text and Markdown Editor
    • Thesaurus
    • Translation
    • Awesome Writing Assistant Tools
    • Writing Prompt
    • Writing Tips
Powered by GitBook
On this page
  • Overview
  • Headings
  • Paragraphs
  • Line Breaks
  • Emphasis
  • Blockquotes
  • Lists
  • Code
  • Links
  • Images
  • Escaping Characters
  • HTML

Was this helpful?

  1. Markdown

Basic Syntax of Markdown

Overview

Nearly all Markdown applications support the basic syntax outlined in John Gruber's original design document. There are minor variations and discrepancies between Markdown processors — those are noted inline wherever possible.

Headings

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level three (<h3>), use three number signs (e.g., ### My Header).

Markdown

HTML

Rendered Output

# Heading level 1

<h1>Heading level 1</h1>

## Heading level 2

<h2>Heading level 2</h2>

### Heading level 3

<h3>Heading level 3</h3>

#### Heading level 4

<h4>Heading level 4</h4>

Heading level 4

##### Heading level 5

<h5>Heading level 5</h5>

Heading level 5

###### Heading level 6

<h6>Heading level 6</h6>

Heading level 6

Alternate Syntax

Alternatively, on the line below the text, add any number of == characters for heading level 1 or -- characters for heading level 2.

Markdown

HTML

Rendered Output

Heading level 1 ===============

<h1>Heading level 1</h1>

Heading level 2 ---------------

<h2>Heading level 2</h2>

Heading Best Practices

Markdown applications don't agree on how to handle a missing space between the number signs (#) and the heading name. For compatibility, always put a space between the number signs and the heading name.

✅ Do this

❌ Don't do this

# Here's a Heading

#Here's a Heading

Paragraphs

To create paragraphs, use a blank line to separate one or more lines of text.

Markdown

HTML

Rendered Output

I really like using Markdown.

<p>I really like using Markdown.</p>

I really like using Markdown.

I think I'll use it to format all of my documents from now on.

<p>I think I'll use it to format all of my documents from now on.</p>

I think I'll use it to format all of my documents from now on.

Paragraph Best Practices

✅ Do this

❌ Don't do this

Don't put tabs or spaces in front of your paragraphs.

This can result in unexpected formatting problems.

Keep lines left-aligned like this.

Don't add tabs or spaces in front of paragraphs.

Line Breaks

To create a line break (<br>), end a line with two or more spaces, and then type return.

In Markdown: This is the first line. And this is the second line.

In HTML: <p>This is the first line.<br> And this is the second line.</p>

Rendered

This is the first line. And this is the second line.

Line Break Best Practices

You can use two or more spaces (commonly referred to as "trailing whitespace") for line breaks in nearly every Markdown application, but it's controversial. It's hard to see trailing whitespace in an editor, and many people accidentally or intentionally put two spaces after every sentence. For this reason, you may want to use something other than trailing whitespace for line breaks. Fortunately, there is another option supported by nearly every Markdown application: the <br> HTML tag.

For compatibility, use trailing white space or the <br> HTML tag at the end of the line.

There are two other options I don't recommend using. CommonMark and a few other lightweight markup languages let you type a backslash (\) at the end of the line, but not all Markdown applications support this, so it isn't a great option from a compatibility perspective. And at least a couple lightweight markup languages don't require anything at the end of the line — just type return and they'll create a line break.

✅ Do this

First line with two spaces after.  
And the next line.

First line with the HTML tag after.<br>
And the next line.

❌ Don't do this

First line with a backslash after.\
And the next line.

First line with nothing after.
And the next line.

Emphasis

Bold and Italic

To emphasize text with bold and italics at the same time, add three asterisks or underscores before and after a word or phrase. To bold and italicize the middle of a word for emphasis, add three asterisks without spaces around the letters.

Markdown

HTML

Rendered Output

This text is ***really important***.

This text is <strong><em>really important</em></strong>.

This text is really important.

This text is ___really important___.

This text is <strong><em>really important</em></strong>.

This text is really important.

This text is __*really important*__.

This text is <strong><em>really important</em></strong>.

This text is really important.

This text is **_really important_**.

This text is <strong><em>really important</em></strong>.

This text is really important.

This is really***very***important text.

This is really<strong><em>very</em></strong>important text.

This is reallyveryimportant text.

Bold and Italic Best Practices

Markdown applications don't agree on how to handle underscores in the middle of a word. For compatibility, use asterisks to bold and italicize the middle of a word for emphasis.

✅ Do this

❌ Don't do this

This is really***very***important text.

This is really___very___important text.

Blockquotes

To create a blockquote, add a > in front of a paragraph.

> Dorothy followed her through many of the beautiful rooms in her castle.

The rendered output looks like this:

Dorothy followed her through many of the beautiful rooms in her castle.

Blockquotes with Multiple Paragraphs

Blockquotes can contain multiple paragraphs. Add a > on the blank lines between the paragraphs.

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

The rendered output looks like this:

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Nested Blockquotes

Blockquotes can be nested. Add a >> in front of the paragraph you want to nest.

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

The rendered output looks like this:

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Blockquotes with Other Elements

Blockquotes can contain other Markdown formatted elements. Not all elements can be used — you'll need to experiment to see which ones work.

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

The rendered output looks like this:

The quarterly results look great!

  • Revenue was off the chart.

  • Profits were higher than ever.

Everything is going according to plan.

Lists

You can organize items into ordered and unordered lists.

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. The numbers don't have to be in numerical order, but the list should start with the number one.

Markdown

HTML

Rendered Output

1. First item 2. Second item 3. Third item 4. Fourth item

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ol>

  1. First item

  2. Second item

  3. Third item

  4. Fourth item

1. First item 1. Second item 1. Third item 1. Fourth item

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ol>

  1. First item

  2. Second item

  3. Third item

  4. Fourth item

1. First item 8. Second item 3. Third item 5. Fourth item

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> <li>Fourth item</li> </ol>

  1. First item

  2. Second item

  3. Third item

  4. Fourth item

1. First item 2. Second item 3. Third item 1. Indented item 2. Indented item 4. Fourth item

<ol> <li>First item</li> <li>Second item</li> <li>Third item <ol> <li>Indented item</li> <li>Indented item</li> </ol> </li> <li>Fourth item</li> </ol>

  1. First item

  2. Second item

  3. Third item

    1. Indented item

    2. Indented item

  4. Fourth item

Unordered Lists

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

Markdown

HTML

Rendered Output

- First item - Second item - Third item - Fourth item

<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

* First item * Second item * Third item * Fourth item

<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

+ First item * Second item - Third item + Fourth item

<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

- First item - Second item - Third item - Indented item - Indented item - Fourth item

<ul> <li>First item</li> <li>Second item</li> <li>Third item <ul> <li>Indented item</li> <li>Indented item</li> </ul> </li> <li>Fourth item</li> </ul>

  • First item

  • Second item

  • Third item

    • Indented item

    • Indented item

  • Fourth item

Adding Elements in Lists

To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab, as shown in the following examples.

Paragraphs

*   This is the first list item.
*   Here's the second list item.

    I need to add another paragraph below the second list item.

*   And here's the third list item.

The rendered output looks like this:

  • This is the first list item.

  • Here's the second list item.

    I need to add another paragraph below the second list item.

  • And here's the third list item.

Blockquotes

*   This is the first list item.
*   Here's the second list item.

    > A blockquote would look great below the second list item.

*   And here's the third list item.

The rendered output looks like this:

  • This is the first list item.

  • Here's the second list item.

    A blockquote would look great below the second list item.

  • And here's the third list item.

Code Blocks

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

The rendered output looks like this:

  1. Open the file.

  2. Find the following code block on line 21:

    <html>
      <head>
        <title>Test</title>
      </head>
  3. Update the title to match the name of your website.

Images

1.  Open the file containing the Linux mascot.
2.  Marvel at its beauty.

    ![Tux, the Linux mascot](/assets/images/tux.png)

3.  Close the file.

The rendered output looks like this:

  1. Open the file containing the Linux mascot.

  2. Marvel at its beauty.

  3. Close the file.

Code

To denote a word or phrase as code, enclose it in backticks (` ).

Markdown

HTML

Rendered Output

At the command prompt, type `nano`.

At the command prompt, type <code>nano</code>.

At the command prompt, type nano.

Escaping Backticks

If the word or phrase you want to denote as code includes one or more backticks, you can escape it by enclosing the word or phrase in double backticks (``).

Markdown

HTML

Rendered Output

``Use `code` in your Markdown file.``

<code>Use `code` in your Markdown file.</code>

Use `code` in your Markdown file.

Code Blocks

To create code blocks, indent every line of the block by at least four spaces or one tab.

    <html>
      <head>
      </head>
    </html>

The rendered output looks like this:

<html>
  <head>
  </head>
</html>

To create a horizontal rule, use three or more asterisks (***), dashes (---), or underscores (___) on a line by themselves.

***

---

_________________

The rendered output of all three looks identical:

Horizontal Rule Best Practices

For compatibility, put blank lines before and after horizontal rules.

✅ Do this

Try to put a blank line before...

---

...and after a horizontal rule.

❌ Don't do this

Without blank lines, this would be a heading.
---
Don't do this!

Links

To create a link, enclose the link text in brackets (e.g., [Duck Duck Go]) and then follow it immediately with the URL in parentheses (e.g., (https://duckduckgo.com)).

My favorite search engine is [Duck Duck Go](https://duckduckgo.com).

The rendered output looks like this:

Adding Titles

You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in parentheses after the URL.

My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").

The rendered output looks like this:

URLs and Email Addresses

To quickly turn a URL or email address into a link, enclose it in angle brackets.

<https://www.markdownguide.org>
<fake@example.com>

The rendered output looks like this:

Formatting Links

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).

The rendered output looks like this:

Reference-style Links

Reference-style links are a special kind of link that make URLs easier to display and read in Markdown. Reference-style links are constructed in two parts: the part you keep inline with your text and the part you store somewhere else in the file to keep the text easy to read.

Formatting the First Part of the Link

The first part of a reference-style link is formatted with two sets of brackets. The first set of brackets surrounds the text that should appear linked. The second set of brackets displays a label used to point to the link you're storing elsewhere in your document.

Although not required, you can include a space between the first and second set of brackets. The label in the second set of brackets is not case sensitive and can include letters, numbers, spaces, or punctuation.

This means the following example formats are roughly equivalent for the first part of the link:

  • [hobbit-hole][1]

  • [hobbit-hole] [1]

Formatting the Second Part of the Link

The second part of a reference-style link is formatted with the following attributes:

  1. The label, in brackets, followed immediately by a colon and at least one space (e.g., [label]:).

  2. The URL for the link, which you can optionally enclose in angle brackets.

  3. The optional title for the link, which you can enclose in double quotes, single quotes, or parentheses.

This means the following example formats are all roughly equivalent for the second part of the link:

  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle

  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"

  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'

  • [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)

  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"

  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'

  • [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

You can place this second part of the link anywhere in your Markdown document. Some people place them immediately after the paragraph in which they appear while other people place them at the end of the document (like endnotes or footnotes).

An Example Putting the Parts Together

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends
of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to
eat: it was a [hobbit-hole](https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"), and that means comfort.

Though it may point to interesting additional information, the URL as displayed really doesn't add much to the existing raw text other than making it harder to read. To fix that, you could format the URL like this instead:

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends
of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to
eat: it was a [hobbit-hole][1], and that means comfort.

In both instances above, the rendered output would be identical:

and the HTML for the link would be:

<a href="https://en.wikipedia.org/wiki/Hobbit#Lifestyle" title="Hobbit lifestyles">hobbit-hole</a>

Link Best Practices

Markdown applications don't agree on how to handle spaces in the middle of a URL. For compatibility, try to URL encode any spaces with %20.

✅ Do this

❌ Don't do this

[link](https://www.example.com/my%20great%20page)

[link](https://www.example.com/my great page)

Images

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title after the URL in the parentheses.

![Philadelphia's Magic Gardens. This place was so cool!](/assets/images/philly-magic-gardens.jpg "Philadelphia's Magic Gardens")

The rendered output looks like this:

Linking Images

To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![An old rock in the desert](/assets/images/shiprock.jpg "Shiprock, New Mexico by Beau Rogers")](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)

The rendered output looks like this:

Escaping Characters

To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash (\) in front of the character.

\* Without the backslash, this would be a bullet in an unordered list.

The rendered output looks like this:

* Without the backslash, this would be a bullet in an unordered list.

Characters You Can Escape

You can use a backslash to escape the following characters.

Character

Name

\

backslash

`

*

asterisk

_

underscore

{ }

curly braces

[ ]

brackets

( )

parentheses

#

pound sign

+

plus sign

-

minus sign (hyphen)

.

dot

!

exclamation mark

|

HTML

Many Markdown applications allow you to use HTML tags in Markdown-formatted text. This is helpful if you prefer certain HTML tags to Markdown syntax. For example, some people find it easier to use HTML tags for images. Using HTML is also helpful when you need to change the attributes of an element, like specifying the color of text or changing the width of an image.

To use HTML, place the tags in the text of your Markdown-formatted file.

This **word** is bold. This <em>word</em> is italic.

The rendered output looks like this:

This word is bold. This word is italic.

HTML Best Practices

For security reasons, not all Markdown applications support HTML in Markdown documents. When in doubt, check your Markdown application's documentation. Some applications support only a subset of HTML tags.

Use blank lines to separate block-level HTML elements like <div>, <table>, <pre>, and <p> from the surrounding content. Try not to indent the tags with tabs or spaces — that can interfere with the formatting.

You can't use Markdown syntax inside block-level HTML tags. For example, <p>italic and **bold**</p> won't work.

PreviousBasic Markdown Cheatsheet (example of Heading 1)NextAwesome Bookmarklet

Last updated 3 years ago

Was this helpful?

Unless the , don't indent paragraphs with spaces or tabs.

are normally indented four spaces or one tab. When they're in a list, indent them eight spaces or two tabs.

Note: To create code blocks without indenting lines, use .

My favorite search engine is .

My favorite search engine is .

To links, add asterisks before and after the brackets and parentheses. To denote links as , add backticks in the brackets.

I love supporting the . This is the . See the section on .

Say you add a URL as a to a paragraph and it looks like this in Markdown:

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, nor yet a dry, bare, sandy hole with nothing in it to sit down on or to eat: it was a , and that means comfort.

Philadelphia's Magic Gardens. This place was so cool!

backtick (see also )

pipe (see also )

paragraph is in a list
fenced code blocks
Duck Duck Go
Duck Duck Go
https://www.markdownguide.org
fake@example.com
hobbit-hole
Code blocks
emphasize
code
EFF
Markdown Guide
code
standard URL link
escaping pipe in tables
escaping backticks in code
Tux, the Linux mascot