f07024e5d7
* Implement Runkit Liquid Tag * Update javascript tag * Fix lint * Add RunKit to Editor's Guide * Fix typo
118 lines
6.4 KiB
Text
118 lines
6.4 KiB
Text
<div class="container article">
|
|
<div class="title">
|
|
<h1>Editor Guide 🤓</h1>
|
|
</div>
|
|
<div class="body">
|
|
<h1><strong>Things to Know</strong></h1>
|
|
<ul>
|
|
<li>We use a markdown editor that uses <a href="https://jekyllrb.com/docs/frontmatter/">Jekyll front matter</a>.</li>
|
|
<li>Most of the time, you can write inline HTML directly into your posts.</li>
|
|
<li>We support native Liquid tags and created some fun custom ones, too! Trying embedding a Tweet or GitHub issue in your post.</li>
|
|
<li>Links to unpublished posts are shareable for feedback/review.</li>
|
|
<li>When you're ready to publish, set the published variable to <strong>true.</strong></li>
|
|
</ul>
|
|
|
|
<h2><u><strong>Front Matter</strong></u></h2>
|
|
<p>Custom variables set for each post, located between the triple-dashed lines in your editor. Here are a list of possibilities:</p>
|
|
<ul>
|
|
<li><strong>title:</strong> title of your article</li>
|
|
<li><strong>published:</strong> boolean that determines whether or not your article is published</li>
|
|
<li><strong>description:</strong> description area in Twitter cards and open graph cards</li>
|
|
<li><strong>tags:</strong> max of four tags, needs to be comma-separated</li>
|
|
<li><strong>canonical_url:</strong> link for canonical version of content</li>
|
|
<li><strong>cover_image: </strong> cover image for post, accepts a URL. <br>The best size is 1000 x 420.</li>
|
|
</ul>
|
|
<h2><u><strong>Markdown Basics</strong></u></h2>
|
|
<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>dev.to Article/Post Embed</strong></h3>
|
|
<p>All you need is the full link of the article:</p>
|
|
<code>{% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}</code>
|
|
|
|
<h3><strong>dev.to Comment Embed</strong></h3>
|
|
<p>All you need is the <code>ID</code> at the end of a comment URL. To get the comment link, click the top right arrow on a comment and then click "Permalink". Here's an example:</p>
|
|
<code>{% devcomment 2d1a %}</code>
|
|
|
|
<h3><strong>dev.to Podcast Episode Embed</strong></h3>
|
|
<p>All you need is the full link of the podcast episode:</p>
|
|
<code>{% podcast https://dev.to/basecspodcast/s2e2--queues-irl %}</code>
|
|
|
|
<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.</p>
|
|
<code>{% twitter 834439977220112384 %}</code>
|
|
|
|
<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>CodePen Embed</strong></h3>
|
|
<p>All you need is the full CodePen <code>link</code>, ending in the pen ID code, as follows:</p>
|
|
<code>{% codepen https://codepen.io/twhite96/pen/XKqrJX %}</code>
|
|
|
|
<h3><strong>RunKit Embed</strong></h3>
|
|
<p>Put executable code within a runkit liquid block, as follows:</p>
|
|
<pre><code>{% runkit %}<br>console.log("Place javascript here!"); <br>{% endrunkit %} <br></code></pre>
|
|
<code>
|
|
</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>
|
|
|
|
<h3><strong>Common Gotchas</strong></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">
|
|
</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! 📝
|
|
<br/>
|
|
<br/>
|
|
<div class="blank-space"></div>
|
|
</div>
|
|
</div>
|