diff --git a/app/views/pages/_editor_guide_text.html.erb b/app/views/pages/_editor_guide_text.html.erb index cbabb86dc..486a17af5 100644 --- a/app/views/pages/_editor_guide_text.html.erb +++ b/app/views/pages/_editor_guide_text.html.erb @@ -1,3 +1,15 @@ +

Editor Guide 🤓

@@ -7,7 +19,7 @@ <%= render "pages/v1_editor_guide_preamble" %> <% else %>

We have two editor versions. If you prefer Jekyll-style "frontmatter", switch to "basic markdown" in /settings/customization.

-

Things to Know

+ <% end %> -

✍ Markdown Basics

+

Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out this cheat sheet.

-

Bold & Italic

+

Italics: *asterisks* or _underscores_

Bold: **double asterisks** or __double underscores__

-

Links

+

I'm an inline link: [I'm an inline link](put-link-here)

Anchored links (For things like a Table of Contents)

@@ -33,27 +45,27 @@
 
       ### Chapter 1 <%= "" %>
-

Inline Images

+

When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page. example image, with sloan 

![Alt text of image](put-link-to-image-here)
You can even add a caption using the HTML figcaption tag!
-

Headers

+

Add a header to your post with this syntax:

# One '#' for a h1 header
## Two '#'s for a h2 header
...
###### Six '#'s for a h6 header

One '#' for a h1 header

Two '#'s for a h2 header

Six '#'s for a h6 header
-

Author Notes/Comments

+

Add some hidden notes/comments to your article with this syntax:

<!-- This won't show up in the content! -->
-

🌊 Liquid Tags

+

We support native Liquid tags in our editor, but have created our own custom tags listed below:

-

<%= community_name %> Article/Post Embed

+

<%= community_name %> Article/Post Embed<%= inline_svg_tag("small-link.svg", aria: true, title: "permalink for Article/Post Embed") %>

All you need is the full link of the article:

{% link <%= app_url("/kazz/boost-your-productivity-using-markdown-1be") %> %}

You can also use the slug like this:

@@ -62,27 +74,27 @@ {% post <%= app_url("/kazz/boost-your-productivity-using-markdown-1be") %> %}

or this:

{% post kazz/boost-your-productivity-using-markdown-1be %} -

<%= community_name %> User Embed

+

All you need is the <%= community_name %> username:

{% user jess %} -

<%= community_name %> Tag Embed

+

All you need is the tag name:

{% tag git %} -

<%= community_name %> Comment Embed

+

All you need is the ID at the end of a comment URL. To get the comment link, click either the timestamp or the menu button in the top right corner on a comment and then click "Permalink". Here's an example:

{% comment 2d1a %} -

<%= community_name %> Podcast Episode Embed

+

All you need is the full link of the podcast episode:

{% podcast <%= app_url("/basecspodcast/s2e2--queues-irl") %> %} -

<%= community_name %> Listing Embed

+

All you need is the full link of the listing:

{% listing <%= app_url("/listings/collabs/dev-is-open-source-823") %> %}

You can also use the category and slug like this:

{% listing collabs/dev-is-open-source-823 %}

Note: Expired listings will raise an error. Make sure the listing is published or recently bumped.

-

Details Embed

+

You can embed a details HTML element by using details, spoiler, or collapsible. The summary will be what the dropdown title displays. The content will be the text hidden behind the dropdown. This is @@ -91,15 +103,15 @@

{% details summary %} content {% enddetails %}

{% spoiler summary %} content {% endspoiler %}

{% collapsible summary %} content {% endcollapsible %}

-

Twitter Embed

+

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 id from the url.

{% twitter 834439977220112384 %} -

Twitter Timeline

+

Using the Twitter Timeline Liquid tag will allow the Twitter Timeline to pre-render from the server. All you need is the Twitter Timeline link.

{% twitter_timeline https://twitter.com/username/timelines/834439977220112384 %} -

Glitch embed

+

All you need is the Glitch project slug

{% glitch earthy-course %}

There are several @@ -137,7 +149,7 @@ {% glitch earthy-course file=script.js %} -

GitHub Repo Embed

+

All you need is the GitHub username and repo:

{% github forem/forem %}
@@ -147,10 +159,10 @@ {% github forem/forem no-readme %}
-

GitHub Issue, Pull request or Comment Embed

+

All you need is the GitHub issue, PR or comment URL:

{% github https://github.com/forem/forem/issues/9 %} -

GitHub Gist Embed

+

All you need is the gist link:

{% gist https://gist.github.com/CristinaSolana/1885435 %} @@ -180,25 +192,25 @@

-

GitPitch Embed

+

All you need is the GitPitch link:

{% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %} -

Video Embed

+

All you need is the id from the URL.

-

Medium Embed

+

Just enter the full URL of the Medium article you are trying to embed.

{% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %} -

SlideShare Embed

+

All you need is the SlideShare key:

{% slideshare rdOzN9kr1yK5eE %} -

CodePen Embed

+

All you need is the full CodePen link, ending in the pen ID code, as follows:

{% codepen https://codepen.io/twhite96/pen/XKqrJX %}
@@ -208,21 +220,21 @@ {% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}
-

Kotlin Playground

+

To create a runnable kotlin snippet, create a Kotlin Snippet at https://play.kotlinlang.org

Go to Share dialog and copy the full link from the Medium tab. Use it as follows:

{% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %} -

RunKit Embed

+

Put executable code within a runkit liquid block, as follows:

{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}
-

KaTeX Embed

+

Place your mathematical expression within a KaTeX liquid block, as follows:

{% katex %}
 c = \pm\sqrt{a^2 + b^2}
{% endkatex %}

To render KaTeX inline add the "inline" option:

{% katex inline %}
 c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
-

Stackblitz Embed

+

All you need is the ID of the Stackblitz:

{% stackblitz ball-demo %}
@@ -260,7 +272,7 @@ {% codesandbox ppxnl191zx runonclick=1 %}
-

JSFiddle Embed

+

All you need is the full JSFiddle link, ending in the fiddle ID code, as follows:

{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}
@@ -271,7 +283,7 @@
-

JSitor Liquid Tag

+

To use JSitor liquid tag you can use the JSitor full link, with or without the parameters

@@ -285,45 +297,45 @@
{% jsitor B7FQ5tHbY?html&js&css&result&light %} -

repl.it Embed

+

All you need is the URL after the domain name:

{% replit @WigWog/PositiveFineOpensource %} -

Stackery Embed

+

Visualize your AWS Serverless Application Model templates with Stackery's visualizer embed

All you need is the repository owner, repository name, and branch that you would like visualized

{% stackery deeheber lambda-layer-example master %}

The repository must be a public GitHub repository and have a valid AWS SAM template in the project root titled template.yaml

-

Next Tech Embed

+

Next Tech Embed<%= inline_svg_tag("small-link.svg", aria: true, title: "permalink for Next Tech Embed") %>

All you need is the share URL for your sandbox. You can get the share URL by clicking the "Share" button in the top right when the sandbox is open.

Share Replit sandbox

{% nexttech https://nt.dev/s/6ba1fffbd09e %} -

Instagram Embed

+

All you need is the Instagram post id from the URL:

{% instagram BXgGcAUjM39 %} -

Speakerdeck Tag

+

All you need is the data-id code from the embed link:

# Given this embed link:
<script async class="speakerdeck-embed"
    data-id="7e9f8c0fa0c949bd8025457181913fd0"
    data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
-

Soundcloud Embed

+

Just enter the full URL of the Soundcloud track you are trying to embed.

{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %} -

Spotify Embed

+

Enter the Spotify URI of the Spotify track / playlist / album / artist / podcast episode you are trying to embed. 

{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}
-

Blogcast Tag

+

All you need is the article id code from the embed code:

{% blogcast 1234 %}
-

Parler Tag

+

Enter the full url of the Parler.io audio file you want to embed. 

{% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}
-

Stack Exchange / Stack Overflow Tag

+

You'll need the question or answer's ID code, and the site. When using {% stackoverflow %} as the tag, the site will default to Stack Overflow. For example: @@ -354,31 +366,32 @@ 

{% stackexchange 170185 diy %}

-

Wikipedia Embed

+

Enter the full URL of the Wikipedia article you want to embed, with or without the anchor.

{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}
{% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %}

-

Asciinema Embed

+

All you need is an Asciinema id or URL:

{% asciinema 239367 %} {% asciinema https://asciinema.org/a/239367 %} -

Reddit Tag

+

Enter the full URL of the post you want to embed

 {% reddit https://www.reddit.com/r/aww/comments/ag3s4b/ive_waited_28_years_to_finally_havr_my_first_pet %}
-

Parsing Liquid Tags as a Code Example

+

To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.

`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`

One specific edge case is with using the raw tag. To properly escape it, use this format:

`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`

-

Common Gotchas

+

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, diff --git a/app/views/pages/_v1_editor_guide_preamble.html.erb b/app/views/pages/_v1_editor_guide_preamble.html.erb index 5a69ae3c2..f6239241b 100644 --- a/app/views/pages/_v1_editor_guide_preamble.html.erb +++ b/app/views/pages/_v1_editor_guide_preamble.html.erb @@ -1,5 +1,16 @@ + +

Things to Know<%= inline_svg_tag("small-link.svg", aria: true, title: "permalink for Things to know") %>