css/prism.css

@@ -20,7 +20,15 @@
 }
 
 .code-line {
-  @apply block pl-4 pr-4 -mx-4 border-l-4 border-gray-800;
+  @apply block pl-4 pr-4 -mx-4 border-l-4 border-opacity-0;
+}
+
+.code-line.inserted {
+  @apply bg-green-500 bg-opacity-20;
+}
+
+.code-line.deleted {
+  @apply bg-red-500 bg-opacity-20;
 }
 
 .highlight-line {

data/blog/new-features-in-v1.mdx

@@ -313,11 +313,23 @@ sum = parseInt(num1) + parseInt(num2) // "+" means "add"
 alert('Sum = ' + sum) // "+" means combine into a string
 ```
 
-To modify the styles, change the following class selectors in the `tailwind.css` file:
+To modify the styles, change the following class selectors in the `prism.css` file:
 
 ```css
+.code-highlight {
+  @apply float-left min-w-full;
+}
+
 .code-line {
-  @apply pl-4 -mx-4 border-l-4 border-gray-800;
+  @apply block pl-4 pr-4 -mx-4 border-l-4 border-opacity-0;
+}
+
+.code-line.inserted {
+  @apply bg-green-500 bg-opacity-20;
+}
+
+.code-line.deleted {
+  @apply bg-red-500 bg-opacity-20;
 }
 
 .highlight-line {
@@ -325,7 +337,7 @@ To modify the styles, change the following class selectors in the `tailwind.css`
 }
 
 .line-number::before {
-  @apply pr-4 -ml-2 text-gray-400;
+  @apply inline-block w-4 mr-4 -ml-2 text-right text-gray-400;
   content: attr(line);
 }
 ```

package-lock.json

@@ -5217,9 +5217,9 @@
       }
     },
     "hast-util-to-html": {
-      "version": "8.0.2",
+      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-8.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-8.0.3.tgz",
-      "integrity": "sha512-ipLhUTMyyJi9F/LXaNDG9BrRdshP6obCfmUZYbE/+T639IdzqAOkKN4DyrEyID0gbb+rsC3PKf0XlviZwzomhw==",
+      "integrity": "sha512-/D/E5ymdPYhHpPkuTHOUkSatxr4w1ZKrZsG0Zv/3C2SRVT0JFJG53VS45AMrBtYk0wp5A7ksEhiC8QaOZM95+A==",
       "requires": {
         "@types/hast": "^2.0.0",
         "ccount": "^2.0.0",
@@ -5229,10 +5229,24 @@
         "html-void-elements": "^2.0.0",
         "property-information": "^6.0.0",
         "space-separated-tokens": "^2.0.0",
-        "stringify-entities": "^4.0.0",
+        "stringify-entities": "^4.0.2",
         "unist-util-is": "^5.0.0"
       },
       "dependencies": {
+        "character-entities-legacy": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+          "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="
+        },
+        "stringify-entities": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.2.tgz",
+          "integrity": "sha512-MTxTVcEkorNtBbNpoFJPEh0kKdM6+QbMjLbaxmvaPMmayOXdr/AIVIIJX7FReUVweRBFJfZepK4A4AKgwuFpMQ==",
+          "requires": {
+            "character-entities-html4": "^2.0.0",
+            "character-entities-legacy": "^3.0.0"
+          }
+        },
         "unist-util-is": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.1.1.tgz",
@@ -5298,9 +5312,9 @@
       "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg=="
     },
     "html-void-elements": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz",
-      "integrity": "sha512-4OYzQQsBt0G9bJ/nM9/DDsjm4+fVdzAaPJJcWk5QwA3GIAPxQEeOR0rsI8HbDHQz5Gta8pVvGnnTNSbZVEVvkQ=="
+      "integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A=="
     },
     "http-cache-semantics": {
       "version": "4.1.0",
@@ -8357,9 +8371,9 @@
       }
     },
     "refractor": {
-      "version": "4.2.1",
+      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/refractor/-/refractor-4.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-4.2.2.tgz",
-      "integrity": "sha512-UhtiILJUJiKquZZPtPokJZAKu2a35cT6gPBXyv2FJj+3T+AC8fyUzVUvA0lyiiYNl9m2ShCW/SSDC9us/FsuvQ==",
+      "integrity": "sha512-pMCVw0+JQC0OSlp+pB4rTdojWGX3YxZeCRzqbZbWrJa9LU2O8kXGjQr9alNKMCArArcESBdBQZ5TIS8RWP2MdA==",
       "requires": {
         "@types/hast": "^2.0.0",
         "@types/prismjs": "^1.0.0",
@@ -8502,9 +8516,9 @@
       }
     },
     "rehype-prism-plus": {
-      "version": "1.1.1",
+      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-1.1.3.tgz",
-      "integrity": "sha512-dbc+ZlRN+CIafcxoNnuhXrTiurin1BBZwyy3XuolvAKF0n15CYaMVl7o3yxbrt5wLgAmqgR0FMrMUxwGadwYZA==",
+      "integrity": "sha512-ADk7Wr5HJO0igRfwYOzBi2AYu8Wd9YRsDOxp/fRtZXjelujr8PHjEkYNmH9TEKTJp2U72vU4tKaOn/49MuhDUw==",
       "requires": {
         "hast-util-to-html": "^8.0.1",
         "hast-util-to-string": "^2.0.0",

package.json

@@ -31,7 +31,7 @@
     "rehype-autolink-headings": "^6.0.0",
     "rehype-citation": "^0.1.1",
     "rehype-katex": "^6.0.0",
-    "rehype-prism-plus": "^1.1.0",
+    "rehype-prism-plus": "^1.1.3",
     "rehype-slug": "^5.0.0",
     "remark-footnotes": "^4.0.0",
     "remark-gfm": "^2.0.0",