feat: improve support for diff

README.md

@@ -122,7 +122,15 @@ pre {
   margin-left: -16px;
   margin-right: -16px;
   border-left-width: 4px;
-  border-left-color: rgb(31, 41, 55); /* Set code block color */
+  border-left-color: rgba(31, 41, 55, 0); /* Set code block color */
+}
+
+.code-line.inserted {
+  background-color: rgba(16, 185, 129, 0.2); /* Set inserted line (+) color */
+}
+
+.code-line.deleted {
+  background-color: rgba(239, 68, 68, 0.2); /* Set deleted line (-) color */
 }
 
 .highlight-line {

index.js

@@ -227,6 +227,14 @@ const rehypePrism = (options = {}) => {
         line.properties.className.push('highlight-line')
       }
 
+      // @ts-ignore
+      if (lang === 'diff' && toString(line).substring(0, 1) === '-') {
+        line.properties.className.push('deleted')
+        // @ts-ignore
+      } else if (lang === 'diff' && toString(line).substring(0, 1) === '+') {
+        line.properties.className.push('inserted')
+      }
+
       // Syntax highlight
       const treeExtract = filter(
         refractorRoot,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rehype-prism-plus",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers",
   "source": "index.js",
   "files": [

test.js

@@ -312,4 +312,22 @@ test('should work with multiline code / comments', () => {
   assert.is(result, expected)
 })
 
+test('adds inserted or deleted to code-line if lang=diff', async () => {
+  const result = processHtml(
+    dedent`
+    <div>
+      <pre>
+      <code class="language-diff">+ x = 6
+- y = 7
+z = 10
+      </code>
+      </pre>
+    </div>
+    `
+  ).trim()
+  assert.ok(result.includes(`<span class="code-line inserted">`))
+  assert.ok(result.includes(`<span class="code-line deleted">`))
+  assert.ok(result.includes(`<span class="code-line">`))
+})
+
 test.run()