diff --git a/src/components/codeBlock/code-blocks.module.scss b/src/components/codeBlock/code-blocks.module.scss
index aebf464edcac6..cae98176e9424 100644
--- a/src/components/codeBlock/code-blocks.module.scss
+++ b/src/components/codeBlock/code-blocks.module.scss
@@ -57,6 +57,10 @@
min-width: 100%;
}
+ :global(.code-highlight > .highlight-block:last-child) {
+ margin-bottom: -10px;
+ }
+
:global(.code-line) {
display: block;
float: left;
@@ -74,7 +78,6 @@
}
}
-
/* 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 */
diff --git a/src/components/codeHighlights/codeHighlights.tsx b/src/components/codeHighlights/codeHighlights.tsx
index c101d65bf934b..b50355f8ef2d0 100644
--- a/src/components/codeHighlights/codeHighlights.tsx
+++ b/src/components/codeHighlights/codeHighlights.tsx
@@ -18,7 +18,7 @@ export function makeHighlightBlocks(
let highlightedLineElements: ReactElement[] = [];
let highlightElementGroupCounter = 0;
- return items.reduce((arr: ChildrenItem[], child) => {
+ return items.reduce((arr: ChildrenItem[], child, index) => {
if (typeof child !== 'object') {
arr.push(child);
return arr;
@@ -42,7 +42,17 @@ export function makeHighlightBlocks(
if (isHighlightedLine) {
highlightedLineElements.push(element);
+
+ // If it's the last line that's highlighted, push it
+ if (index === items.length - 1) {
+ arr.push(
+
+ {...highlightedLineElements}
+
+ );
+ }
} else {
+ // Check for an opened highlight group before pushing the new line
if (highlightedLineElements.length > 0) {
arr.push(
@@ -52,6 +62,7 @@ export function makeHighlightBlocks(
highlightedLineElements = [];
++highlightElementGroupCounter;
}
+
arr.push(child);
}
@@ -98,7 +109,7 @@ export function HighlightBlock({
}
return (
-
+
{children}
{showCopyButton && !copied && (