<% title "Markdown Basics" %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url("/p/markdown_basics") %>" />
  <meta name="description" content="dev.to | markdown basics">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

<% end %>

<div class="blank-space"></div>
<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" />
      <code>![Alt text of image](put-link-to-image-here)</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>Video Embed</strong></h3>
    <p>All you need is the <code>id</code> from the URL.</p>
    <code>{% youtube 9z-Pdfxxdyo %}</code><br />
    <code>{% vimeo 193110695 %}</code><br />

    <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>
