docs: add playground links to correct and incorrect code blocks

docs/.eleventy.js

@@ -179,14 +179,46 @@ module.exports = function(eleventyConfig) {
         `.trim();
     }
 
+    /**
+     * Encodes text in the base 64 format used in playground URL params.
+     * @param {string} text Text to be encoded to base 64.
+     * @see https://github.com/eslint/eslint.org/blob/1b2f2aabeac2955a076d61788da8a0008bca6fb6/src/playground/utils/unicode.js
+     * @returns {string} The base 64 encoded equivalent of the text.
+     */
+    function encodeToBase64(text) {
+        /* global btoa -- It does exist, and is what the playground uses. */
+        return btoa(unescape(encodeURIComponent(text)));
+    }
+
+    const withPlaygroundRender = {
+        render(tokens, index) {
+            if (tokens[index].nesting !== 1) {
+                return "</div>";
+            }
+
+            const state = encodeToBase64(
+                JSON.stringify({
+                    text: tokens[index + 1].content
+                })
+            );
+
+            return `
+                <div class="with-playground-link">
+                    <a class="open-in-playground" href="/play#${state}" target="_blank">
+                        Open in Playground ↗️
+                    </a>
+            `.trim();
+        }
+    };
+
     const markdownIt = require("markdown-it");
     const md = markdownIt({ html: true, linkify: true, typographer: true, highlight: (str, lang) => highlighter(md, str, lang) })
         .use(markdownItAnchor, {
             slugify: s => slug(s)
         })
         .use(markdownItContainer, "img-container", {})
-        .use(markdownItContainer, "correct", {})
-        .use(markdownItContainer, "incorrect", {})
+        .use(markdownItContainer, "correct", withPlaygroundRender)
+        .use(markdownItContainer, "incorrect", withPlaygroundRender)
         .use(markdownItContainer, "warning", {
             render(tokens, idx) {
                 return generateAlertMarkup("warning", tokens, idx);

docs/src/assets/scss/docs.scss

@@ -126,6 +126,29 @@ div.incorrect {
     }
 }
 
+div.with-playground-link {
+    position: relative;
+}
+
+a.open-in-playground {
+    background-color: var(--lightest-background-color);
+    border-radius: 0.25rem;
+    border: 1px solid var(--border-color);
+    color: unset;
+    opacity: 0;
+    padding: 0.5rem 0.75rem;
+    position: absolute;
+    right: 0.5rem;
+    text-decoration: none;
+    top: 0.5rem;
+    transition: opacity 0.2s linear;
+    z-index: 1;
+}
+
+a.open-in-playground:is(:focus, :hover) {
+    opacity: 1;
+}
+
 div.img-container {
     background-color: var(--img-background-color);
     border-radius: var(--border-radius);