57 lines
2.8 KiB
Text
57 lines
2.8 KiB
Text
<div id="editor-markdown-help">
|
|
<div class="text-styles">
|
|
<p>Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out
|
|
<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">this cheat sheet.</a>
|
|
</p>
|
|
|
|
<h3>Bold & Italic</h3>
|
|
<p><em>Italics</em>: <code>*asterisks* or _underscores_</code></p>
|
|
<p><strong>Bold</strong>: <code>**double asterisks** or __double underscores__</code></p>
|
|
|
|
<h3>Links</h3>
|
|
<p><a href="<%= app_url %>">I'm an inline link</a>: <code>[I'm an inline link](put-link-here)</code></p>
|
|
<p><a name="anchored">Anchored links</a> (For things like a Table of Contents)</p>
|
|
<pre>
|
|
## Table Of Contents
|
|
* [Chapter 1](#chapter-1)
|
|
* [Chapter 2](#chapter-2)
|
|
|
|
### Chapter 1 <%= "<a name=\"chapter-1\"></a>" %>
|
|
</pre>
|
|
|
|
<h3>Inline Images</h3>
|
|
<p>
|
|
When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.
|
|
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
|
|
</p>
|
|
<pre></pre>
|
|
<figcaption> You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>
|
|
|
|
<h3>Headers</h3>
|
|
<p>Add a header to your post with this syntax:</p>
|
|
<pre># One '#' for a h1 header<br>## Two '#'s for a h2 header<br>...<br>###### Six '#'s for a h6 header</pre>
|
|
<h1>One '#' for a h1 header</h1>
|
|
<h2>Two '#'s for a h2 header</h2>
|
|
<h3>Three '#'s for a h3 header</h3>
|
|
<h4>Four '#'s for a h4 header</h4>
|
|
<h5>Five '#'s for a h5 header</h5>
|
|
<h6>Six '#'s for a h6 header</h6>
|
|
|
|
<h3>Author Notes/Comments</h3>
|
|
<p>Add some hidden notes/comments to your article with this syntax:</p>
|
|
<pre><!-- This won't show up in the content! --></pre>
|
|
|
|
<h3>Common Gotchas</h3>
|
|
<p>
|
|
Lists are written just like any other Markdown editor.
|
|
If you're adding an image in between numbered list, though, be sure to tab the image,
|
|
otherwise it'll restart the number of the list.
|
|
Here's an example of what to do:
|
|
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HjVUshkb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/8l29vxiir8k5d097o9o8.png"
|
|
alt="example image of writing lists with images in Markdown" loading="lazy" />
|
|
</p>
|
|
<p>
|
|
Here's the <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">Markdown cheatsheet</a> again for reference.
|
|
</p>
|
|
</div>
|
|
</div>
|