From 4089bf7ffe30f37a913ab700f58f6e62ad40a194 Mon Sep 17 00:00:00 2001
From: kushagramehta <kushagramehta2000@gmail.com>
Date: Mon, 22 Apr 2024 16:09:13 +0530
Subject: [PATCH 1/2] fix: adding transformerNotationDiff to handle diff
 present in the markdown

---
 app/components/RenderMarkdown.tsx |  4 ++++
 app/styles/app.css                |  7 +++++++
 package.json                      |  1 +
 pnpm-lock.yaml                    | 11 +++++++++--
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/components/RenderMarkdown.tsx b/app/components/RenderMarkdown.tsx
index bb698affa..412140cb8 100644
--- a/app/components/RenderMarkdown.tsx
+++ b/app/components/RenderMarkdown.tsx
@@ -4,6 +4,7 @@ import { MarkdownLink } from '~/components/MarkdownLink'
 import type { HTMLProps } from 'react'
 import Markdown from 'markdown-to-jsx'
 import { getHighlighter as shikiGetHighlighter } from 'shiki/bundle-web.mjs'
+import { transformerNotationDiff } from '@shikijs/transformers'
 
 const CustomHeading = ({
   Comp,
@@ -86,6 +87,9 @@ function CodeBlock(props: React.HTMLProps<HTMLPreElement>) {
           highlighter.codeToHtml(code, {
             lang,
             theme,
+            transformers: [
+              transformerNotationDiff()
+            ]
           })
         )
       )
diff --git a/app/styles/app.css b/app/styles/app.css
index 874c9d98b..9abd2616e 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -174,6 +174,13 @@ pre.shiki .language-id {
   display: none;
 }
 
+pre.has-diff span.remove {
+  background-color: #ff000036;
+}
+
+pre.has-diff span.add {
+  background-color: #00ff0036;
+}
 /* Visually differentiates twoslash code samples  */
 pre.twoslash {
   border-color: #719af4;
diff --git a/package.json b/package.json
index 3ec392ee8..5b821bdb1 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@orama/orama": "^2.0.16",
+    "@shikijs/transformers": "^1.3.0",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@types/remove-markdown": "^0.3.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5320a0d36..49e7a087b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -139,6 +139,9 @@ devDependencies:
   '@orama/orama':
     specifier: ^2.0.16
     version: 2.0.16
+  '@shikijs/transformers':
+    specifier: ^1.3.0
+    version: 1.3.0
   '@types/react':
     specifier: ^18.2.65
     version: 18.2.65
@@ -4179,7 +4182,12 @@ packages:
 
   /@shikijs/core@1.3.0:
     resolution: {integrity: sha512-7fedsBfuILDTBmrYZNFI8B6ATTxhQAasUHllHmjvSZPnoq4bULWoTpHwmuQvZ8Aq03/tAa2IGo6RXqWtHdWaCA==}
-    dev: false
+
+  /@shikijs/transformers@1.3.0:
+    resolution: {integrity: sha512-3mlpg2I9CjhjE96dEWQOGeCWoPcyTov3s4aAsHmgvnTHa8MBknEnCQy8/xivJPSpD+olqOqIEoHnLfbNJK29AA==}
+    dependencies:
+      shiki: 1.3.0
+    dev: true
 
   /@sindresorhus/merge-streams@2.3.0:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
@@ -10684,7 +10692,6 @@ packages:
     resolution: {integrity: sha512-9aNdQy/etMXctnPzsje1h1XIGm9YfRcSksKOGqZWXA/qP9G18/8fpz5Bjpma8bOgz3tqIpjERAd6/lLjFyzoww==}
     dependencies:
       '@shikijs/core': 1.3.0
-    dev: false
 
   /side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}

From d8a2b6317705087cbd239014c22a58ba58c32190 Mon Sep 17 00:00:00 2001
From: kushagramehta <kushagramehta2000@gmail.com>
Date: Mon, 22 Apr 2024 16:58:46 +0530
Subject: [PATCH 2/2] running prettier for linting issue

---
 app/components/RenderMarkdown.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/components/RenderMarkdown.tsx b/app/components/RenderMarkdown.tsx
index 412140cb8..62f647054 100644
--- a/app/components/RenderMarkdown.tsx
+++ b/app/components/RenderMarkdown.tsx
@@ -87,9 +87,7 @@ function CodeBlock(props: React.HTMLProps<HTMLPreElement>) {
           highlighter.codeToHtml(code, {
             lang,
             theme,
-            transformers: [
-              transformerNotationDiff()
-            ]
+            transformers: [transformerNotationDiff()],
           })
         )
       )