diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index 1bd1de1af2f..94a20211254 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -179,14 +179,63 @@ 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)));
+ }
+
+ /**
+ * Creates markdownItContainer settings for a playground-linked codeblock.
+ * @param {string} name Plugin name and class name to add to the code block.
+ * @returns {[string, object]} Plugin name and options for markdown-it.
+ */
+ function withPlaygroundRender(name) {
+ return [
+ name,
+ {
+ render(tokens, index) {
+ if (tokens[index].nesting !== 1) {
+ return "";
+ }
+
+ // See https://github.com/eslint/eslint.org/blob/ac38ab41f99b89a8798d374f74e2cce01171be8b/src/playground/App.js#L44
+ const parserOptions = tokens[index].info?.split("correct ")[1]?.trim();
+ const { content } = tokens[index + 1];
+ const state = encodeToBase64(
+ JSON.stringify({
+ ...(parserOptions && { options: { parserOptions: JSON.parse(parserOptions) } }),
+ text: content
+ })
+ );
+ const prefix = process.env.CONTEXT && process.env.CONTEXT !== "deploy-preview"
+ ? ""
+ : "https://eslint.org";
+
+ return `
+
+
+ Open in Playground
+
+ `.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, ...withPlaygroundRender("correct"))
+ .use(markdownItContainer, ...withPlaygroundRender("incorrect"))
.use(markdownItContainer, "warning", {
render(tokens, idx) {
return generateAlertMarkup("warning", tokens, idx);
diff --git a/docs/src/assets/js/main.js b/docs/src/assets/js/main.js
index bf3268266f4..80168a136c9 100644
--- a/docs/src/assets/js/main.js
+++ b/docs/src/assets/js/main.js
@@ -192,24 +192,6 @@
}
})();
-// add "Open in Playground" button to code blocks
-// (function() {
-// let blocks = document.querySelectorAll('pre[class*="language-"]');
-// if (blocks) {
-// blocks.forEach(function(block) {
-// let button = document.createElement("a");
-// button.classList.add('c-btn--playground');
-// button.classList.add('c-btn');
-// button.classList.add('c-btn--secondary');
-// button.setAttribute("href", "#");
-// button.innerText = "Open in Playground";
-// block.appendChild(button);
-// });
-// }
-// })();
-
-
-
// add utilities
var util = {
keyCodes: {
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index ee40123891d..98d6de83d45 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -142,13 +142,14 @@ pre[class*="language-"] {
.c-btn.c-btn--playground {
position: absolute;
font-size: var(--step--1);
- bottom: 0.5rem;
- right: 0.5rem;
+ bottom: -1rem;
+ right: 1rem;
offset-block-end: 0.5rem;
offset-inline-end: 0.5rem;
+ z-index: 1;
- @media all and (max-width: 768px) {
- display: none;
+ @media all and (min-width: 768px) {
+ bottom: 1.5rem;
}
}
diff --git a/docs/src/rules/no-implicit-globals.md b/docs/src/rules/no-implicit-globals.md
index 1e5c5fad723..6a479a0a765 100644
--- a/docs/src/rules/no-implicit-globals.md
+++ b/docs/src/rules/no-implicit-globals.md
@@ -44,7 +44,7 @@ This rule disallows `var` and `function` declarations at the top-level script sc
Examples of **incorrect** code for this rule:
-::: incorrect
+::: incorrect { "sourceType": "script" }
```js
/*eslint no-implicit-globals: "error"*/
@@ -58,7 +58,7 @@ function bar() {}
Examples of **correct** code for this rule:
-::: correct
+::: correct { "sourceType": "script" }
```js
/*eslint no-implicit-globals: "error"*/
@@ -79,7 +79,7 @@ window.bar = function() {};
Examples of **correct** code for this rule with `"parserOptions": { "sourceType": "module" }` in the ESLint configuration:
-::: correct
+::: correct { "sourceType": "script" }
```js
/*eslint no-implicit-globals: "error"*/
@@ -100,7 +100,7 @@ This does not apply to ES modules since the module code is implicitly in `strict
Examples of **incorrect** code for this rule:
-::: incorrect
+::: incorrect { "sourceType": "script" }
```js
/*eslint no-implicit-globals: "error"*/
@@ -127,7 +127,7 @@ or in a `/*global */` comment.
Examples of **incorrect** code for this rule:
-::: incorrect
+::: incorrect { "sourceType": "script" }
```js
/*eslint no-implicit-globals: "error"*/
@@ -155,7 +155,7 @@ If the variable is intended to be local to the script, wrap the code with a bloc
Examples of **correct** code for this rule with `"lexicalBindings"` option set to `false` (default):
-::: correct
+::: correct { "sourceType": "script" }
```js
/*eslint no-implicit-globals: ["error", {"lexicalBindings": false}]*/
@@ -171,7 +171,7 @@ class Bar {}
Examples of **incorrect** code for this rule with `"lexicalBindings"` option set to `true`:
-::: incorrect
+::: incorrect { "sourceType": "script" }
```js
/*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/
@@ -187,7 +187,7 @@ class Bar {}
Examples of **correct** code for this rule with `"lexicalBindings"` option set to `true`:
-::: correct
+::: correct { "sourceType": "script" }
```js
/*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/
@@ -221,7 +221,7 @@ Even the `typeof` check is not safe from TDZ reference exceptions.
Examples of **incorrect** code for this rule with `"lexicalBindings"` option set to `true`:
-::: incorrect
+::: incorrect { "sourceType": "script" }
```js
/*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/
@@ -239,7 +239,7 @@ const MyGlobalFunction = (function() {
Examples of **correct** code for this rule with `"lexicalBindings"` option set to `true`:
-::: correct
+::: correct { "sourceType": "script" }
```js
/*eslint no-implicit-globals: ["error", {"lexicalBindings": true}]*/
@@ -261,7 +261,7 @@ You can use `/* exported variableName */` block comments in the same way as in [
Examples of **correct** code for `/* exported variableName */` operation:
-::: correct
+::: correct { "sourceType": "script" }
```js
/* exported global_var */
diff --git a/docs/src/rules/no-restricted-imports.md b/docs/src/rules/no-restricted-imports.md
index ece0ceb5490..9040170ed13 100644
--- a/docs/src/rules/no-restricted-imports.md
+++ b/docs/src/rules/no-restricted-imports.md
@@ -130,7 +130,7 @@ To restrict the use of all Node.js core imports (via