add diff support to code examples

Author: jyecusch

src/components/code/Diff.tsx

@@ -0,0 +1,18 @@
+import { AnnotationHandler, InnerLine, BlockAnnotation } from 'codehike/code'
+
+export const diff: AnnotationHandler = {
+  name: 'diff',
+  onlyIfAnnotated: true,
+  transform: (annotation: BlockAnnotation) => {
+    const color = annotation.query == '-' ? '#f85149' : '#3fb950'
+    return [annotation, { ...annotation, name: 'mark', query: color }]
+  },
+  Line: ({ annotation, ...props }) => (
+    <>
+      <div className="box-content min-w-[1ch] select-none pl-2 opacity-70">
+        {annotation?.query}
+      </div>
+      <InnerLine merge={props} />
+    </>
+  ),
+}

src/components/code/Mark.tsx

@@ -0,0 +1,34 @@
+import { AnnotationHandler, InnerLine } from 'codehike/code'
+
+export const mark: AnnotationHandler = {
+  name: 'mark',
+  Line: ({ annotation, ...props }) => {
+    const color = annotation?.query || 'rgb(14 165 233)'
+    return (
+      <div
+        className="flex"
+        style={{
+          borderLeft: 'solid 2px transparent',
+          borderLeftColor: annotation && color,
+          backgroundColor: annotation && `rgb(from ${color} r g b / 0.1)`,
+        }}
+      >
+        <InnerLine merge={props} className="flex-1 px-2" />
+      </div>
+    )
+  },
+  Inline: ({ annotation, children }) => {
+    const color = annotation?.query || 'rgb(14 165 233)'
+    return (
+      <span
+        className="-mx-0.5 rounded px-0.5 py-0"
+        style={{
+          outline: `solid 1px rgb(from ${color} r g b / 0.5)`,
+          background: `rgb(from ${color} r g b / 0.13)`,
+        }}
+      >
+        {children}
+      </span>
+    )
+  },
+}

src/components/code/Pre.tsx

@@ -11,6 +11,8 @@ import {
 import { tokenTransitions } from './annotations/token-transitions'
 import { cn } from '@/lib/utils'
 import { meta } from './meta'
+import { mark } from './Mark'
+import { diff } from './Diff'
 
 export interface HandlerProps {
   enableTransitions?: boolean
@@ -32,7 +34,15 @@ const Pre: React.FC<Props> = ({
 }) => {
   const { title } = meta(highlighted)
 
-  let handlers = [callout, fold, collapse, collapseTrigger, collapseContent]
+  let handlers = [
+    callout,
+    fold,
+    collapse,
+    collapseTrigger,
+    collapseContent,
+    mark,
+    diff,
+  ]
 
   // Getting an issue with color transitions on the -code-text token
   // Note: this also won't work with the Tabs component, only the CodeSwitcherSelect