Handle diff code blocks

Author: satya164

docusaurus.config.js

@@ -1,4 +1,3 @@
-import path from 'path';
 import remarkNpm2Yarn from '@docusaurus/remark-plugin-npm2yarn';
 import rehypeCodeblockMeta from './src/plugins/rehype-codeblock-meta.mjs';
 
@@ -15,6 +14,15 @@ export default {
     prism: {
       theme: require('prism-react-renderer').themes.github,
       darkTheme: require('prism-react-renderer').themes.dracula,
+      magicComments: [
+        {
+          className: 'theme-code-block-highlighted-line',
+          line: 'highlight-next-line',
+          block: { start: 'highlight-start', end: 'highlight-end' },
+        },
+        { className: 'code-block-diff-add-line', line: 'diff-add' },
+        { className: 'code-block-diff-remove-line', line: 'diff-remove' },
+      ],
     },
     algolia: {
       appId: 'QCWXRU195A',
@@ -147,7 +155,9 @@ export default {
           lastVersion: '6.x',
           breadcrumbs: false,
           remarkPlugins: [[remarkNpm2Yarn, { sync: true }]],
-          rehypePlugins: [[rehypeCodeblockMeta, { match: { snack: true } }]],
+          rehypePlugins: [
+            [rehypeCodeblockMeta, { match: { snack: true, lang: true } }],
+          ],
         },
         blog: {
           remarkPlugins: [[remarkNpm2Yarn, { sync: true }]],

src/components/Pre.js

@@ -80,12 +80,52 @@ export default function Pre({
   'data-snack': snack,
   'data-version': version,
   'data-dependencies': deps,
+  'data-lang': lang,
   ...rest
 }) {
   const { colorMode } = useColorMode();
+  const child = React.Children.only(children);
 
+  // Handle diffs with language
+  if (child.props.className === 'language-diff' && lang) {
+    const code = child.props.children;
+
+    if (typeof code !== 'string') {
+      throw new Error(
+        'Diff code must be a string, but received ' + typeof code
+      );
+    }
+
+    // Replace + and - with magic comments
+    // Need to add following in docusaurus.config.js
+    // themeConfig.prims.magicComments: [
+    //   { className: 'code-block-diff-add-line', line: 'diff-add' },
+    //   { className: 'code-block-diff-remove-line', line: 'diff-remove' },
+    // ],
+    const content = code
+      .split('\n')
+      .map((line) => {
+        if (line.startsWith('+ ')) {
+          return `// diff-add\n${line.replace(/^\+ /, '')}`;
+        } else if (line.startsWith('- ')) {
+          return `// diff-remove\n${line.replace(/^- /, '')}`;
+        }
+
+        return line;
+      })
+      .join('\n');
+
+    children = React.cloneElement(child, {
+      className: `language-${lang}`,
+      children: content,
+    });
+
+    return <MDXPre {...rest}>{children}</MDXPre>;
+  }
+
+  // Handle snack demos
   if (snack) {
-    const code = React.Children.only(children).props.children;
+    const code = child.props.children;
 
     if (typeof code !== 'string') {
       throw new Error(
@@ -228,8 +268,8 @@ export default function Pre({
         }
       }
 
-      children = React.Children.map(children, (child) =>
-        React.cloneElement(child, { children: content })
+      children = React.Children.map(children, (c) =>
+        React.cloneElement(c, { children: content })
       );
     }
 

src/css/custom.css

@@ -197,3 +197,44 @@ samp {
   margin-bottom: 25px;
   margin-top: -8px;
 }
+
+/**
+ * use magic comments to mark diff blocks
+ */
+.code-block-diff-add-line {
+  background-color: var(--ifm-color-success-contrast-background);
+  display: block;
+  margin: 0 -2em;
+  padding: 0 2em;
+}
+
+.code-block-diff-add-line::before {
+  position: absolute;
+  left: 8px;
+  padding-right: 8px;
+  content: '+';
+  color: var(--ifm-color-success-dark);
+}
+
+.code-block-diff-remove-line {
+  background-color: var(--ifm-color-danger-contrast-background);
+  display: block;
+  margin: 0 -2em;
+  padding: 0 2em;
+}
+
+.code-block-diff-remove-line::before {
+  position: absolute;
+  left: 8px;
+  padding-right: 8px;
+  content: '-';
+  color: var(--ifm-color-danger-dark);
+}
+
+pre code:has(.code-block-diff-add-line) {
+  padding-left: 2em !important;
+}
+
+pre code:has(.code-block-diff-remove-line) {
+  padding-left: 2em !important;
+}