Markdown Primer

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

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 . . .
  1. Tesla
  2. Ford
  3. Toyota

One can easily nest lists.

For example, this Code . . .
1. Tesla
    - Lithium Ion Batteries
    - Performant
        - Torque
        - Range
1. Ford
1. Toyota
Renders As . . .
  1. Tesla

    • Lithium Ion Batteries
    • Performant

      • Torque
      • Range
  2. Ford
  3. 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 . . .

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 its1 own2 footnote3.

Once again, footnotes4 for5 all6.

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 –


  1. This is the 1st footnote. 

  2. This is the 2nd footnote. 

  3. This is the 3rd footnote. 

  4. This is the 4th footnote. 

  5. This is the 5th footnote. 

  6. This is the 6th footnote.