From eba0468cbd8f83b3d6a674356daca89e19abff2b Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Tue, 6 Aug 2024 17:00:23 +0200 Subject: [PATCH 1/2] fix: add dark css magic --- src/components/codeBlock/code-blocks.module.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss index 4cf169ac63be82..9254e09ae72aad 100644 --- a/src/components/codeBlock/code-blocks.module.scss +++ b/src/components/codeBlock/code-blocks.module.scss @@ -22,8 +22,11 @@ } pre[class^='language-']:has(:global(.code-diff)) { - padding-left: 0; padding-right: 0; + + & :global(.token.operator) { + padding-right: 12px; + } } pre[class^='language-']:has(:global(.highlight-line)) { @@ -73,12 +76,16 @@ :global(.diff-inserted), :global(.inserted) { background-color: rgba(16, 185, 129, 0.2); + margin-left: -12px; + width: calc(100% + 12px); } /* Set deleted line (-) color */ :global(.diff-deleted), :global(.deleted) { background-color: rgba(239, 68, 68, 0.2); + margin-left: -12px; + width: calc(100% + 12px); } } From dd679199132976d007b9815cfe06ccf26bb174c8 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Tue, 6 Aug 2024 17:10:50 +0200 Subject: [PATCH 2/2] chore: add comments --- src/components/codeBlock/code-blocks.module.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss index 9254e09ae72aad..a245dbefce7438 100644 --- a/src/components/codeBlock/code-blocks.module.scss +++ b/src/components/codeBlock/code-blocks.module.scss @@ -21,6 +21,9 @@ margin: 0 0 1rem; } + /** + * Shift padding on code diffs, so the background highlight covers the whole line + */ pre[class^='language-']:has(:global(.code-diff)) { padding-right: 0; @@ -73,6 +76,7 @@ /* Diff highlighting, classes provided by rehype-prism-plus */ /* Set inserted line (+) color */ + /* Move the margin left and adjust width so we can keep the parent padding */ :global(.diff-inserted), :global(.inserted) { background-color: rgba(16, 185, 129, 0.2); @@ -80,7 +84,9 @@ width: calc(100% + 12px); } + /* Diff highlighting, classes provided by rehype-prism-plus */ /* Set deleted line (-) color */ + /* Move the margin left and adjust width so we can keep the parent padding */ :global(.diff-deleted), :global(.deleted) { background-color: rgba(239, 68, 68, 0.2);