diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 9652d84ebcc..87416ff3cc5 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -6,6 +6,7 @@ const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginTOC = require("eleventy-plugin-nesting-toc"); const slugify = require("slugify"); const markdownItAnchor = require("markdown-it-anchor"); +const markdownItContainer = require("markdown-it-container"); const Image = require("@11ty/eleventy-img"); const path = require("path"); @@ -141,12 +142,11 @@ module.exports = function(eleventyConfig) { const markdownIt = require("markdown-it"); eleventyConfig.setLibrary("md", - markdownIt({ - html: true, - linkify: true, - typographer: true - - }).use(markdownItAnchor, {}).disable("code")); + markdownIt({ html: true, linkify: true, typographer: true }) + .use(markdownItAnchor, {}) + .use(markdownItContainer, "correct", {}) + .use(markdownItContainer, "incorrect", {}) + .disable("code")); //------------------------------------------------------------------------------ // Shortcodes diff --git a/docs/package.json b/docs/package.json index a42c33aa68f..85ce93cb40e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -33,6 +33,7 @@ "luxon": "^2.4.0", "markdown-it": "^12.2.0", "markdown-it-anchor": "^8.1.2", + "markdown-it-container": "^3.0.0", "netlify-cli": "^10.3.1", "npm-run-all": "^4.1.5", "rimraf": "^3.0.2", diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss index eef51609b60..23ffec3e582 100644 --- a/docs/src/assets/scss/docs.scss +++ b/docs/src/assets/scss/docs.scss @@ -102,8 +102,8 @@ margin: 3rem 0; } -div[data-correct-code], -div[data-incorrect-code] { +div.correct, +div.incorrect { position: relative; &::after { @@ -115,13 +115,13 @@ div[data-incorrect-code] { } } -div[data-correct-code] { +div.correct { &::after { content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23ECFDF3'/%3E%3Cpath d='M30.5 16L19.5 27L14.5 22' stroke='%2312B76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); } } -div[data-incorrect-code] { +div.incorrect { &::after { content: url("data:image/svg+xml,%3Csvg width='45' height='44' viewBox='0 0 45 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' fill='%23FFF1F3'/%3E%3Cpath d='M28.5 16L16.5 28M16.5 16L28.5 28' stroke='%23F63D68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='1.5' y='1' width='42' height='42' rx='21' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A"); } diff --git a/docs/src/library/code-blocks.md b/docs/src/library/code-blocks.md index 7db4d1ccfa6..222d3e68519 100644 --- a/docs/src/library/code-blocks.md +++ b/docs/src/library/code-blocks.md @@ -6,35 +6,35 @@ To indicate correct and incorrect code usage, some code blocks can have correct ## Usage -To indicate that a code block is correct or incorrect, wrap the code block in a `div` and provide the `data-correct-code` and `data-incorrect-code` attributes, repsectively. +To indicate that a code block is correct or incorrect, wrap the code block in a container labeled either `correct` or `incorrect`. Make sure to leave space above and below the markdown code block to ensure it is rendered correctly. -```html -