76 lines
3.7 KiB
Text
76 lines
3.7 KiB
Text
<% title "Markdown Basics" %>
|
|
|
|
<%= content_for :page_meta do %>
|
|
<link rel="canonical" href="https://dev.to/p/markdown_basics"/>
|
|
<meta name="description" content="dev.to | markdown basics">
|
|
<meta name="keywords" content="software development,engineering,rails,javascript,ruby">
|
|
|
|
<% end %>
|
|
|
|
<header>
|
|
<div class="blank-space"></div>
|
|
</header>
|
|
<div class="container article">
|
|
<div class="title">
|
|
<h1>Markdown Basics 🤓</h1>
|
|
</div>
|
|
<div class="body">
|
|
|
|
<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><strong>Bold & Italic</strong></h3>
|
|
<p> <em>Italics</em>: <code>*asterisks* or _underscores_</code></p>
|
|
<p> <strong>Bold</strong>: <code>**double asterisks** or __double underscores__</code></p>
|
|
|
|
<h3><strong>Links</strong></h3>
|
|
<p><a href="https://dev.to">I'm an inline link</a>: <code>[I'm an inline link](put-link-here)</code></p>
|
|
|
|
<h3><strong>Inline Images</strong></h3>
|
|
<p>
|
|
<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"></img>
|
|
<code></code>
|
|
</p>
|
|
|
|
<h3><strong>Headers</strong></h3>
|
|
<p>Add a header to your post with this syntax:</p>
|
|
<pre>
|
|
<code><br>#One '#' for a h1 header<br>##Two '#'s for a h2 header<br>...<br>######Six '#'s for a h6 header</code>
|
|
</pre>
|
|
<h1>One '#' for a h1 header</h1>
|
|
<h2>Two '#'s for a h2 header</h2>
|
|
<h6>Six '#'s for a h6 header</h6>
|
|
|
|
<h2><strong><u>Liquid Tags</u></strong></h2>
|
|
<p>We support native <a href="https://shopify.github.io/liquid/" target="_blank" rel="noopener">Liquid tags</a> in our editor, but have created our own custom tags listed below:</p>
|
|
|
|
<h3><strong>Twitter Embed</strong></h3>
|
|
<p>Using the twitter Liquid tag will allow the tweet to pre-render from the server, providing your reader with a better experience. All you need is the tweet <code>id</code> from the url.
|
|
<code>{% twitter 834439977220112384 %}</code></p>
|
|
|
|
<h3><strong>GitHub Issue or Comment Embed</strong></h3>
|
|
<p>All you need is the GitHub issue or comment URL.</p>
|
|
<code>{% github https://github.com/thepracticaldev/dev.to/issues/9 %}</code>
|
|
|
|
<h3><strong>GitHub Gist Embed</strong></h3>
|
|
<p>All you need is the gist link</p>
|
|
<code>{% gist https://gist.github.com/QuincyLarson/4bb1682ce590dc42402b2edddbca7aaa %}</code>
|
|
|
|
<h3><strong>YouTube Embed</strong></h3>
|
|
<p>All you need is the YouTube <code>id</code> from the URL.</p>
|
|
<code>{% youtube 9z-Pdfxxdyo %}</code>
|
|
|
|
<h3><strong>Instagram Embed</strong></h3>
|
|
<p>All you need is the Instagram post <code>id</code> from the URL.</p>
|
|
<code>{% instagram BXgGcAUjM39 %}</code>
|
|
|
|
<h3><strong>Parsing Liquid Tags as a Code Example</strong></h3>
|
|
<p>To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.</p>
|
|
<p><code>`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`</code></p>
|
|
<p>One specific edge case is with using the <code>raw</code> tag. To properly escape it, use this format:</p>
|
|
<p><code>`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`</code></p>
|
|
|
|
<h4><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">Here's the Markdown cheatsheet again for reference.</a></h4>
|
|
Happy posting! 📝
|
|
<div class="blank-space"></div>
|
|
</div>
|
|
</div>
|