Documentation/docusaurus/docusaurus.config.js

@@ -68,6 +68,19 @@ const config = {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
         additionalLanguages: ['csharp', "cshtml"],
+        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: 'myOneAndOnlyHightlightedCodeBlock',
+            line: 'highlight-next-line',
+            block: {start: 'highlight-start', end: 'highlight-end'},
+          },
+        ],
       },
     }),
 	

Documentation/docusaurus/src/css/custom.css

@@ -14,6 +14,9 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
+  --cf-background-color-primary: #f0eff4;
+  --cf-background-color-secondary: #bfb8ba;
+  --cf-color-accent-primary: #3ddc97;
 }
 
 .docusaurus-highlight-code-line {
@@ -23,6 +26,16 @@
   padding: 0 var(--ifm-pre-padding);
 }
 
-html[data-theme='dark'] .docusaurus-highlight-code-line {
+html[data-theme='dark'] .myOneAndOnlyHightlightedCodeBlock {
   background-color: rgba(0, 0, 0, 0.3);
+  --cf-background-color-primary: #023c40;
+  --cf-color-accent-primary: #3ddc97;
+}
+
+.myOneAndOnlyHightlightedCodeBlock {
+  background-color: var(--cf-background-color-primary);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+  border-left: 3px solid var(--cf-color-accent-primary);
 }