Markdown, in a Nutshell: Compose HTML In a Simpler Way

https://wordpress.com/support/markdown-quick-reference/

Useful Markdown Editors:

For Mac: TheArchive → https://zettelkasten.de/the-archive/
For Mac: Macdown → https://macdown.uranusjr.com/
For Mac/Win: Typora → https://typora.io/
For Mac/Win: Obsidian → https://obsidian.md/
For Win: Markdown Pad 2 → http://markdownpad.com/
For instruction → https://scientists4wiredtech.com/markdown/
Original Markdown Syntax
Markdown Extra Syntax: changes and additions to the original syntax.
Compose a post or page in your Markdown editor of choice
Copy as HTML and then paste into WordPress (as HTML text)
Replace image links, as needed, to take full advantage of the WordPress JetPack Photon image acceleration and editing service.

Current Obsidian Plugins:

Graph view: view a graphical representation of all your notes and connections, as well as open a local graph for your individual note.
Page preview: mouse over internal links to preview the content.
Backlinks: show "what links here" and find undiscovered connections.
Daily notes: create today’s note with custom date format and optional use a template.
Tag pane: view all your tags in one place
Starred notes: bookmark important and frequently accessed notes.
File explorer: browse files in your vault and sort them.
Word count: language aware word and character count for your current note.
Search: extremely performant vault-wide search, with advanced operators and regex support.
Markdown format converter: imports your Markdown export from Zettelkasten systems and Roam Research into Obsidian.
Zettelkasten prefixer: generate unique ID for your note.
Templates: lets you quickly insert snippets of text into your current note.
Random note: opens a random note, useful for reviewing and discovering.
Quick switcher: jump to or create note with keyboard only.
Outline: shows the list of headings for the current note, and allows you to navigate to another section by clicking on a heading.
Custom CSS: style Obsidian however you like. Check out the in-app community theme tab after enabling to use one of them!
Command palette: use Obsidian without leaving your keyboard.
Audio recorder: record a voice memo and embed directly in your notes.
Slides: present your Markdown notes as a slideshow by separating slides with ---.
Open in default app: quickly open files with your OS default application, as well as show file in the OS file explorer.
Publish (paid): lets you publish notes from your vault onto your site, all within.

Original Markdown (Selected Features)

Can Use Inline HTML in Markdown
Headers
Blockquotes
Lists
Horizontal Rules
Web Links
Web Links, Alternate
Emphasis
Images

md-Orig: Can Use Inline HTML in Markdown

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Usually, WordPress themes include nice table styling CSS defaults, making the following local table styling unnecessary. There are also some web-based table-generator tools, for your composing pleasure.

For example, this Code . . .

This is a regular paragraph, followed by a blank line and then an HTML table;
note the local styling on the table, below (em is borrowed from the 
print world: em is the width of an em-dash for the specified font.

<center>
<table style="border-collapse: collapse">
<tr>
<th style="border: 1px solid black; padding:0.5em">Foo in table-header cell</th>
<th style="border: 1px solid black; padding:0.5em">Bar in table-header cell</th>
</tr>
<tr>
<td style="border: 1px solid black; padding:1.0em">Baz in table-data cell</td>
<td style="border: 1px solid black; padding:1.0em">Zaz in table-data cell</td>
</tr>
</table>
</center>

Renders As . . .

This is a regular paragraph, followed by a blank line and then an HTML table; note the local styling on the table, below (em is borrowed from the print world: em is the width of an em-dash for the specified font.

Foo in table-header cell	Bar in table-header cell
Baz in table-data cell	Zaz in table-data cell

md-Orig: Headers

Hashtags to denote header style:

For example, this Code . . .

# This is a Header 1

## This is a Header 2

### This is a Header 3

#### This is a Header 4

##### This is a Header 5

Renders As . . .

This is a Header 1

This is a Header 2

This is a Header 3

This is a Header 4

This is a Header 5

– fin –

md-Orig: Blockquotes

Use > to specify level of blockquote nesting:

For example, this Code . . .

> This is the first level of a blockquote.
>
> > This is nested blockquote.
>
> Back to the first level.

Renders As . . .

This is the first level of a blockquote.

This is nested blockquote.

Back to the first level.

– fin –

md-Orig: Lists

This is an unordered list:

For example, this Code . . .

-   Red
-   Green
-   Blue

Renders As . . .

Red
Green
Blue

This is an ordered list: it is easiest to place 1. in front of each point (the computer counts for you and there is no need to renumber a list, if you change the list order).

For example, this Code . . .

1. Tesla
1. Ford
1. Toyota

Renders As . . .

Tesla
Ford
Toyota

One can easily nest lists.

For example, this Code . . .

1. Tesla
    - Lithium Ion Batteries
    - Performant
        - Torque
        - Range
1. Ford
1. Toyota

Renders As . . .

Tesla
- Lithium Ion Batteries
- Performant
  - Torque
  - Range
Ford
Toyota

– fin –

md-Orig: Horizontal Rules

Use html <hr /> or markown dashes: ---

For example, this Code . . .

About to see first horizontal rule
<hr />

About to see second horizontal rule

---

Renders As . . .

About to see first horizontal rule

About to see second horizontal rule

– fin –

md-Orig: External Web Links

A concatenation of square brackets and parentheses:[]()

For example, this Code . . .

- This is [an example](https://google.com/ "Main Google Search Page") of an inline link.
- [This link](https://google.com/) has no title attribute.
- And this is an automatic link: <https://google.com/>

Renders As . . .

This is an example of an inline link.
This link has no title attribute.
And this is an automatic link: https://google.com/
– fin –

md-Orig: External Web Links, Alternate

A concatenation of square brackets and square brackets:[][], like this

For example, this Code . . .

I get more search traffic from [Google][1a] than from [DuckDuckGo][1b] 
or [Bing][1c], but I prefer to use [DuckDuckGo][1b] over 
[Google][1a] or [Bing][1c].

[1a]: https://google.com/     "Google"
[1b]: https://duckduckgo.com/ "DuckDuckGo"
[1c]: https://bing.com/       "Bing"

Renders As . . .

I get more search traffic from Google than from DuckDuckGo or Bing, but I prefer to use DuckDuckGo over Google or Bing.

– fin –

md-Orig: Emphasis

Simple bold and italics.

For example, this Code . . .

The quick **bolded fox** jumped over the lazy *italicized bear*.

Renders As . . .

The quick bolded fox jumped over the lazy italicized bear.

– fin –

md-Orig: Images

Use this: ![Alt text](/path/to/img.jpg "Optional title")

For example, this Code . . .

<center>

![dominos-extra-large](http://scientists4wiredtech.com/wp-content/uploads/2017/10/dominos-extra-large.jpg)

![dominos-small](http://scientists4wiredtech.com/wp-content/uploads/2017/10/dominos-small.jpg "Domino's Small Pizza Box")

</center>

Renders As . . .

dominos-extra-large

dominos-small

– fin –

Markdown Extra (Selected Features)

Markdown Inside HTML Blocks
Tables
Definition Lists
Footnotes
Abbreviations

md-Extra: Markdown Inside HTML Blocks

Markdown Extra gives you a way to put Markdown-formatted text inside any block-level tag. You do this by adding a markdown attribute to the tag with the value 1 — which gives markdown="1" — like this:

For example, this Code . . .


<div markdown="1">

This is *true* markdown text.

</div>

The markdown="1" attribute will be stripped and <div>‘s content will be converted from Markdown to HTML. The end result will look like this:

Renders As . . .

This is true markdown text.

– fin –

md-Extra: Tables

Note: The following table may look plain here, but your WordPress Theme’s table CSS defaults will probably style the table better.

For example, this Code . . .


<center>
| First Header  | Second Header | Third Header  | Fourth Header |
| --- | --- | --- | --- |
| Content Cell  | Content Cell  | Content Cell  | Content Cell  |
| Content Cell  | Content Cell  | Content Cell  | Content Cell  |
</center>

Renders As . . .

First Header	Second Header	Third Header	Fourth Header
Content Cell	Content Cell	Content Cell	Content Cell
Content Cell	Content Cell	Content Cell	Content Cell

You can specify alignment for each column by adding colons to separator lines. A colon at the left of the separator line will make the column left-aligned; a colon on the right of the line will make the column right-aligned; colons at both side means the column is center-aligned. Also, the leading and trailing pipes are optional.

For example, this Code . . .

<center>

 Item-Left | Value-Right| Description-Centered 
 :---      | ---:       |:---:
 Computer  | $1600      | Full Desktop Tower   
 Phone     | $125       | Corded
 Switch    | $30        | Gigabit

</center>

Renders As . . .

Item-Left	Value-Right	Description-Centered
Computer	$1600	Full Desktop Tower
Phone	$125	Corded
Switch	$30	Gigabit

– fin –

md-Extra: Definition Lists

For example, this Code . . .

**Apple**
: Pomaceous fruit of plants of the genus Malus in 
the family Rosaceae.

**Orange**
: The fruit of an evergreen tree of the genus Citrus.

Renders As . . .

Apple: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.
Orange: The fruit of an evergreen tree of the genus Citrus.

– fin –

md-Extra: Footnotes

A footnote is made of two things: a marker in the text that will become a superscript number; a footnote definition that will be placed in a list of footnotes at the end of the document.

Each footnote must have a distinct name. That name will be used to link footnote references to footnote definitions, but has no effect on the numbering of the footnotes. Names can contain any character valid within an id attribute in HTML. The footnotes will appear at the end of the rendered html.

For example, this Code . . .

Each word has its[^a1] own[^a2] footnote[^a3].

Once again, footnotes[^b1] for[^b2] all[^b3].

[^a1]: This is the 1st footnote.
[^a2]: This is the 2nd footnote.
[^a3]: This is the 3rd footnote.
[^b1]: This is the 4th footnote.
[^b2]: This is the 5th footnote.
[^b3]: This is the 6th footnote.

Renders As . . .

Each word has its¹ own² footnote³.

Once again, footnotes⁴ for⁵ all⁶.

The footnotes will appear at the end of the rendered html.

– fin –

md-Extra: Abbreviations

Markdown Extra adds supports for abbreviations (HTML tag <abbr>). How it works is pretty simple: create an abbreviation definition like this:

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

then, elsewhere in the document, write text such as:

The HTML specification is maintained by the W3C.
and any instance of those words in the text will become:

The <abbr title="Hyper Text Markup Language">HTML</abbr> specification
is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
<center>*&ndash; fin &ndash;*</center>

– fin –

This is the 1st footnote. ↩
This is the 2nd footnote. ↩
This is the 3rd footnote. ↩
This is the 4th footnote. ↩
This is the 5th footnote. ↩
This is the 6th footnote. ↩