From 3eb6c6a67d94a002fffb0e8fad3497a27c4390df Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleatherman@gmail.com>
Date: Thu, 3 Mar 2022 17:11:08 -0600
Subject: [PATCH] Upgrade syntax highlighter to 4.0 and update example to use
 diff syntax

---
 _includes/layouts/base.njk        |  1 +
 css/index.css                     | 30 -----------------------
 css/prism-base16-monokai.dark.css |  1 -
 css/prism-diff.css                | 40 +++++++++++++++++++++++++++++++
 package.json                      |  4 ++--
 posts/thirdpost.md                |  6 ++---
 6 files changed, 46 insertions(+), 36 deletions(-)
 create mode 100644 css/prism-diff.css

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index ad6569e2f3..4c4063baae 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -7,6 +7,7 @@
     <meta name="description" content="{{ description or metadata.description }}">
     <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/prism-diff.css' | url }}">
     <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
   </head>
diff --git a/css/index.css b/css/index.css
index 28be668ebf..25c9c82440 100644
--- a/css/index.css
+++ b/css/index.css
@@ -88,36 +88,6 @@ pre {
 code {
   word-break: break-all;
 }
-.highlight-line {
-  display: block;
-  padding: 0.125em 1em;
-  text-decoration: none; /* override del, ins, mark defaults */
-  color: inherit; /* override del, ins, mark defaults */
-}
-
-/* allow highlighting empty lines */
-.highlight-line:empty:before {
-  content: " ";
-}
-/* avoid double line breaks when using display: block; */
-.highlight-line + br {
-  display: none;
-}
-
-.highlight-line-isdir {
-  color: #b0b0b0;
-  background-color: #222;
-}
-.highlight-line-active {
-  background-color: #444;
-  background-color: hsla(0, 0%, 27%, .8);
-}
-.highlight-line-add {
-  background-color: #45844b;
-}
-.highlight-line-remove {
-  background-color: #902f2f;
-}
 
 /* Header */
 .home {
diff --git a/css/prism-base16-monokai.dark.css b/css/prism-base16-monokai.dark.css
index dceb2a6508..4a7889adf6 100644
--- a/css/prism-base16-monokai.dark.css
+++ b/css/prism-base16-monokai.dark.css
@@ -68,7 +68,6 @@ pre[class*="language-"] {
 	text-decoration: line-through;
 }
 .token.inserted {
-	border-bottom: 1px dotted #f9f8f5;
 	text-decoration: none;
 }
 .token.italic {
diff --git a/css/prism-diff.css b/css/prism-diff.css
new file mode 100644
index 0000000000..797b0e550a
--- /dev/null
+++ b/css/prism-diff.css
@@ -0,0 +1,40 @@
+/*
+ * New diff- syntax
+ */
+
+pre[class*="language-diff-"] {
+  --eleventy-code-padding: 1.25em;
+	padding-left: var(--eleventy-code-padding);
+	padding-right: var(--eleventy-code-padding);
+}
+.token.deleted {
+	background-color: hsl(0, 51%, 37%);
+}
+.token.inserted {
+	background-color: hsl(126, 31%, 39%);
+}
+
+/* Make the + and - characters unselectable for copy/paste */
+.token.prefix.unchanged,
+.token.prefix.inserted,
+.token.prefix.deleted {
+	-webkit-user-select: none;
+	user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--eleventy-code-padding);
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background-color: rgba(0,0,0,.2);
+}
+
+/* Optional: full-width background color */
+.token.inserted:not(.prefix),
+.token.deleted:not(.prefix) {
+	display: block;
+	margin-left: calc(-1 * var(--eleventy-code-padding));
+	margin-right: calc(-1 * var(--eleventy-code-padding));
+	text-decoration: none; /* override del, ins, mark defaults */
+	color: inherit; /* override del, ins, mark defaults */
+}
diff --git a/package.json b/package.json
index 73c23ae719..7166701d57 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,8 @@
     "@11ty/eleventy": "^1.0.0",
     "@11ty/eleventy-navigation": "^0.3.2",
     "@11ty/eleventy-plugin-rss": "^1.1.2",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
-    "luxon": "^2.3.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "luxon": "^2.3.1",
     "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^8.4.1"
   }
diff --git a/posts/thirdpost.md b/posts/thirdpost.md
index 7740e12429..5fda350fc9 100644
--- a/posts/thirdpost.md
+++ b/posts/thirdpost.md
@@ -9,12 +9,12 @@ layout: layouts/post.njk
 ---
 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
 
-``` js/2/4
+```diff-js
 // this is a command
 function myCommand() {
-	let counter = 0;
++	let counter = 0;
 
-	counter++;
+-	counter++;
 
 }