733 lines
17 KiB
HTML
733 lines
17 KiB
HTML
{{ define "title" }}Markdown Cheatsheet{{ end }}
|
|
{{ define "content" }}
|
|
<div class="block">
|
|
<section class="hero is-light is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
<i class="fa-brands fa-markdown mr-2"></i>
|
|
Markdown Cheatsheet
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="block p-4 content">
|
|
|
|
<p>
|
|
<strong>Markdown</strong> syntax can enable you to be more expressive with your text posts on this
|
|
website, with the ability to write <strong>**bold**</strong> text, add <a href="#">hyperlinks</a> or
|
|
embed images onto your profile page, Direct Messages, forum posts and elsewhere - any place on
|
|
{{PrettyTitle}} that says "Markdown formatting supported."
|
|
</p>
|
|
|
|
<p>
|
|
This is a simple reference sheet for Markdown syntax. Markdown was pioneered by John Gruber and the
|
|
de facto place to find in-depth documentation is at
|
|
<a href="https://daringfireball.net/projects/markdown/syntax">https://daringfireball.net/projects/markdown/syntax</a>
|
|
where it was originally described.
|
|
</p>
|
|
|
|
<p>
|
|
Markdown is now a widely supported format across a variety of apps and websites, and there are a
|
|
few different "flavors" of Markdown with slightly varied behaviors. This website uses
|
|
<a href="https://github.github.com/gfm/">GitHub Flavored Markdown</a>, an extension of Markdown
|
|
that supports fenced code blocks, tables, and other useful features - many of which you can learn
|
|
about on this page.
|
|
</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="#block">Block Elements</a>
|
|
<ul>
|
|
<li><a href="#pbr">Paragraphs and Line Breaks</a></li>
|
|
<li><a href="#h1">Headers</a></li>
|
|
<li><a href="#bq">Blockquotes</a></li>
|
|
<li><a href="#ul">Lists</a></li>
|
|
<li><a href="#pre">Code Blocks</a></li>
|
|
<li><a href="#hr">Horizontal Rules</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#span">Span Elements</a>
|
|
<ul>
|
|
<li><a href="#a">Links</a></li>
|
|
<li><a href="#em">Emphasis</a></li>
|
|
<li><a href="#code">Code</a></li>
|
|
<li><a href="#img">Images</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#misc">Miscellaneous</a>
|
|
<ul>
|
|
<li><a href="#autolink">Automatic Links</a></li>
|
|
<li><a href="#escape">Backslash Escapes</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h1 id="block">Block Elements</h1>
|
|
|
|
<a name="pbr"></a>
|
|
<h2>Paragraphs and Line Breaks</h2>
|
|
|
|
<p>A paragraph is defined as a group of lines of text separated from other groups
|
|
by at least one blank line. A hard return inside a paragraph doesn't get rendered
|
|
in the output.</p>
|
|
|
|
<h2 id="h1">Headers</h2>
|
|
|
|
<p>There are two methods to declare a header in Markdown: "underline" it by
|
|
writing <code>===</code> or <code>---</code> on the line directly below the
|
|
heading (for <code><h1></code> and <code><h2></code>, respectively),
|
|
or by prefixing the heading with <code>#</code> symbols. Usually the latter
|
|
option is the easiest, and you can get more levels of headers this way.</p>
|
|
|
|
<table width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<pre>This is an H1
|
|
=============
|
|
|
|
This is an H2
|
|
-------------</pre>
|
|
</td>
|
|
<td>
|
|
<h1>This is an H1</h1>
|
|
<h2>This is an H2</h2>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<pre># This is an H1
|
|
## This is an H2
|
|
#### This is an H4</pre>
|
|
</td>
|
|
<td>
|
|
<h1>This is an H1</h1>
|
|
<h2>This is an H2</h2>
|
|
<h4>This is an H4</h4>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 id="bq">Blockquotes</h3>
|
|
|
|
<p>Prefix a line of text with <code>></code> to "quote" it -- like in
|
|
"e-mail syntax."</p>
|
|
|
|
<p>You may have multiple layers of quotes by using multiple <code>></code>
|
|
symbols.</p>
|
|
|
|
<table width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<pre>> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
|
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
|
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
|
|
>
|
|
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
|
> id sem consectetuer libero luctus adipiscing.
|
|
</pre>
|
|
</td>
|
|
<td>
|
|
<blockquote>
|
|
<p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
|
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
|
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</p>
|
|
|
|
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
|
id sem consectetuer libero luctus adipiscing.</p>
|
|
</blockquote>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,<br>
|
|
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.<br>
|
|
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.<br><br>
|
|
|
|
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse<br>
|
|
id sem consectetuer libero luctus adipiscing.
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<blockquote>
|
|
<p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
|
|
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
|
|
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.<p>
|
|
|
|
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
|
|
id sem consectetuer libero luctus adipiscing.</p>
|
|
</blockquote>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
> This is the first level of quoting.<br>
|
|
><br>
|
|
>> This is nested blockquote.<br>
|
|
>>> A third level.<br>
|
|
><br>
|
|
> Back to the first level.
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<blockquote>
|
|
This is the first level of quoting.
|
|
<blockquote>
|
|
This is nested blockquote.
|
|
<blockquote>
|
|
A third level.
|
|
</blockquote>
|
|
</blockquote>
|
|
Back to the first level.
|
|
</blockquote>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
> ## This is a header.<br>
|
|
><br>
|
|
> 1. This is the first list item.<br>
|
|
> 2. This is the second list item.<br>
|
|
><br>
|
|
>Here's some example code:<br>
|
|
><br>
|
|
> return shell_exec("echo $input | $markdown_script");
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<blockquote>
|
|
<h2>This is a header.</h2>
|
|
<ol>
|
|
<li>This is the first list item.</li>
|
|
<li>This is the second list item.</li>
|
|
</ol>
|
|
Here's some example code:
|
|
<pre>return shell_exec("echo $input | $markdown_script");</pre>
|
|
</blockquote>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="ul"></a>
|
|
<h2>Lists</h2>
|
|
|
|
<table width="100%" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
* Red<br>
|
|
* Green<br>
|
|
* Blue
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li>Red</li>
|
|
<li>Green</li>
|
|
<li>Blue</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
+ Red<br>
|
|
+ Green<br>
|
|
+ Blue
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li>Red</li>
|
|
<li>Green</li>
|
|
<li>Blue</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
- Red<br>
|
|
- Green<br>
|
|
- Blue
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<ul>
|
|
<li>Red</li>
|
|
<li>Green</li>
|
|
<li>Blue</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
1. Bird<br>
|
|
2. McHale<br>
|
|
3. Parish
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<ol>
|
|
<li>Bird</li>
|
|
<li>McHale</li>
|
|
<li>Parish</li>
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
1. This is a list item with two paragraphs. Lorem ipsum dolor<br>
|
|
sit amet, consectetuer adipiscing elit. Aliquam hendrerit<br>
|
|
mi posuere lectus.<p>
|
|
|
|
Vestibulum enim wisi, viverra nec, fringilla in, laoreet<br>
|
|
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum<br>
|
|
sit amet velit.<p>
|
|
|
|
2. Suspendisse id sem consectetuer libero luctus adipiscing.
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<ol>
|
|
<li>This is a list item with two paragraphs. Lorem ipsum dolor
|
|
sit amet, consectetuer adipiscing elit. Aliquam hendrerit
|
|
mi posuere lectus.<p>
|
|
|
|
Vestibulum enim wisi, viverra nec, fringilla in, laoreet
|
|
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
|
|
sit amet velit.</li>
|
|
|
|
<li>Suspendisse id sem consectetuer libero luctus adipiscing.</li>
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="pre"></a>
|
|
<h2>Code Blocks</h2>
|
|
|
|
The typical Markdown way to write a code block is to indent each line of a paragraph with at
|
|
least 4 spaces or 1 tab character. The Rophako CMS also uses GitHub-style code blocks, where
|
|
you can use three backticks before and after the code block and then you don't need to indent
|
|
each line of the code (makes copying/pasting easier!)<p>
|
|
|
|
Like GitHub-flavored Markdown, with a fenced code block you can also specify a programming
|
|
language to get syntax highlighting for the code.<p>
|
|
|
|
<table width="100%" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
This is a normal paragraph.<p>
|
|
|
|
This is a code block.
|
|
</code>
|
|
</td>
|
|
<td>
|
|
This is a normal paragraph.<p>
|
|
|
|
<pre>This is a code block</pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
This is a normal paragraph.<p>
|
|
|
|
```<br>
|
|
This is a GitHub style "fenced code block".<br>
|
|
```
|
|
</code>
|
|
</td>
|
|
<td>
|
|
This is a normal paragraph.<p>
|
|
|
|
<pre>This is a GitHub style "fenced code block".</pre>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
```javascript<br>
|
|
document.writeln("Hello world.");<br>
|
|
```
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<div class="codehilite"><pre><span class="nb">document</span><span class="p">.</span><span class="nx">writeln</span><span class="p">(</span><span class="s2">"Hello world."</span><span class="p">);</span></pre></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="hr"></a>
|
|
<h2>Horizontal Rules</h2>
|
|
|
|
<table width="100%" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
* * *<p>
|
|
***<p>
|
|
*****<p>
|
|
- - -<p>
|
|
---------------------------
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<hr><p>
|
|
<hr><p>
|
|
<hr><p>
|
|
<hr><p>
|
|
<hr>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<a name="span"></a>
|
|
<h1>Span Elements</h1>
|
|
|
|
<a name="a"></a>
|
|
<h2>Links</h2>
|
|
|
|
<table width="100%" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
This is [an example](http://example.com/ "Title") inline link.<p>
|
|
[This link](http://example.net/) has no title attribute.
|
|
</code>
|
|
</td>
|
|
<td>
|
|
This is <a href="http://example.com/" title="Title">an example</a> inline link.<p>
|
|
<a href="http://example.net/">This link</a> has no title attribute.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
See my [About](/about) page for details.
|
|
</code>
|
|
</td>
|
|
<td>
|
|
See my <a href="/about">About</a> page for details.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
This is [an example][id] reference-style link.<p>
|
|
[id]: http://example.com/ "Optional Title Here"
|
|
</code>
|
|
</td>
|
|
<td>
|
|
This is <a href="http://example.com/" title="Optional Title Here">an example</a> reference-style link.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
This is an example of an implicit reference-style link: search [Google][] for more.<p>
|
|
[Google]: http://google.com/
|
|
</code>
|
|
</td>
|
|
<td>
|
|
This is an example of an implicit reference-style link: search <a href="http://google.com/">Google</a> for more.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
I get 10 times more traffic from [Google] [1] than from<br>
|
|
[Yahoo] [2] or [Bing] [3].<p>
|
|
|
|
[1]: http://google.com/ "Google"<br>
|
|
[2]: http://search.yahoo.com/ "Yahoo Search"<br>
|
|
[3]: http://bing.com/ "Bing"
|
|
</code>
|
|
</td>
|
|
<td>
|
|
I get 10 times more traffic from <a href="http://google.com/" title="Google">Google</a> than from
|
|
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or
|
|
<a href="http://bing.com/" title="Bing">Bing</a>.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="em"></a>
|
|
<h2>Emphasis</h2>
|
|
|
|
<table width="100%" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
*single asterisks*<p>
|
|
_single underscores_<p>
|
|
**double asterisks**<p>
|
|
__double underscores__
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<em>single asterisks</em><p>
|
|
<em>single underscores</em><p>
|
|
<strong>double asterisks</strong><p>
|
|
<strong>double underscores</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
un*frigging*believable
|
|
</code>
|
|
</td>
|
|
<td>
|
|
un<em>frigging</em>believable
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
\*this text is surrounded by literal asterisks\*
|
|
</code>
|
|
</td>
|
|
<td>
|
|
*this text is surrounded by literal asterisks*
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="code"></a>
|
|
<h2>Code</h2>
|
|
|
|
<table width="100%" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
Use the `printf()` function.
|
|
</code>
|
|
</td>
|
|
<td>
|
|
Use the <code>printf()</code> function.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
``There is a literal backtick (`) here.``
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<code>There is a literal backtick (`) here.</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
A single backtick in a code span: `` ` ``<p>
|
|
A backtick-delimited string in a code span: `` `foo` ``
|
|
</code>
|
|
</td>
|
|
<td>
|
|
A single backtick in a code span: <code>`</code><p>
|
|
A backtick-delimited string in a code span: <code>`foo`</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>Please don't use any `<blink>` tags.</code>
|
|
</td>
|
|
<td>
|
|
Please don't use any <code><blink></code> tags.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>`&#8212;` is the decimal-encoded equivalent of `&mdash;`.</code>
|
|
</td>
|
|
<td>
|
|
<code>&#8212;</code> is the decimal-encoded equivalent of
|
|
<code>&mdash;</code>.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="img"></a>
|
|
<h2>Images</h2>
|
|
|
|
<table width="100%" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code></code>
|
|
</td>
|
|
<td>
|
|
<img src="/static/avatars/default.png" alt="Alt text">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code></code>
|
|
</td>
|
|
<td>
|
|
<img src="/static/avatars/default.png" alt="Alt text" title="Optional title">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>
|
|
![Alt text][id]<p>
|
|
[id]: /static/avatars/default.png "Optional title attribute"
|
|
</code>
|
|
</td>
|
|
<td>
|
|
<img src="/static/avatars/default.png" alt="Alt text" title="Optional title attribute">
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="misc"></a>
|
|
<h1>Miscellaneous</h1>
|
|
|
|
<a name="autolink"></a>
|
|
<h2>Automatic Links</h2>
|
|
|
|
E-mail links get automatically converted into a random mess of HTML attributes to
|
|
attempt to thwart e-mail harvesting spam bots.<p>
|
|
|
|
<table width="100%" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Markdown Syntax</th>
|
|
<th width="50%">Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<code><http://example.com/></code>
|
|
</td>
|
|
<td>
|
|
<a href="http://example.com/">http://example.com/</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code><address@example.com></code>
|
|
</td>
|
|
<td>
|
|
<a href="mailto:address@example.com">address@example.com</a><p>
|
|
|
|
(Source: <code><a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58; &#97;&#100;&#100;&#114;&#101;&#115;&#115;&#64; &#101;&#120;&#97;&#109;&#112;&#108; &#101;&#46;&#99;&#111;&#109;">&#97; &#100;&#100;&#114;&#101;&#115;&#115; &#64;&#101;&#120;&#97;&#109;&#112; &#108;&#101;&#46;&#99;&#111; &#109;</a></code>)
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<a name="escape"></a>
|
|
<h2>Backslash Escapes</h2>
|
|
|
|
Use backslash characters to escape any other special characters in the Markdown syntax. For example,
|
|
<code>\*</code> to insert a literal asterisk so that it doesn't get mistaken for e.g. emphasized text,
|
|
a list item, etc.<p>
|
|
|
|
Markdown provides backslash escapes for the following characters:<p>
|
|
|
|
<pre>\ backslash
|
|
` backtick
|
|
* asterisk
|
|
_ underscore
|
|
{} curly braces
|
|
[] square brackets
|
|
() parenthesis
|
|
# hash mark
|
|
+ plus sign
|
|
- minus sign (hyphen)
|
|
. dot
|
|
! exclamation mark</pre>
|
|
|
|
</div><!-- /div class="content" -->
|
|
{{ end }}
|