Markdown Syntax

Markdown is a form of short-hand used for generating web content.

Markdown comes in many flavors: tex, textile, Latex, texy, Markdown, Markdown Extra and dozens of others—all slightly different but with one puropose; to enable web content editing using only a simple text editor without relying on the heavy load of a WYSIWYG editor.

Markdown allows authors the freedom to concentrate on content rather than editor software and because of it's simplicity, Markdown is an excellent choice of editor for a mobile device.

Paragraphs

Paragraph text automatically re-flows adapting to page size. Newlines [Enter] are ignored (treated as spaces) unless preceded by 2 spaces where an HTML line break <br> will be inserted. Two newlines in a row cause a paragraph break showing a blank line under the paragraph.

Paragraph text[Enter]
with line breaks continues the same paragraph (For readability only, not reflected in resulting HTML.)

Blank line indicated end of paragraph.  [Enter]
Adding 2 spaces before the new line inserts a line break.
<p>Paragraph text with line breaks continues the same paragraph (For readability only, not reflected in resulting HTML.)</p>

<p>Blank line indicated end of paragraph.<br />
Adding 2 spaces before the new line inserts a line break.</p>

Paragraph text with line breaks continues the same paragraph (For readability only, not reflected in resulting HTML.)

Blank line indicated end of paragraph.
Adding 2 spaces before the new line inserts a line break.

Font Styles

Wrap text in * or _ to produce bold or italic.
*text* or _text_ for italic text
**text** or __text__ for bold text
***text*** or ___text___ for bold italic

These can be nested "*as in a quoted phrase with **bold text** within.*"
These can be nested "as in a quoted phrase with bold text within."

Quick Corrects

  • en dash - use to separate a range of values (10--20 => 10–20)
  • em-dash - substitute for commas or quotes to add emphasis (Waiting for---Drupal 8---to be released. => Waiting for—Drupal 8—to be released.)
  • quotes - ""Lorem Ipsum"":google.com => Lorem Ipsum
    <q cite="google.com">Lorem Ipsum</q>
  • ((TM), (R), (C)) (™, ®, ©)
  • ... to ellipsis …
  • ~~Deleted Text~~ Deleted Text
  • Horizontal rules ----

Quotes

Inline Quotes

""Lorem Ipsum"":google.com Lorem Ipsum

Block Quotes

> I can't see anyone ever needing more than a megabyte of memory.  
> > Success is like wrestling a gorilla. You don't quit when you are tired -- you quit when the gorilla is tired. 
<blockquote>
  <p>I can't see anyone ever needing more than a megabyte of memory.</p>
  <blockquote>
    <p>Success is like wrestling a gorilla. You don't quit when you are tired – you quit when the gorilla is tired.</p>
  </blockquote>
</blockquote>

I can't see anyone ever needing more than a megabyte of memory.

Success is like wrestling a gorilla. You don't quit when you are tired – you quit when the gorilla is tired.

Attribute Blocks

Attribute blocks {.style1 .style2 #id} can be added to

Headers

Attribute blocks are optional

# Header 1
## Header 2
### Header 3    {#header3 .samples}
#### Header 4   {#myid .myclass .myclass2}
##### Header 5
###### Header 6
  :
[Link back to Header 3](#header3)
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3 id="header3" class="samples">Header 3</h3>
<h4 id="header4" class="myclass myclass2">Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
 :
<a href="header3">Link back to Header 3</a>

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

   :
Link back to Header 3

Code Blocks

Code Blocks are snippets of text intended to represent a computer language, not for processing but for displaying as text. Code blocks are typically used to illustrate computer instructions (programs) or command input/output. Markdown does not interpret the contents of code blocks other than converting characters that may be interpreted as instructions into display safe characters (<⇒&lt;  >⇒&gt;  &⇒&amp;.) Code blocks come in two flavors light (intended to represent source code), and dark (intended to represent console I/O). Each type is available inline, or as a block.

Inline Code Blocks

Mix sample `<b>Code</b>` or <kbd>$ commands</kbd> with paragraph text.  
Mix sample `&lt;b&gt;code&lt;/b&gt;` or <kbd>$ commands</kbd> with paragraph text.  

Mix sample <b>Code</b> or $ commands with paragraph text.

Blocking Code Blocks

By default, code blocks are of the light flavor meant to represent source code. To get a dark code block similar to the <kbd> inline tag, add a .kbd attribute after the opening block indicator. A space before and braces around the attribute is optional.

Indented Code Blocks

Any block of code indented by four (4) or more spaces is automatically converted to a code block. This allows placing anything (including the blocking indicators themselves) in the code block. This was crucial for writing this documentation to demonstrate fenced code blocks—without it, I couldn't easily demonstrate the code without it creating a block. For any other purpose, the fenced code blocks (below) are easier to work with.

    MARKDOWN_CODE_ATTR_ON_PRE=true
<pre>
  <code>MARKDOWN_CODE_ATTR_ON_PRE=true</code>
</pre>
MARKDOWN_CODE_ATTR_ON_PRE=true

Fenced Code Blocks

Fences refer to a matched pair of four or more tildes ~~~~ at the left margin above and below code samples to indicate code blocks. Any number greater than 4 can be used but the top and bottom markers must match to allow nesting.

~~~~ {.kbd}
MARKDOWN_CODE_ATTR_ON_PRE=true
~~~~
<pre class="kbd">
  <code>MARKDOWN_CODE_ATTR_ON_PRE=true</code>
</pre>
MARKDOWN_CODE_ATTR_ON_PRE=true

URLs and email addresses are not automatically converted to links. To create a 'Quick Link', wrap the address in angle brackets.

Either search <http://google.com> or email <answers@google.com> for the answer.
Either search <a href="http://google.com">http://google.com</a> or email <a href="mailto:answers@google.com">answers@google.com</a> for the answer.

Either search http://google.com or email answers@google.com for the answer.

To provide a little more style and control, we use
Check out [Link Text](http://example.com "Optional title text"){#myid .myclass}.

Check out <a href="http://example.com" title="Optional title text" id="myid" class="myclass">Link Text</a>

Check out Link Text

To make it easier to read, you may place link references anywhere in the text and use the references instead.

<!-- References -->
[google]:http://google.com "Search Google"
[bing]:http://bing.com "Search Microsoft"

- [Visit Google][google]
- [Bing Search][bing]

- Visit Google - Bing Search

Images

Inline Images

The general format for inline images is
![Alt Text](/imgs/favicon_28.png "Optional title text"){#myid .myclass}.

Inline style: ![Adaptive](/imgs/favicon_28.png "Adaptive favicon image"){#favicon .icon28}
Inline style: <img src="/imgs/favicon_28.png" alt="Adaptive" title="Adaptive favicon image" id="favicon" class="icon28" width="28" height="28" />

Inline style: Adaptive

Reference Images

Reference style: ![Design4Effect Logo][logo]
[logo]: /imgs/favicon_28.png "Our logo" {#favicon .icon28}
Reference style: <img src="/imgs/favicon_28.png" alt="Design4Effect Logo" title="Our logo" id="favicon" class="icon28" width="28" height="28" />

Reference style: Design4Effect Logo

Block Elements

Block-level HTML element (e.g. <div>, <table>, <pre>, <p>..) opening tags must not be indented by more than 3 spaces (4 spaces starts code block).

When the block element is found inside a list, all its content should be indented with the same amount of space as the list item is indented. (More indentation won’t do any harm as long as the first opening tag is not indented too much and then become a code block.

For including Markdown within block level elements, add a markdown="1" attribute to the block tag. Markdown won't normally produce block level elements within inline tags but this can be overridden by using a markdown="block" attribute instead.

<div markdown="1">
  This is *emphasized* markdown.
</div>

This is emphasized markdown.

References

[Visit Google][google]
[SIR Printing][]
![Drush logo][favicon]
A footnote[^fn1]
YMCA

<!-- References -->
[google]:http://google.com "Search Google" {#idname .classname}
[SIR Printing]:http://sirprinting.ca "Lonsdale Printers"  {#idname .classname}
[favicon]: /imgs/favicon_28.png "cross-platform web development"  {#idname .classname}
[fn1]:the footnote
*[YMCA]:Young Men's Christian Association
<a href="http://google.com" title="Search Google" id="idname" class="classname">Visit Google</a>
<a href="http://sirprinting.ca" title="Lonsdale Printers" id="idname" class="classname">SIR Printing</a>
<img src="/imgs/favicon_28.png" alt="Drush logo" title="cross-platform web development" id="idname" class="classname" width="28" height="28" />

Definition Lists

Terms must be separated from the previous definition by a blank line. Multiple terms and/or multiple definitions are handled as shown here.

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

Orange
Lemon
: The fruit of an evergreen tree of the genus Citrus.
<dl>
  <dt>Apple</dt>
  <dd>Pomaceous fruit of plants of the genus Malus in the famiily Rosaceae.</dd>
  <dd>Record Company</dd>
  <dt>Orange</dt>
  <dt>Lemon</dt>
  <dd>The fruit of an evergreen tree of the genus Citrus.</dd>
</dl>
Apple
Pomaceous fruit of plants of the genus Malus in the famiily Rosaceae.
Record Company
Orange
Lemon
The fruit of an evergreen tree of the genus Citrus.

Tables

Although tables weren't integrated into the original Markdown, Markdown Extra handles it. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
<table>
  <thead>
    <tr>
      <th>Tables</th>
      <th>Are</th>
      <th>Cool</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col 3 is</td>
      <td align="center">right-aligned</td>
      <td align="right">$1600</td>
    </tr>
    <tr>
      <td>col 2 is</td>
      <td align="center">centered</td>
      <td align="right">$12</td>
    </tr>
    <tr>
      <td>zebra stripes</td>
      <td align="center">are neat</td>
      <td align="right">$1</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Markdown</th>
      <th>Less</th>
      <th>Pretty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><em>Still</em></td>
      <td><code>renders</code></td>
      <td><STRONG>NICELY</STRONG></td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>
Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
Markdown Less Pretty
Still renders nicely
1 2 3

  1. the footnote 

  2. And that's the footnote. 

Tags: