{{ 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>![Alt text](/static/avatars/default.png)</code> </td> <td> <img src="/static/avatars/default.png" alt="Alt text"> </td> </tr> <tr> <td> <code>![Alt text](/static/avatars/default.png "Optional title")</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 }}