Merge pull request #21 from timlrx/feat/diff

Feat/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 {
@@ -178,7 +186,7 @@ If you would like to silently skip `<code>` elements with invalid languages or s
 Type: `boolean`.
 Default: `false`.
 
-By default, line numbers will only be displayed for code block cells with a meta property that includes 'showLineNumbers'.
+By default, line numbers will only be displayed for code block cells with a meta property that includes 'showLineNumbers'. To control the starting line number use `showLineNumbers=X`, where `X` is the starting line number as a meta property for the code block.
 
 If you would like to show line numbers for all code blocks, without specifying the meta property, set this to `true`.
 

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.1",
+  "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": [
@@ -16,8 +16,8 @@
     }
   },
   "scripts": {
-    "build": "tsc -b && vite build --config vite.config.cjs",
-    "tsc": "tsc --watch --noEmit",
+    "build": "tsc -b && microbundle --format esm",
+    "tsc": "tsc --watch",
     "lint": "eslint .",
     "prettier": "prettier --write '*.js'",
     "test": "uvu"
@@ -57,11 +57,11 @@
     "eslint-plugin-node": "^11.1.0",
     "husky": "^4.0.0",
     "lint-staged": "^11.1.2",
+    "microbundle": "^0.14.1",
     "prettier": "^2.3.2",
     "rehype": "^12.0.0",
     "typescript": "^4.3.5",
-    "uvu": "^0.5.1",
-    "vite": "^2.5.0"
+    "uvu": "^0.5.1"
   },
   "prettier": {
     "printWidth": 100,

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()