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-it Extension
  • Newline as hardbreak
  • Linkify
  • 2.12. Abbreviations
  • 2.3. Tables
  • 2.4. Footnote
  • 2.4.1. Outline Footnote
  • 2.4.2. Inline Footnote #2
  • 2.4.2 Mark (Highlighting)
  • 2.4.3 Underline
  • 2.5. Task Lists
  • 2.6. Definition Lists
  • 2.7. Emojies
  • 2.7.1 Copy Paste of Emoji
  • 2.7.2 Markdown of Emoji
  • 2.10. Superscript and Subscript
  • 2.10.1 Superscript
  • 2.14. Math (Latex)
  • 2.15 Linkify
  • Image with specific size
  • 2.2. Code Fencing and Highlighting
  • 2.1. Attributes
  • 2.1.1 Heading Attributes
  • My Great Heading
  • My Great Heading
  • 2.1.2 Block Attributes
  • 2.1.2 Inline Attributes
  • Ignoring Text
  • Implicit Header REferences
  • Line Blocks
  • Image Sizing
  • 2.19. Attributes

Was this helpful?

  1. Markdown

Extended Commonmark

Previouscomplete-markdown-cheatsheetNextExtended Markdown Cheatsheet

Last updated 3 years ago

Was this helpful?

Markdown-it Extension

Newline as hardbreak

Linkify

Direct Link is not common mark

fake@example.com

2.12. Abbreviations

Support: PHP Markdown Extra 1.9.0, Markdown-it

Markdown Syntax: The "HTML" specification is maintained by the "W3C". *[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

HTML Syntax: The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

Markdown Display:

The "HTML" specification is maintained by the "W3C". [HTML]: Hyper Text Markup Language [W3C]: World Wide Web Consortium

HTML Display:

The HTML specification is maintained by the W3C.

2.3. Tables

Support: kramdown

Notes:

  • we can set alignment in table with a colon (:)

  • we can add formatting text, links, code and HTML character code, but not: heading, headings, blockquotes, lists, horizontal rules, images, HTML tags, or fenced code

Support: PHP Markdown Extra, GFM, Maruku, MultiMarkdown, kramdown, Parsedown markdown-it (plugin), showdown, marked

Syntaxes

| Syntax      | Description | Test Text is long    |
| :---        |    :----:   |          ---: |
| [Example](https://www.example.com/)      | **Title**       | `Here's this  is` |
| Paragraph   | Text        | And more   |

HTML:

<table>
<thead>
<tr>
  <th align="left">Syntax</th>
  <th align="center">Description</th>
  <th align="right">Test Text is long</th>
</tr>
</thead>
<tbody>
<tr>
  <td align="left"><a href="https://www.example.com/">Example</a></td>
  <td align="center"><strong>Title</strong></td>
  <td align="right"><code>Here's this  is</code></td>
</tr>
<tr>
  <td align="left">Paragraph</td>
  <td align="center">Text</td>
  <td align="right">And more</td>
</tr>
</tbody>
</table>

Showcases

Syntax

Description

Test Text is long

Title

Here's this is

Paragraph

Text

And more

HTML

Syntax

Description

Test Text is long

Title

Here's this is

Paragraph

Text

And more

2.4. Footnote

2.4.1. Outline Footnote

Support: PHP Markdown Extra, Maruku , MultiMarkdown, Markdown-it

Markdown Syntax:

Here's a simple footnote[^1] and here's a longer one[^bignote], and [^withcode]

[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs.
For example like this
[^withcode]: `code` or code in paragrahps
`code and codes`

HTML Syntax:

<p>Here’s a simple footnote<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup> and here’s a longer one<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>, and <sup id="fnref:3"><a href="#fn:3" rel="footnote">3</a></sup></p>
<div class="footnotes"><hr /><ol><li id="fn:1">
<p>This is the first footnote. <a href="#fnref:1" rev="footnote">↩</a></p>
</li><li id="fn:2">
<p>Here’s one with multiple paragraphs. For example like this <a href="#fnref:2" rev="footnote">↩</a></p>
</li><li id="fn:3">
<p><code>code</code> or code in paragrahps <code>code and codes</code> <a href="#fnref:3" rev="footnote">↩</a></p>
</li></ol></div>

Markdown Display:

Here's a simple footnote and here's a longer one, and

For example like this : code or code in paragrahps code and codes

HTML Display:

### 2.4.2. Inline Footnote #1 Support: MultiMarkdown, Markdown Syntax: ```md Another example of footnote 1 link[^first] and footnote 2 link[^second]. ``` HTML Syntax: ```html

``` Markdown Display: Another example of footnote 1 link[^first] and footnote 2 link[^second]. HTML Display:

2.4.2. Inline Footnote #2

Support: Markdown-it

Markdown Syntax:

Or to add inline footnote^[Text of inline footnote] definition.

HTML Syntax:

<p>Or to add inline footnote<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> definition.</p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Text of inline footnote <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>

Markdown Display:

Or to add inline footnote^[Text of inline footnote] definition.

HTML Display:

### 2.4.4. Duplicate Reference Support: PHP Markdown Extra, kramdown , MultiMarkdown, Markdown-it Markdown Syntax: ```md This is a duplicated footnote[^b]. This duplicated footnote reference[^b]. [^b]: Another footnote text. ``` HTML Syntax Kramdown Style: ```html

``` HTML Syntax Markdown-it: ```

``` Markdown Display: This is a duplicated footnote[^b]. This duplicated footnote reference[^b]. [^b]: Another footnote text. HTML Display Style Kramdown:

HTML Display Style Markdown-it:

--- ## 2.4. Strikethrough, Highlighting, Underline ### 2.4.1 Strikethrough Support: marked, RDiscount, Fatdown, Parsedown, GFM, showdown, markdown-it Markdown Syntax ``` ~~strikethrough~~ ``` HTML Syntax: ```html

strikethrough

strikethrough ``` Markdown Display: ~~strikethrough~~ HTML Display: strikethrough

strikethrough

2.4.2 Mark (Highlighting)

Support: markdown-it Markdown Syntax:

==marked text==

HTML Syntax:

<p><mark>marked text</mark></p>

Markdown Display:

==marked text==

HTML Display:

marked text

2.4.3 Underline

Support: - (no markdown)

Markdown Syntax

++underline++

HTML Syntax

<u>underline</u>
<ins>underline</ins>

Markdown Display:

++underline++

HTML Display:

underline underline

2.5. Task Lists

Support: marked, showdown, markdown-it

Markdown Syntax:

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

HTML Display Style 1:

<ul>
<li><input checked="" disabled="" type="checkbox"> Write the press release</li>
<li><input disabled="" type="checkbox"> Update the website</li>
<li><input disabled="" type="checkbox"> Contact the media</li>
</ul>

HTML Display Style 1:

<ul>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> Write the press release</li>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> Update the website</li>
<li class="task-list-item" style="list-style-type: none;"><input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> Contact the media</li>
</ul>

Markdown Display:

HTML Display Style 1

  • Write the press release

  • Update the website

  • Contact the media

HTML Display Style 2

  • Write the press release

  • Update the website

  • Contact the media

2.6. Definition Lists

Support: karmdown, banyak

Markdown Syntax:

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

HTML Syntax:

<dl>
<dt>First Term</dt>
<dd>This is the definition of the first term.</dd>
<dt>Second Term</dt>
<dd>This is one definition of the second term. </dd>
<dd>This is another definition of the second term.</dd>
</dl>

Markdown Display:

First Term : This is the definition of the first term.

Second Term : This is one definition of the second term. : This is another definition of the second term.

HTML Display:

First TermThis is the definition of the first term.Second TermThis is one definition of the second term.This is another definition of the second term.

2.7. Emojies

2.7.1 Copy Paste of Emoji

Markdown Syntax

Gone camping! ⛺ Be back soon.
That is so funny! 😂

HTML Syntax

<p>Gone camping! ⛺ Be back soon.
That is so funny! 😂</p>

Markdown Display

Gone camping! ⛺ Be back soon. That is so funny! 😂

HTML Display

Gone camping! ⛺ Be back soon. That is so funny! 😂

2.7.2 Markdown of Emoji

Support: markdown-it

Markdown Syntax:

Gone camping! :tent: Be back soon.
That is so funny! :joy:
> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

HTML Syntax:

<p>Gone camping! ⛺️ Be back soon.
That is so funny! 😂</p>
<blockquote>
<p>Classic markup: 😉 :crush: 😢 :tear: 😆 😋</p>
<p>Shortcuts (emoticons): 😃 😦 😎 😉</p>
</blockquote>

Markdown Display

Gone camping! :tent: Be back soon. That is so funny! :joy:

Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:

Shortcuts (emoticons): :-) :-( 8-) ;)

HTML Display

Gone camping! ⛺️ Be back soon. That is so funny! 😂

Classic markup: 😉 :crush: 😢 :tear: 😆 😋

Shortcuts (emoticons): 😃 😦 😎 😉

--- ## 2.9. Typographic replacements Support: markdown-it, Fatdown Markdown Syntax ```md (c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test... test..... test?..... test!.... !!!!!! ???? ,, -- --- "Smartypants, double quotes" and 'single quotes' ``` HTML Syntax: ```html

© © ® ® ™ ™ § § ±

test… test… test… test?.. test!..

!!! ??? , – —

“Double quotes” and ‘single quotes’ ``` Markdown Display (c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test... test..... test?..... test!.... !!!!!! ???? ,, -- --- "Smartypants, double quotes" and 'single quotes' HTML Display

© © ® ® ™ ™ § § ±

test… test… test… test?.. test!..

!!! ??? , – —

“Double quotes” and ‘single quotes’

2.10. Superscript and Subscript

2.10.1 Superscript

Support; MultiMarkdown, Fatdown, Markdown-it

Markdown x^2^

HTML:

x2

Example Subscript Markdwon H~2~O

In HTML:

H2O

2.14. Math (Latex)

Support: Maruku (math)

Inline Einstein Equations $E=mc^2$ and Gamma Function $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$

Outline equations

sin⁡(α)θ=∑i=0n(xi+cos⁡(f))\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))sin(α)θ=∑i=0n​(xi+cos(f))

2.15 Linkify

Support: Markdown-t, marked,Parsedown , GFM, Fatdown, showdown

**Markdown;

fake@example.com

HTML:

Image with specific size

Support: Markdown-it, Maruku MultiMarkdown

2.2. Code Fencing and Highlighting

Notes:

  • We can make block code fences without need to be idented

  • lang is optional to specify the language of the code; if not specified, the app won't highlight the code;

  • We need one empty line before

Syntaxes

This is a fenced code block.
```
***Syntaxes***
    This is another fenced code block.
***Showcases***

This is a fenced code block.

~~~
No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a <b>tag</b>.
~~~

### Code Highlighting

~~~
No language indicated, so no syntax highlighting.
s = "There is no highlighting for this."
But let's throw in a <b>tag</b>.
~~~


***Showcases*** (`javascript`)

```javascript
var s = "JavaScript syntax highlighting";
alert(s);

Showcases (python)

def function():
    #indenting works just fine in the fenced code block
    s = "Python syntax highlighting"
    print s

Showcases (ruby)

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

2.1. Attributes

2.1.1 Heading Attributes

Support: Markdown Extra , Maruku, kramdown Pandoc

Markdown:

### My Great Heading {#heading-ids}

Markdown

My Great Heading

In HTML:

My Great Heading

2.1.2 Block Attributes

Support: kramdown, Markdown Extra

> A nice blockquote
{: #with-an-id}
<blockquote id="with-an-id">
  <p>A nice blockquote</p>
</blockquote>

Markdown:

A nice blockquote {: #with-an-id}

HTML:

A nice blockquote

2.1.2 Inline Attributes

This is *red*{: style="color: red"}.
<p>This is <em style="color: red">red</em>.</p>

Ignoring Text

This is a paragraph
{::comment}
This is a comment which is
completely ignored.
{:/comment}
... paragraph continues here.

Extensions can also be used
inline {::nomarkdown}**see**{:/}!
<p>This is a paragraph
<!-- 
This is a comment which is
completely ignored.
 -->
… paragraph continues here.</p>

<p>Extensions can also be used
inline **see**!</p>

Implicit Header REferences

Support : Pandoc

So, to link to a heading

# Heading identifiers in HTML

you can simply write

[Heading identifiers in HTML]

or

[Heading identifiers in HTML][]

Line Blocks

Support: pandocs

| The limerick packs laughs anatomical
| In space that is quite economical.
|    But the good ones I've seen
|    So seldom are clean
| And the clean ones so seldom are comical

Kramdown

Markdown Extra

Pandoc

Definition Lists

✅

✅

✅

Table

✅

✅

Attributes

✅

✅

✅

Footnote

✅

✅

Abbreviation

✅

✅

Code Fencing

✅

✅

Task Lists

✅

Image Dimension

Mention

Strikethrough

Emoji

Image Sizing

  • Specifying size of image is supported only in some extended markdown (such as markdown-it).

Syntaxes

![Image Alt Text](/url/to/image.png "Optional Text")
![Image Alt Text](/url/to/image.png "Image specified with width and height" =800x600)
![Image Alt Text](/url/to/image.png =800x600)
![Image Alt Text](/url/to/image.png "Image specified with width" =800x)
![Image Alt Text](/url/to/image.png "Image specified with height" =x600)

Showcases

2.19. Attributes

Support:

Markdown item bold red{style="color:red"} HTML:

in HTML: item bold red

Here’s a simple footnote and here’s a longer one, and

This is the first footnote.

Here’s one with multiple paragraphs. For example like this

code or code in paragrahps code and codes

Another example of footnote 1 link and footnote 2 link.

first

second

Another example of footnote 1 link and footnote 2 link.

first

second

Or to add inline footnote definition.

Text of inline footnote

This is a duplicated footnote. This duplicated footnote reference.

Another footnote text.

This is a duplicated footnote. This duplicated footnote reference.

Another footnote text.

This is a duplicated footnote. This duplicated footnote reference.

Another footnote text.

This is a duplicated footnote. This duplicated footnote reference.

Another footnote text.

Wikipedia

![Wikipedia]( "Wikipedia logo with specific size" =60x60)

Link to

![Wikipedia]( "Wikipedia logo with specific size" =60x60)

https://example.com/
https://example.com/
https://example.com/
fake@example.com
https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png
1
2
3
↩
↩
↩
1
2
↩
↩
1
2
↩
↩
[1]
↩︎
1
1
↩
↩2
[1]
[1:1]
↩︎
↩︎
1
1
↩
↩2
[1]
[1:1]
↩︎
↩︎
Heading IDs
Example
Example
https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Wikipedia_Logo_1.0.png/240px-Wikipedia_Logo_1.0.png
Wikipedia