diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss index 4cf169ac63be8..a245dbefce743 100644 --- a/src/components/codeBlock/code-blocks.module.scss +++ b/src/components/codeBlock/code-blocks.module.scss @@ -21,9 +21,15 @@ 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-left: 0; padding-right: 0; + + & :global(.token.operator) { + padding-right: 12px; + } } pre[class^='language-']:has(:global(.highlight-line)) { @@ -70,15 +76,22 @@ /* 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); + margin-left: -12px; + 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); + margin-left: -12px; + width: calc(100% + 12px); } }