chore: Enable containers (#950)

* chore: Enable containers

* Update _11ty/plugins/markdown-plugins.js

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

* Fix semi.md

Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>

_11ty/plugins/markdown-plugins.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const markdownIt = require("markdown-it");
+const markdownItContainer = require("markdown-it-container");
 const highlightJS = require("highlight.js");
 const { slug } = require("github-slugger");
 
@@ -38,5 +39,10 @@ module.exports = function syntaxHighlighting(eleventyConfig) {
         uniqueSlugStartIndex: 1
     });
 
+    // add markdown containers
+    md = md
+        .use(markdownItContainer, "correct", {})
+        .use(markdownItContainer, "incorrect", {});
+
     eleventyConfig.setLibrary("md", md);
 };

docs/rules/semi.md

@@ -100,6 +100,8 @@ Object option (when `"never"`):
 
 Examples of **incorrect** code for this rule with the default `"always"` option:
 
+::: incorrect
+
 ```js
 /*eslint semi: ["error", "always"]*/
 
@@ -114,8 +116,12 @@ class Foo {
 }
 ```
 
+:::
+
 Examples of **correct** code for this rule with the default `"always"` option:
 
+::: correct
+
 ```js
 /*eslint semi: "error"*/
 
@@ -130,10 +136,14 @@ class Foo {
 }
 ```
 
+:::
+
 ### never
 
 Examples of **incorrect** code for this rule with the `"never"` option:
 
+::: incorrect
+
 ```js
 /*eslint semi: ["error", "never"]*/
 
@@ -148,8 +158,12 @@ class Foo {
 }
 ```
 
+:::
+
 Examples of **correct** code for this rule with the `"never"` option:
 
+::: correct
+
 ```js
 /*eslint semi: ["error", "never"]*/
 
@@ -180,10 +194,14 @@ class Foo {
 }
 ```
 
+:::
+
 #### omitLastInOneLineBlock
 
 Examples of additional **correct** code for this rule with the `"always", { "omitLastInOneLineBlock": true }` options:
 
+::: correct
+
 ```js
 /*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */
 
@@ -200,10 +218,14 @@ class C {
 }
 ```
 
+:::
+
 #### beforeStatementContinuationChars
 
 Examples of additional **incorrect** code for this rule with the `"never", { "beforeStatementContinuationChars": "always" }` options:
 
+::: incorrect
+
 ```js
 /*eslint semi: ["error", "never", { "beforeStatementContinuationChars": "always"}] */
 import a from "a"
@@ -213,8 +235,12 @@ import a from "a"
 })()
 ```
 
+:::
+
 Examples of additional **incorrect** code for this rule with the `"never", { "beforeStatementContinuationChars": "never" }` options:
 
+::: incorrect
+
 ```js
 /*eslint semi: ["error", "never", { "beforeStatementContinuationChars": "never"}] */
 import a from "a"
@@ -224,6 +250,8 @@ import a from "a"
 })()
 ```
 
+:::
+
 ## When Not To Use It
 
 If you do not want to enforce semicolon usage (or omission) in any particular way, then you can turn this rule off.

package.json

@@ -70,6 +70,7 @@
     "luxon": "^1.24.1",
     "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^6.0.0",
+    "markdown-it-container": "^3.0.0",
     "morgan": "^1.10.0",
     "node-fetch": "^2.6.7",
     "node-polyfill-webpack-plugin": "^1.0.3",

src/styles/lib/overrides.less

@@ -49,17 +49,6 @@ body {
 }
 
 p {
-  &.incorrect + div + div + div > pre, /* vars-on-top */
-  &.incorrect + div + div > pre, /* no-continue */
-  &.incorrect + div > pre {
-    background-color: #fff6f6; /* hsl(0,100%,98%) light red */
-  }
-
-  &.correct + div + div + div > pre, /* vars-on-top */
-  &.correct + div + div > pre, /* no-continue */
-  &.correct + div > pre {
-    background-color: #f6fff6; /* hsl(120,100%,98%) light green */
-  }
 
   &.icon {
     position:relative;