diff --git a/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffEditor.ts b/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffEditor.ts
index 639e2fcd80d..45f4aa68cfe 100644
--- a/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffEditor.ts
+++ b/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffEditor.ts
@@ -929,9 +929,9 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
 
 	deltaCellOutputContainerClassNames(diffSide: DiffSide, cellId: string, added: string[], removed: string[]) {
 		if (diffSide === DiffSide.Original) {
-			this._originalWebview?.deltaCellContainerClassNames(cellId, added, removed);
+			this._originalWebview?.deltaCellOutputContainerClassNames(cellId, added, removed);
 		} else {
-			this._modifiedWebview?.deltaCellContainerClassNames(cellId, added, removed);
+			this._modifiedWebview?.deltaCellOutputContainerClassNames(cellId, added, removed);
 		}
 	}
 
diff --git a/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts b/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
index b37aaca062a..e89235ff0f4 100644
--- a/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
+++ b/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts
@@ -807,7 +807,7 @@ export interface INotebookEditorDelegate extends INotebookEditor {
 	 * Hide the inset in the webview layer without removing it
 	 */
 	hideInset(output: IDisplayOutputViewModel): void;
-	deltaCellContainerClassNames(cellId: string, added: string[], removed: string[]): void;
+	deltaCellContainerClassNames(cellId: string, added: string[], removed: string[], cellKind: CellKind): void;
 }
 
 export interface IActiveNotebookEditorDelegate extends INotebookEditorDelegate {
diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
index 9e0b6f8cf18..db11fe5dead 100644
--- a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
+++ b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
@@ -1617,21 +1617,21 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 		store.add(cell.onCellDecorationsChanged(e => {
 			e.added.forEach(options => {
 				if (options.className) {
-					this.deltaCellContainerClassNames(cell.id, [options.className], []);
+					this.deltaCellContainerClassNames(cell.id, [options.className], [], cell.cellKind);
 				}
 
 				if (options.outputClassName) {
-					this.deltaCellContainerClassNames(cell.id, [options.outputClassName], []);
+					this.deltaCellContainerClassNames(cell.id, [options.outputClassName], [], cell.cellKind);
 				}
 			});
 
 			e.removed.forEach(options => {
 				if (options.className) {
-					this.deltaCellContainerClassNames(cell.id, [], [options.className]);
+					this.deltaCellContainerClassNames(cell.id, [], [options.className], cell.cellKind);
 				}
 
 				if (options.outputClassName) {
-					this.deltaCellContainerClassNames(cell.id, [], [options.outputClassName]);
+					this.deltaCellContainerClassNames(cell.id, [], [options.outputClassName], cell.cellKind);
 				}
 			});
 		}));
@@ -2285,8 +2285,12 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditorD
 		return ret;
 	}
 
-	deltaCellContainerClassNames(cellId: string, added: string[], removed: string[]) {
-		this._webview?.deltaCellContainerClassNames(cellId, added, removed);
+	deltaCellContainerClassNames(cellId: string, added: string[], removed: string[], cellkind: CellKind): void {
+		if (cellkind === CellKind.Markup) {
+			this._webview?.deltaMarkupPreviewClassNames(cellId, added, removed);
+		} else {
+			this._webview?.deltaCellOutputContainerClassNames(cellId, added, removed);
+		}
 	}
 
 	changeModelDecorations<T>(callback: (changeAccessor: IModelDecorationsChangeAccessor) => T): T | null {
diff --git a/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDecorations.ts b/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDecorations.ts
index 9068b002c64..4ae7534705b 100644
--- a/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDecorations.ts
+++ b/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellDecorations.ts
@@ -72,11 +72,11 @@ export class CellDecorations extends CellContentPart {
 		this.currentCell.getCellDecorations().forEach(options => {
 			if (options.className && this.currentCell) {
 				this.rootContainer.classList.add(options.className);
-				this.notebookEditor.deltaCellContainerClassNames(this.currentCell.id, [options.className], []);
+				this.notebookEditor.deltaCellContainerClassNames(this.currentCell.id, [options.className], [], this.currentCell.cellKind);
 			}
 
 			if (options.outputClassName && this.currentCell) {
-				this.notebookEditor.deltaCellContainerClassNames(this.currentCell.id, [options.outputClassName], []);
+				this.notebookEditor.deltaCellContainerClassNames(this.currentCell.id, [options.outputClassName], [], this.currentCell.cellKind);
 			}
 		});
 	}
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
index 28c9dbf7774..b6c10143b39 100644
--- a/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
+++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts
@@ -1855,14 +1855,24 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Themable {
 	}
 
 
-	deltaCellContainerClassNames(cellId: string, added: string[], removed: string[]) {
+	deltaCellOutputContainerClassNames(cellId: string, added: string[], removed: string[]) {
 		this._sendMessageToWebview({
 			type: 'decorations',
 			cellId,
 			addedClassNames: added,
 			removedClassNames: removed
 		});
+	}
 
+	deltaMarkupPreviewClassNames(cellId: string, added: string[], removed: string[]) {
+		if (this.markupPreviewMapping.get(cellId)) {
+			this._sendMessageToWebview({
+				type: 'markupDecorations',
+				cellId,
+				addedClassNames: added,
+				removedClassNames: removed
+			});
+		}
 	}
 
 	updateOutputRenderers() {
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewMessages.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewMessages.ts
index 073737f5b79..26149b87ca1 100644
--- a/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewMessages.ts
+++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewMessages.ts
@@ -305,7 +305,7 @@ export interface IUpdateRenderersMessage {
 }
 
 export interface IUpdateDecorationsMessage {
-	readonly type: 'decorations';
+	readonly type: 'decorations' | 'markupDecorations';
 	readonly cellId: string;
 	readonly addedClassNames: readonly string[];
 	readonly removedClassNames: readonly string[];
diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts
index 5b7077bf1d1..ac3d98fd4e3 100644
--- a/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts
+++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts
@@ -1780,6 +1780,16 @@ async function webviewPreloads(ctx: PreloadContext) {
 				outputContainer?.classList.remove(...event.data.removedClassNames);
 				break;
 			}
+			case 'markupDecorations': {
+				const markupCell = window.document.getElementById(event.data.cellId);
+				// The cell may not have been added yet if it is out of view.
+				// Decorations will be added when the cell is shown.
+				if (markupCell) {
+					markupCell?.classList.add(...event.data.addedClassNames);
+					markupCell?.classList.remove(...event.data.removedClassNames);
+				}
+				break;
+			}
 			case 'customKernelMessage':
 				onDidReceiveKernelMessage.fire(event.data.message);
 				break;