Merge pull request #183 from NMFS-RADFish/add-code-diff-highlighting

Add code diff highlighting

Author: thgaskell

docusaurus.config.js

@@ -559,6 +559,16 @@ ${content}`,
       prism: {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,
+        magicComments: [
+          {
+            className: 'code-block-diff-add-line',
+            line: 'diff-add'
+          },
+          {
+            className: 'code-block-diff-remove-line',
+            line: 'diff-remove'
+          }
+        ]
       },
     }),
 };

src/css/custom.css

@@ -85,4 +85,52 @@
 
 .button--secondary:hover {
   background-color: var(--ifm-color-secondary-light);
-}
+}
+
+/* Code diff highlighting start */
+.code-block-diff-add-line {
+  background-color: #ccffd8;
+  display: block;
+  margin: 0 -40px;
+  padding: 0 40px;
+}
+
+.code-block-diff-add-line::before {
+  position: absolute;
+  left: 8px;
+  padding-right: 8px;
+  content: '+';
+}
+
+.code-block-diff-remove-line {
+  background-color: #ffebe9;
+  display: block;
+  margin: 0 -40px;
+  padding: 0 40px;
+}
+
+.code-block-diff-remove-line::before {
+  position: absolute;
+  left: 8px;
+  padding-right: 8px;
+  content: '-';
+}
+
+/**
+ * use magic comments to mark diff blocks
+ */
+pre code:has(.code-block-diff-add-line) {
+  padding-left: 40px!important;
+}
+
+pre code:has(.code-block-diff-remove-line) {
+  padding-left: 40px!important;
+}
+
+[data-theme="dark"] pre code .token-line.code-block-diff-add-line {
+  background-color: #4A5827;
+}
+[data-theme="dark"] pre code .token-line.code-block-diff-remove-line {
+  background-color: #542936;
+}
+/* Code diff highlighting end */