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
  • Markdown with Commonmark
  • 1.1. Heading
  • h2 Heading
  • h2 Heading
  • h1 Heading
  • h2 Heading
  • h1 Heading
  • h2 Heading
  • 1.2. Paragraphs
  • 1.3 Line Break
  • 1.4. Emphasis
  • 1.5. Blockquotes
  • 1.6. List Items
  • 1.7. Lists
  • 1.9. Links
  • 1.10. Images
  • 1.11. Escaping Characters
  • 1.12. Raw HTML and HTML Blocks
  • 1.14. Horizontal Rules (Thematic Break)

Was this helpful?

  1. Markdown

commonmark

PreviousAwesome BookmarkletNextcomplete-markdown-cheatsheet

Last updated 3 years ago

Was this helpful?

Markdown with Commonmark

Source:

1.1. Heading

1.1.1. ATX Heading

Notes:

  • Always put a space between # and the heading name

  • Maximum to </h6> heading

  • A leaf block, it cannot contain other block

Markdown syntax:

## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

HTML code:

<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Markdown display:

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

HTML display:

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

### 1.1.2. Setex Heading *Notes:* - Maximum to `` heading - Underlining `---` or `==` can be any length: - A blank line is needed between a paragraph and a following setext heading - A leaf block, it cannot contain other block Markdown syntax: ```md h1 Heading =================== h2 Heading ------------------- ``` HTML code: ```html

h1 Heading

h2 Heading

``` Markdown display: h1 Heading ======== h2 Heading ------------- HTML display:

h1 Heading

h2 Heading

1.2. Paragraphs

Notes:

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

  • Don't ident paragraphs with spaces or tabs

  • A leaf block, it cannot contain other block

Markdown syntax:

This is the first paragraph.

This is the second paragraph

HTML code:

<p>This is the first paragraph.</p>
<p>This is the second paragraph</p>

Markdown display:

This is the first paragraph.

This is the second paragraph

HTML display:

This is the first paragraph.

This is the second paragraph

1.3 Line Break

1.3.1 Hard Line Break

Notes:

  • To create a line break, end a line of text with two or more spaces, and then type return

  • Or by ended it with \

  • Or by use the <br> HTML tag

Markdown syntax:

This is the first line, ended with two spaces.  
And this is the second line.

This is the first line, ended with `\`.\
And this is the second line.

This is the first line, ended with `<br>`.<br>
And this is the second line.

HTML code:

<p>This is the first line, ended with two spaces.<br />
And this is the second line.</p>
<p>This is the first line, ended with <code>\</code>.<br />
And this is the second line.</p>
<p>This is the first line, ended with <code>&lt;br&gt;</code>.<br>
And this is the second line.</p>

Markdown display:

This is the first line, ended with two spaces. And this is the second line.

This is the first line, ended with \. And this is the second line.

This is the first line, ended with <br>. And this is the second line.

HTML display:

This is the first line, ended with two spaces. And this is the second line.

This is the first line, ended with \. And this is the second line.

This is the first line, ended with <br>. And this is the second line.

1.3.2 Soft Line Break

Note:

  • A regular line break (not in a code span or HTML tag) that is not preceded by two or more spaces or a backslash is parsed as a softbreak. (A softbreak may be rendered in HTML either as a line ending or as a space.

Markdown syntax:

This is the first line, without two spaces in the end. 
And this is the second line.

HTML code:

<p>This is the first line, without two spaces in the end.
And this is the second line.</p>

Markdown display:

This is the first line, without two spaces in the end. And this is the second line.

HTML display:

This is the first line, without two spaces in the end. And this is the second line.

1.4. Emphasis

  • Between * or _ and text should be not any whitespace.

  • *italics* or _italics_will make italics

  • **bold** or __bold__will make bold

Markdown syntax:

**This is bold text**  
__This is bold text__  
*This is italic text*  
_This is italic text_  
We have **bold***italic*  
This text is ***really important***  
This text is ___really important___  
This text is __*really important*__  
This text is **_really important_**

HTML code:

<p><strong>This is bold text</strong><br />
<strong>This is bold text</strong><br />
<em>This is italic text</em><br />
<em>This is italic text</em><br />
We have <strong>bold</strong><em>italic</em><br />
This text is <em><strong>really important</strong></em><br />
This text is <em><strong>really important</strong></em><br />
This text is <strong><em>really important</em></strong><br />
This text is <strong><em>really important</em></strong></p>

Markdown display:

This is bold text This is bold text This is italic text This is italic text We have bold*italic This text is **really important This text is really important This text is __really important*__ This text is really important**

HTML display:

This is bold text This is bold text This is italic text This is italic text We have bolditalic This text is really important This text is really important This text is really important This text is really important

1.5. Blockquotes

Notes:

  • A container block, it can contain other block

  • You could just add only one > at the first line (lazy-continuation);

  • Blockquotes can contain other blockquotes (nested)

  • Blockquotes can contain other blocks: multiple paragraphs, heading, code, etc.

  • Blockquotes can contain other Markdown formatted elements. But not all elements can be used.

Markdown syntax:

> Blockquotes can also be nested...
>> ...by using `>` right next to each other...
> > > ...or with spaces between arrows.

HTML code:

<blockquote>
<p>Blockquotes can also be nested...</p>
<blockquote>
<p>...by using <code>&gt;</code> right next to each other...</p>
<blockquote>
<p>...or with spaces between arrows.</p>
</blockquote>
</blockquote>
</blockquote>

Markdown display:

Blockquotes can also be nested...

...by using > right next to each other...

...or with spaces between arrows.

HTML display:

Blockquotes can also be nested...

...by using > right next to each other...

...or with spaces between arrows.

Markdown syntax:

> ### A Heading 3
>
> - List
> - of `code`.
>
>>  *Everything* is going according to **plan** in [example][ex].

HTML code:

<blockquote>
<h3>A Heading 3</h3>
<ul>
<li>List</li>
<li>of <code>code</code>.</li>
</ul>
<blockquote>
<p><em>Everything</em> is going according to <strong>plan</strong> in <a href="https://example.com/" title="an example link">example</a>.</p>
</blockquote>
</blockquote>

Markdown display:

A Heading 3

  • List

  • of code.

HTML display:

A Heading 3

  • List

  • of code.

1.6. List Items

Notes:

  • Bullet (unordered) list is a list with -, +, or * character marker.

  • Ordered list is a list with maximum length 9 arabic digits marker (from 0 to 9), followed by either a . character or a ) character.

1.6.1 List with Indentation

  • add at least one whitespace more for indented paragraph but not listed

  • add a space between line

Markdown syntax:

1. a paragraph

   indented paragraph (not listed)
2. next paragraph

* a paragraph

  indented paragraph (not listed)
* next paragraph

HTML code:

<ol>
<li>
<p>a paragraph</p>
<p>indented paragraph (not listed)</p>
</li>
<li>
<p>next paragraph</p>
</li>
</ol>
<ul>
<li>
<p>a paragraph</p>
<p>indented paragraph (not listed)</p>
</li>
<li>
<p>next paragraph</p>
</li>
</ul>

Markdown display:

  1. a paragraph

    indented paragraph (not listed)

  2. next paragraph

  3. a paragraph

    indented paragraph (not listed)

  4. next paragraph

HTML display:

  1. a paragraph

    indented paragraph (not listed)

  2. next paragraph

  • a paragraph

    indented paragraph (not listed)

  • next paragraph

### 1.6.2 List with Other Blocks Markdown syntax: ```md 1. List block can contain ``` code block ``` paragraph > quote block 2. code 3. #### Heading4 4. >> quote ``` HTML code: ```html

  1. List block can contain

    code block

    paragraph

    quote block

  2. code
  3. Heading4

  4. quote

``` Markdown display: 1. List block can contain ``` code block ``` paragraph > quote block 2. code 3. #### Heading4 4. >> quote HTML display:

  1. List block can contain

    code block

    paragraph

    quote block

  2. code
  3. Heading4

  4. quote

1.6.3 Maximum Digit for Ordered List is 9

Notes:

  • To prevent buffer overflow in some browser

Markdown syntax:

0. list  
123456789. continue  
1. list  
1234567890. buffer overflow

HTML code:

<ol start="0">
<li>list</li>
<li>continue</li>
<li>list<br />
1234567890. buffer overflow</li>
</ol>

Markdown display:

  1. list

  2. continue

  3. list

  4. buffer overflow

HTML display:

  1. list

  2. continue

  3. list 1234567890. buffer overflow

1.6.4 Indentitation

Notes:

  • A sublist must be indented the same number of spaces a paragraph would need to be in order to be included in the list item.

  • Add some space so the next mark of the next item will be positioned under the first character of previous list item.

Markdown syntax:

- foo
  - add two spaces
    - add two spaces
      - add two spaces

HTML code:

<ul>
<li>foo
<ul>
<li>add two spaces
<ul>
<li>add two spaces
<ul>
<li>add two spaces</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Markdown display:

  • foo

    • add two spaces

      • add two spaces

        • add two spaces

HTML display:

  • foo

    • add two spaces

      • add two spaces

        • add two spaces

1.7. Lists

Notes:

  • A list is a sequence of one or more list items of the same type.

  • The list items may be separated by any number of blank lines.

  • Two list items are of the same type if they begin with a list marker of the same type.

  • Two list markers are of the same type if (a) they are bullet list markers using the same character (-, +, or *) or (b) they are ordered list numbers with the same delimiter (either . or )).

  • A list is an ordered list if its constituent list items begin with ordered list markers, and a bullet list if its constituent list items begin with bullet list markers.

  • A list is loose if any of its constituent list items are separated by blank lines (loose list are wrapped in <p> tags), or if any of its constituent list items directly contain two block-level elements with a blank line between them. Otherwise a list is tight.

1.7.1 Paragraph and Starting New List

Notes:

  • No blank line is needed to separate a paragraph from a following list

  • Changing the bullet or ordered list delimiter starts a new list

Markdown syntax:

I have:
1. foo
10. bar
5) baz
11) buzz
+ ouch
+ what
- where

HTML code:

<p>I have:</p>
<ol>
<li>foo</li>
<li>bar</li>
</ol>
<ol start="5">
<li>baz</li>
<li>buzz</li>
</ol>
<ul>
<li>ouch</li>
<li>what</li>
</ul>
<ul>
<li>where</li>
</ul>

Markdown display:

I have: 1. foo 10. bar 5) baz 11) buzz

  • ouch

  • what

  • where

HTML display:

I have:

  1. foo

  2. bar

  3. baz

  4. buzz

  • ouch

  • what

  • where

### 1.7.2. Blank Lines and Blank HTML Comment *Notes:* - There can be any number of blank lines between items - To separate consecutive lists of the same type, or to separate a list from an indented code block, insert a blank HTML comment Markdown syntax: ```md - foo notcode - foo code ``` HTML code: ```html

  • foo

    notcode

  • foo

code

``` Markdown display: - foo notcode - foo code HTML display:

  • foo

    notcode

  • foo

code

### 1.7.3. Bullet (Unordered) Lists Markdown syntax: ```md + To start a list, there should be an empty line above + Create a list by starting a line with `+`, `-`, or `*` - Changing the sign will add a linespace (make new list) + Add text under an item This is a text under an item. Notice that there are two spaces at the end above. - Sub-lists are made by indenting 2 spaces (to ensure the next mark is fallen under the first character of previous list item): * Item 2a * Item 2b * Item 3 To end a list, there should be one empty line above. ``` Markdown display: + To start a list, there should be an empty line above + Create a list by starting a line with `+`, `-`, or `*` - Changing the sign will add a linespace (make new list) + Add text under an item This is a text under an item. Notice that there are two spaces at the end above. - Sub-lists are made by indenting 2 spaces (to ensure the next mark is fallen under the first character of previous list item): * Item 2a * Item 2b * Item 3 To end a list, there should be one empty line above. ### 1.7.4. Ordered Lists *Notes:* - The start number of an ordered list is determined by the list number of its initial list item. The numbers of subsequent list items are disregarded. Markdown syntax: ```md 1. Notice that the sequence number is irrelevant. 1. Notice that there are two spaces at the end. To make a new text under item. 3. Sub-lists are made by indenting 4 spaces (to ensure the next mark is fallen under the first character of previous list item) 1. Item 3a 2. Item 3b 8. Any number for item 4 ``` Markdown display: 1. Notice that the sequence number is irrelevant. 1. Notice that there are two spaces at the end. To make a new text under item. 3. Sub-lists are made by indenting 4 spaces (to ensure the next mark is fallen under the first character of previous list item) 1. Item 3a 2. Item 3b 8. Any number for item 4 ### 1.7.5. Ordered List Continuation Markdown syntax: ```md 57. will started with offset 57 1. so it will be 58 ``` HTML code: ```html

  1. will started with offset 57

  2. so it will be 58

``` Markdown display: 57. will started with offset 57 1. so it will be 58 HTML display:

  1. will started with offset 57

  2. so it will be 58

### 1.7.6. Elements in Lists *Notes:* - To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab Markdown syntax: ```md * This is the first list item. > A blockquote would look great below the second 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. ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png) * and the last list item ``` Markdown display: * This is the first list item. > A blockquote would look great below the second 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. ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png) * and the last list item *But, for text element in ordered list, add five spaces* 1. This is the first list item. > A blockquote would look great below the second list item. 2. Here's the second list item. I need to add another paragraph below the second list item. 3. And here's the third list item. ![Tux, the Linux mascot](https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Tux.png/220px-Tux.png) 4. and the last list item *But, for code blocks in the lists, add eight spaces or two tabs.* 1. Open the file. 2. Find the following code block on line 21:Test 3. Update the title to match the name of your website. --- ## 1.8. Code and Code Blocks ### 1.8.1. Inline Code (Code Spans) *Notes:* - It is inline content - It is written between two backticks `\'` Markdown syntax: ```md This is a `code`. ``` HTML code: ```html

This is a code. ``` Markdown display: This is a `code`. HTML display:

This is a code.

1.8.2. Indented Code Blocks

Notes:

  • Idented by add at least four spaces or one tab before

  • A leaf block, it cannot contain other block

Markdown syntax:

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

HTML code:

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;</code></pre>

Markdown display:

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

HTML display:

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

1.8.3. Fenced Code Blocks

Notes:

  • A code fence is a sequence of at least three consecutive backtick characters (`) or tildes (~)

  • An info string can be provided after the opening code fence lang is optional to help to specify the language of the code.

  • A leaf block, it cannot contain other block

Markdown syntax:

~~~
This is a fenced code block.
~~~
```
This is also a fenced code block.
```

HTML code:

<pre><code>This is a fenced code block.
</code></pre>
<pre><code>This is also a fenced code block.
</code></pre>

Markdown display:

This is a fenced code block.
This is also a fenced code block.

HTML display:

This is a fenced code block.
This is also a fenced code block.

1.9. Links

1.9.1. Inline Links

Notes:

  • A link contains link text (the visible text), a link destination (the URI that is the link destination), and optionally a link title.

Markdown syntax:

This is [link](https://example.com/)

This is [*link with title and `code`*](https://example.com/ "title text!")

This is [https://example.com/]()

HTML code:

<p>This is <a href="https://example.com/">link</a></p>
<p>This is <a href="https://example.com/" title="title text!"><em>link with title and <code>code</code></em></a></p>
<p>This is <a href="">https://example.com/</a></p>

Markdown display:

HTML display:

1.9.2. Full Reference Links

Notes:

  • A full reference link consists of a link text immediately followed by a link label that matches a link reference definition elsewhere in the document

Markdown syntax:

This is a [foo][ex]

HTML code:

<p>This is a <a href="https://example.com/" title="an example link">foo</a></p>

Markdown display:

HTML display:

1.9.3. Shortcut Reference Links

Notes:

  • A shortcut reference link consists of a link label that matches a link reference definition elsewhere in the document and is not followed by [] or a link label.

Markdown syntax:

This is a [foo]

HTML code:

<p>This is a <a href="https://example.com/" title="an example link">foo</a></p>

Markdown display:

HTML display:

1.9.4. Autolinks

  • Autolinks are absolute URIs and email addresses inside < and >. They are parsed as links, with the URL or email address as the link label.

  • Spaces are not allowed in autolink change it to %20

Markdown syntax:

<https://example.com/>

HTML code:

<p><a href="https://example.com/">https://example.com/</a></p>

Markdown display:

HTML display:

1.10. Images

Notes:

  • Syntax for images is like the syntax for links, with one difference. Instead of link text, we have an image description.

  • The rules for this are the same as for link text, except that (a) an image description starts with ![ rather than [, and (b) an image description may contain links.

  • It is not recommended to use image links in reference format. Some apps will not preview those images.

1.10.1 Inline Links Format

![Wikipedia](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png "Wikipedia Logo")

![](https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png)
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt="Wikipedia" title="Wikipedia Logo"></p>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt=""></p>

1.10.2 Full References Format

This is a ![Wikipedia][ex]
<p>This is a <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt="Wikipedia" title="Wikipedia Logo" /></p>

1.10.3 Shorcut References Format

This is a ![foo]
<p>This is a <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png" alt="foo" title="Wikipedia Logo" /></p>

1.11. Escaping Characters

Note:

  • add a backslash \ in front of the ASCII character.

  • Any ASCII punctuation character may be backslash-escaped

Markdown syntax:

\!\"\#\$\%\&\'\(\)\*\+\,  
\-\.\/\:\;\<\=\>\?\@\[\\\]  
\^\_\`\{\|\}\~

\*not emphasized*  
\<br/> not a tag  
\[not a link](/foo)  
\`not code`  
1\. not a list  
\* not a list  
\# not a heading  
\[foo]: /url "not a reference"  
\&ouml; not a character entity

HTML code:

<p>!&quot;#$%&amp;'()*+,<br />
-./:;&lt;=&gt;?@[\]<br />
^_`{|}~</p>
<p>*not emphasized*<br />
&lt;br/&gt; not a tag<br />
[not a link](/foo)<br />
`not code`<br />
1. not a list<br />
* not a list<br />
# not a heading<br />
[foo]: /url &quot;not a reference&quot;<br />
&amp;ouml; not a character entity</p>

Markdown display:

!\"#$\%\&\'()*+\, -.\/\:\;\<\=>\?\@[\] \^_`{|}~

*not emphasized \ not a tag [not a link](/foo) `not code` 1. not a list \ not a list # not a heading [foo]: /url "not a reference" \ö not a character entity

HTML display:

!"#$%&'()*+, -./:;<=>?@[\] ^_`{|}~

*not emphasized* <br/> not a tag [not a link](/foo) `not code` 1. not a list * not a list # not a heading [foo]: /url "not a reference" &ouml; not a character entity

1.12. Raw HTML and HTML Blocks

1.12.1. Raw HTML

Notes:

  • Text between < and > that looks like an HTML tag is parsed as a raw HTML tag and will be rendered in HTML without escaping.

Markdown syntax:

<strong style="color:red;">bold red</strong>
<!-- This is a comment, will not shown -->

HTML code:

<p><strong style="color:red;">bold red</strong></p>
<!-- This is a comment, will not shown -->

Markdown display:

bold red

HTML display:

bold red ### 1.12.2. HTML Blocks *Notes:* - An HTML block is a group of lines that is treated as raw HTML - With start and end conditions are: - start with ``, ``, or `` - start with `` - start with `` - start with `` - start wtih `` - start with string ``, or the string `/>` - A leaf block, it cannot contain other block Markdown syntax: ```md

``` HTML code: ```html

``` Markdown display:

HTML display:

--- ## 1.13. Entities and Character *Note:* - Valid HTML entity references and numeric character references can be used in place of the corresponding Unicode character, except - Entity references consist of `&` + any of the valid HTML5 entity names + `;` - Decimal numeric character references consist of ``&#` + a string of 1–7 arabic digits + `;` - Hexadecimal numeric character references consist of ``&#` + either `X` or `x` + a string of 1-6 hexadecimal digits + `;` Markdown syntax: ```md Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸ Decimal: # Ӓ Ϡ � Hexadecimal: " ആ ಫ ``` HTML code: ```html

Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸

Decimal: # Ӓ Ϡ �

Hexadecimal: " ആ ಫ ``` Markdown display: Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸ Decimal: # Ӓ Ϡ � Hexadecimal: " ആ ಫ HTML display:

Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸

Decimal: # Ӓ Ϡ �

Hexadecimal: " ആ ಫ

1.14. Horizontal Rules (Thematic Break)

Notes:

  • Sequence of three or more -, _, or * characters

  • A leaf block, it cannot contain other block

Markdown syntax:

---
___
****

HTML code:

<hr />
<hr />
<hr />

Markdown display:

HTML display:

Everything is going according to plan in .

Everything is going according to plan in .

This is

This is

This is

This is

This is

This is

This is a

This is a

This is a

This is a

Commonmark
example
example
link
link with title and code
https://example.com/
link
link with title and code
https://example.com/
foo
foo
foo
foo
https://example.com/
https://example.com/