Full integration with PyMdown extensions

src/assets/stylesheets/base/_typeset.scss

@@ -273,12 +273,6 @@ kbd {
     word-break: break-word;
   }
 
-  // Text insertion and deletion markers
-  del,
-  ins {
-    color: $clr-red-500;
-  }
-
   // Text highlighting marker
   mark {
     margin: 0 0.25em;

src/assets/stylesheets/extensions/pymdown/_critic.scss

@@ -24,20 +24,42 @@
 // Rules
 // ----------------------------------------------------------------------------
 
-// Critic extension
-.critic {
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
 
-  // Comment
-  &.comment {
+  // Deletions, additions and comments
+  del.critic,
+  ins.critic,
+  .comment.critic {
     margin: 0 0.25em;
     padding: 0.0625em 0;
     border-radius: 0.2rem;
-    background-color: $md-code-background;                                            // TODO: rename, centralize somehow
+    box-decoration-break: clone;
+  }
+
+  // Deletion
+  del.critic {
+    background-color: $codehilite-diff-deleted;                                 // TODO: dependent on order of inclusion
+    box-shadow:
+       0.25em 0 0 $codehilite-diff-deleted,
+      -0.25em 0 0 $codehilite-diff-deleted;
+  }
+
+  // Addition
+  ins.critic {
+    background-color: $codehilite-diff-inserted;
+    box-shadow:
+       0.25em 0 0 $codehilite-diff-inserted,
+      -0.25em 0 0 $codehilite-diff-inserted;
+  }
+
+  // Comment
+  .comment.critic {
+    background-color: $md-code-background;                                      // TODO: rename, centralize somehow
     color: $md-code-color;
     box-shadow:
        0.25em 0 0 $md-code-background,
       -0.25em 0 0 $md-code-background;
-    box-decoration-break: clone;
 
     // Icon
     &::before {

src/assets/stylesheets/extensions/pymdown/_emoji.scss

@@ -24,7 +24,11 @@
 // Rules
 // ----------------------------------------------------------------------------
 
-// Correct alignment of emojis
-.emoji {
-  vertical-align: text-top;
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Correct alignment of emojis
+  .emoji {
+    vertical-align: text-top;
+  }
 }