blob: ec768a0a3f49ecfa4a0fc4000bfa4b53bbcfe1a7 [file] [log] [blame]
<!-- generated by featurizer -->
<p>Taken from <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet</a></p>
<hr/>
<p>This is intended as a quick reference and showcase. For more complete info, see <a href="http://daringfireball.net/projects/markdown/">John Gruber&rsquo;s original spec</a> and the <a href="http://github.github.com/github-flavored-markdown/">Github-flavored Markdown info page</a>.</p>
<p>Note that there is also a <a href="./Markdown-Here-Cheatsheet">Cheatsheet specific to Markdown Here</a> if that&rsquo;s what you&rsquo;re looking for. You can also check out <a href="./Other-Markdown-Tools">more Markdown tools</a>.</p>
<h5><a href="#table-of-contents" name="table-of-contents"></a>Table of Contents</h5>
<p><a href="#headers">Headers</a><br/><a href="#emphasis">Emphasis</a><br/><a href="#lists">Lists</a><br/><a href="#links">Links</a><br/><a href="#images">Images</a><br/><a href="#code">Code and Syntax Highlighting</a><br/><a href="#tables">Tables</a><br/><a href="#blockquotes">Blockquotes</a><br/><a href="#html">Inline HTML</a><br/><a href="#hr">Horizontal Rule</a><br/><a href="#lines">Line Breaks</a><br/><a href="#videos">Youtube videos</a> </p>
<a name="headers"/>
<h2><a href="#headers" name="headers"></a>Headers</h2>
<pre><code class="no-highlight"># H1
## H2
### H3
#### H4
##### H5
###### H6
Alternatively, for H1 and H2, an underline-ish style:
Alt-H1
======
Alt-H2
------
</code></pre>
<h1><a href="#h1" name="h1"></a>H1</h1>
<h2><a href="#h2" name="h2"></a>H2</h2>
<h3><a href="#h3" name="h3"></a>H3</h3>
<h4><a href="#h4" name="h4"></a>H4</h4>
<h5><a href="#h5" name="h5"></a>H5</h5>
<h6><a href="#h6" name="h6"></a>H6</h6>
<p>Alternatively, for H1 and H2, an underline-ish style:</p>
<h1><a href="#alt-h1" name="alt-h1"></a>Alt-H1</h1>
<h2><a href="#alt-h2" name="alt-h2"></a>Alt-H2</h2>
<a name="emphasis"/>
<h2><a href="#emphasis" name="emphasis"></a>Emphasis</h2>
<pre><code class="no-highlight">Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
</code></pre>
<p>Emphasis, aka italics, with <em>asterisks</em> or <em>underscores</em>.</p>
<p>Strong emphasis, aka bold, with <strong>asterisks</strong> or <strong>underscores</strong>.</p>
<p>Combined emphasis with <strong>asterisks and <em>underscores</em></strong>.</p>
<p>Strikethrough uses two tildes. <del>Scratch this.</del></p>
<a name="lists"/>
<h2><a href="#lists" name="lists"></a>Lists</h2>
<p>(In this example, leading and trailing spaces are shown with with dots: ⋅)</p>
<pre><code class="no-highlight">1. First ordered list item
2. Another item
* Unordered sub-list.
1. Actual numbers don&#39;t matter, just that it&#39;s a number
1. Ordered sub-list
4. And another item.
You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we&#39;ll use three here to also align the raw Markdown).
To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
Note that this line is separate, but within the same paragraph.⋅⋅
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
* Unordered list can use asterisks
- Or minuses
+ Or pluses
</code></pre>
<ol>
<li>First ordered list item</li>
<li>Another item</li>
</ol>
<ul>
<li>Unordered sub-list.</li>
</ul>
<ol>
<li>Actual numbers don&rsquo;t matter, just that it&rsquo;s a number</li>
<li>Ordered sub-list</li>
<li>And another item.</li>
</ol>
<p>You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we&rsquo;ll use three here to also align the raw Markdown).</p>
<p>To have a line break without a paragraph, you will need to use two trailing spaces.<br/> Note that this line is separate, but within the same paragraph.<br/> (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)</p>
<ul>
<li>Unordered list can use asterisks</li>
<li>Or minuses</li>
<li>Or pluses</li>
</ul>
<a name="links"/>
<h2><a href="#links" name="links"></a>Links</h2>
<p>There are two ways to create links.</p>
<pre><code class="no-highlight">[I&#39;m an inline-style link](https://www.google.com)
[I&#39;m an inline-style link with title](https://www.google.com &quot;Google&#39;s Homepage&quot;)
[I&#39;m a reference-style link][Arbitrary case-insensitive reference text]
[I&#39;m a relative reference to a repository file](../blob/master/LICENSE)
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself]
Some text to show that the reference links can follow later.
[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com
</code></pre>
<p><a href="https://www.google.com">I&rsquo;m an inline-style link</a></p>
<p><a href="https://www.google.com" title="Google&#39;s Homepage">I&rsquo;m an inline-style link with title</a></p>
<p><a href="https://www.mozilla.org">I&rsquo;m a reference-style link</a></p>
<p><a href="../blob/master/LICENSE">I&rsquo;m a relative reference to a repository file</a></p>
<p><a href="http://slashdot.org">You can use numbers for reference-style link definitions</a></p>
<p>Or leave it empty and use the <a href="http://www.reddit.com">link text itself</a></p>
<p>Some text to show that the reference links can follow later.</p>
<a name="images"/>
<h2><a href="#images" name="images"></a>Images</h2>
<pre><code class="no-highlight">Here&#39;s our logo (hover to see the title text):
Inline-style:
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png &quot;Logo Title Text 1&quot;)
Reference-style:
![alt text][logo]
[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png &quot;Logo Title Text 2&quot;
</code></pre>
<p>Here&rsquo;s our logo (hover to see the title text):</p>
<p>Inline-style:<br/><img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="alt text" title="Logo Title Text 1" /></p>
<p>Reference-style:<br/><img src="https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png" alt="alt text" title="Logo Title Text 2" /></p>
<a name="code"/>
<h2><a href="#code-and-syntax-highlighting" name="code-and-syntax-highlighting"></a>Code and Syntax Highlighting</h2>
<p>Code blocks are part of the Markdown spec, but syntax highlighting isn&rsquo;t. However, many renderers &ndash; like Github&rsquo;s and <em>Markdown Here</em> &ndash; support syntax highlighting. Which languages are supported and how those language names should be written will vary from renderer to renderer. <em>Markdown Here</em> supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the <a href="http://softwaremaniacs.org/media/soft/highlight/test.html">highlight.js demo page</a>.</p>
<pre><code class="no-highlight">Inline `code` has `back-ticks around` it.
</code></pre>
<p>Inline <code>code</code> has <code>back-ticks around</code> it.</p>
<p>Blocks of code are either fenced by lines with three back-ticks <code>```</code>, or are indented with four spaces. I recommend only using the fenced code blocks &ndash; they&rsquo;re easier and only they support syntax highlighting.</p>
<pre lang="no-highlight"><code>```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
```python
s = "Python syntax highlighting"
print s
```
```
No language indicated, so no syntax highlighting.
But let's throw in a &lt;b&gt;tag&lt;/b&gt;.
```
</code></pre>
<pre><code class="javascript">var s = &quot;JavaScript syntax highlighting&quot;;
alert(s);
</code></pre>
<pre><code class="python">s = &quot;Python syntax highlighting&quot;
print s
</code></pre>
<pre><code>No language indicated, so no syntax highlighting in Markdown Here (varies on Github).
But let&#39;s throw in a &lt;b&gt;tag&lt;/b&gt;.
</code></pre>
<a name="tables"/>
<h2><a href="#tables" name="tables"></a>Tables</h2>
<p>Tables aren&rsquo;t part of the core Markdown spec, but they are part of GFM and <em>Markdown Here</em> supports them. They are an easy way of adding tables to your email &ndash; a task that would otherwise require copy-pasting from another application.</p>
<pre><code class="no-highlight">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 |
The outer pipes (|) are optional, and you don&#39;t need to make the raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
</code></pre>
<p>Colons can be used to align columns.</p>
<table>
<thead>
<tr>
<th>Tables </th>
<th align="center">Are </th>
<th align="right">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>
<p>The outer pipes (|) are optional, and you don&rsquo;t need to make the raw Markdown line up prettily. You can also use inline Markdown.</p>
<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>
<a name="blockquotes"/>
<h2><a href="#blockquotes" name="blockquotes"></a>Blockquotes</h2>
<pre><code class="no-highlight">&gt; Blockquotes are very handy in email to emulate reply text.
&gt; This line is part of the same quote.
Quote break.
&gt; This is a very long line that will still be quoted properly when it wraps. Oh boy let&#39;s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
</code></pre>
<blockquote>
<p>Blockquotes are very handy in email to emulate reply text.<br/>This line is part of the same quote.</p>
</blockquote>
<p>Quote break.</p>
<blockquote>
<p>This is a very long line that will still be quoted properly when it wraps. Oh boy let&rsquo;s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote. </p>
</blockquote>
<a name="html"/>
<h2><a href="#inline-html" name="inline-html"></a>Inline HTML</h2>
<p>You can also use raw HTML in your Markdown, and it&rsquo;ll mostly work pretty well. </p>
<pre><code class="no-highlight">&lt;dl&gt;
&lt;dt&gt;Definition list&lt;/dt&gt;
&lt;dd&gt;Is something people use sometimes.&lt;/dd&gt;
&lt;dt&gt;Markdown in HTML&lt;/dt&gt;
&lt;dd&gt;Does *not* work **very** well. Use HTML &lt;em&gt;tags&lt;/em&gt;.&lt;/dd&gt;
&lt;/dl&gt;
</code></pre>
<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
<a name="hr"/>
<h2><a href="#horizontal-rule" name="horizontal-rule"></a>Horizontal Rule</h2>
<pre><code>Three or more...
---
Hyphens
***
Asterisks
___
Underscores
</code></pre>
<p>Three or more&hellip;</p>
<hr/>
<p>Hyphens</p>
<hr/>
<p>Asterisks</p>
<hr/>
<p>Underscores</p>
<a name="lines"/>
<h2><a href="#line-breaks" name="line-breaks"></a>Line Breaks</h2>
<p>My basic recommendation for learning how line breaks work is to experiment and discover &ndash; hit &lt;Enter&gt; once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You&rsquo;ll soon learn to get what you want. &ldquo;Markdown Toggle&rdquo; is your friend. </p>
<p>Here are some things to try out:</p>
<pre><code>Here&#39;s a line for us to start with.
This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it&#39;s a separate line in the *same paragraph*.
</code></pre>
<p>Here&rsquo;s a line for us to start with.</p>
<p>This line is separated from the one above by two newlines, so it will be a <em>separate paragraph</em>.</p>
<p>This line is also begins a separate paragraph, but&hellip;<br/>This line is only separated by a single newline, so it&rsquo;s a separate line in the <em>same paragraph</em>.</p>
<p>(Technical note: <em>Markdown Here</em> uses GFM line breaks, so there&rsquo;s no need to use MD&rsquo;s two-space line breaks.)</p>
<a name="videos"/>
<h2><a href="#youtube-videos" name="youtube-videos"></a>Youtube videos</h2>
<p>They can&rsquo;t be added directly but you can add an image with a link to the video like this:</p>
<pre><code class="no-highlight">&lt;a href=&quot;http://www.youtube.com/watch?feature=player_embedded&amp;v=YOUTUBE_VIDEO_ID_HERE
&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg&quot;
alt=&quot;IMAGE ALT TEXT HERE&quot; width=&quot;240&quot; height=&quot;180&quot; border=&quot;10&quot; /&gt;&lt;/a&gt;
</code></pre>
<p>Or, in pure Markdown, but losing the image sizing and border:</p>
<pre><code class="no-highlight">[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
</code></pre>
<p>Referencing a bug by #bugID in your git commit links it to the slip. For example #1. </p>