add inserted + deleted highlighting

Author: lucacasonato

example/content.md

@@ -6,6 +6,11 @@
 }
 ```
 
+```diff
+- hello
++ world
+```
+
 # Deno
 
 [![Build Status - Cirrus][]][Build status] [![Twitter handle][]][Twitter badge]

example/main.ts

@@ -8,6 +8,7 @@ import "https://esm.sh/[email protected]/components/prism-tsx?no-check&pin=v57";
 import "https://esm.sh/[email protected]/components/prism-bash?no-check&pin=v57";
 import "https://esm.sh/[email protected]/components/prism-powershell?no-check&pin=v57";
 import "https://esm.sh/[email protected]/components/prism-json?no-check&pin=v57";
+import "https://esm.sh/[email protected]/components/prism-diff?no-check&pin=v57";
 
 const CONTENT_PATH = new URL("./content.md", import.meta.url);
 

makefile

@@ -4,4 +4,4 @@ build:
 	echo "/** @type {string} */\nexport const CSS = \``cat style/dist/main.css`\`;" > style.js
 
 dev:
-	deno run --allow-net --allow-read --unstable --watch --no-check ./example/main.ts
+	deno run -A --unstable --watch --no-check ./example/main.ts

mod.ts

@@ -106,6 +106,10 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
         "script",
         "plain-text",
         "property",
+        "prefix",
+        "line",
+        "deleted",
+        "inserted",
       ],
       a: ["anchor"],
       svg: ["octicon", "octicon-link"],

style.js

@@ -76,4 +76,14 @@
   &.tag .token.tag, &.property {
     color: var(--color-prettylights-syntax-entity-tag);
   }
+
+  &.deleted {
+    color: var(--color-prettylights-syntax-markup-deleted-text);
+    background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+  }
+
+  &.inserted {
+    color: var(--color-prettylights-syntax-markup-inserted-text);
+    background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+  }
 }