diff --git a/packages/notebook/src/browser/view/notebook-markdown-cell-view.tsx b/packages/notebook/src/browser/view/notebook-markdown-cell-view.tsx
index 19b8148af05bb..e02c82c11db4d 100644
--- a/packages/notebook/src/browser/view/notebook-markdown-cell-view.tsx
+++ b/packages/notebook/src/browser/view/notebook-markdown-cell-view.tsx
@@ -61,18 +61,23 @@ function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel, n
return () => listener.dispose();
}, [editMode]);
- let markdownContent = React.useMemo(() => markdownRenderer.render(new MarkdownStringImpl(cell.source)).element.innerHTML, [cell, editMode]);
- if (markdownContent.length === 0) {
- markdownContent = `${nls.localizeByDefault('Empty markdown cell, double-click or press enter to edit.')}`;
+ let markdownContent: HTMLElement = React.useMemo(() => {
+ const markdownString = new MarkdownStringImpl(cell.source, { supportHtml: true, isTrusted: true });
+ return markdownRenderer.render(markdownString).element;
+ }, [cell, editMode]);
+
+ if (!markdownContent.hasChildNodes()) {
+ const italic = document.createElement('i');
+ italic.className = 'theia-notebook-empty-markdown';
+ italic.innerText = nls.localizeByDefault('Empty markdown cell, double-click or press enter to edit.');
+ italic.style.pointerEvents = 'none';
+ markdownContent = italic;
}
return editMode ?