docs: add possibility to color lines in docs code

Author: MateuszRostkowski

docs/docusaurus.config.ts

@@ -110,7 +110,25 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
-      additionalLanguages: ['bash'],
+      additionalLanguages: ['bash', 'ruby', 'json', 'ejs', 'diff', 'markup-templating'],
+      magicComments: [
+        // Remember to extend the default highlight class name as well!
+        {
+          className: 'theme-code-block-highlighted-line',
+          line: 'highlight-next-line',
+          block: { start: 'highlight-start', end: 'highlight-end' },
+        },
+        {
+          className: 'code-block-error-line',
+          line: 'error-line',
+          block: { start: 'error-line-start', end: 'error-line-end' },
+        },
+        {
+          className: 'code-block-success-line',
+          line: 'success-line',
+          block: { start: 'success-line-start', end: 'success-line-end' },
+        },
+      ],
     },
   } satisfies Preset.ThemeConfig,
 }

docs/src/css/custom.css

@@ -30,3 +30,19 @@
   --ifm-background-color: #272934;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.code-block-error-line {
+  background-color: #ff000020;
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid #ff000080;
+}
+
+.code-block-success-line {
+  background-color: #00ff0020;
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid #00ff0080;
+}