Move notebook markdown styles and shadow root to markdown-it extension

2025-12-24 20:26:08 +00:00 · 2021-06-08 13:08:44 -07:00
parent 078acba108
commit 30ed48f190
3 changed files with 145 additions and 152 deletions
--- a/extensions/markdown-language-features/notebook/index.ts
+++ b/extensions/markdown-language-features/notebook/index.ts
@@ -10,15 +10,151 @@ export function activate() {
 		html: true
 	});

+	const style = document.createElement('style');
+	style.classList.add('markdown-style');
+	style.textContent = `
+		img {
+			max-width: 100%;
+			max-height: 100%;
+		}
+
+		a {
+			text-decoration: none;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+
+		a:focus,
+		input:focus,
+		select:focus,
+		textarea:focus {
+			outline: 1px solid -webkit-focus-ring-color;
+			outline-offset: -1px;
+		}
+
+		hr {
+			border: 0;
+			height: 2px;
+			border-bottom: 2px solid;
+		}
+
+		h1 {
+			font-size: 26px;
+			line-height: 31px;
+			margin: 0;
+			margin-bottom: 13px;
+		}
+
+		h2 {
+			font-size: 19px;
+			margin: 0;
+			margin-bottom: 10px;
+		}
+
+		h1,
+		h2,
+		h3 {
+			font-weight: normal;
+		}
+
+		div {
+			width: 100%;
+		}
+
+		/* Adjust margin of first item in markdown cell */
+		*:first-child {
+			margin-top: 0px;
+		}
+
+		/* h1 tags don't need top margin */
+		h1:first-child {
+			margin-top: 0;
+		}
+
+		/* Removes bottom margin when only one item exists in markdown cell */
+		*:only-child,
+		*:last-child {
+			margin-bottom: 0;
+			padding-bottom: 0;
+		}
+
+		/* makes all markdown cells consistent */
+		div {
+			min-height: var(--notebook-markdown-min-height);
+		}
+
+		table {
+			border-collapse: collapse;
+			border-spacing: 0;
+		}
+
+		table th,
+		table td {
+			border: 1px solid;
+		}
+
+		table > thead > tr > th {
+			text-align: left;
+			border-bottom: 1px solid;
+		}
+
+		table > thead > tr > th,
+		table > thead > tr > td,
+		table > tbody > tr > th,
+		table > tbody > tr > td {
+			padding: 5px 10px;
+		}
+
+		table > tbody > tr + tr > td {
+			border-top: 1px solid;
+		}
+
+		blockquote {
+			margin: 0 7px 0 5px;
+			padding: 0 16px 0 10px;
+			border-left-width: 5px;
+			border-left-style: solid;
+		}
+
+		code,
+		.code {
+			font-size: 1em;
+			line-height: 1.357em;
+		}
+
+		.code {
+			white-space: pre-wrap;
+		}
+	`;
+	document.head.append(style);
+
 	return {
 		renderOutputItem: (outputInfo: { text(): string }, element: HTMLElement) => {
-			const rendered = markdownIt.render(outputInfo.text());
-			element.innerHTML = rendered;
+			let previewNode: HTMLElement;
+			if (!element.shadowRoot) {
+				const previewRoot = element.attachShadow({ mode: 'open' });

-			// Insert styles into markdown preview shadow dom so that they are applied
-			for (const markdownStyleNode of document.getElementsByClassName('markdown-style')) {
-				element.insertAdjacentElement('beforebegin', markdownStyleNode.cloneNode(true) as Element);
+				// Insert styles into markdown preview shadow dom so that they are applied.
+				// First add default webview style
+				const defaultStyles = document.getElementById('_defaultStyles') as HTMLStyleElement;
+				previewRoot.appendChild(defaultStyles.cloneNode(true));
+
+				// And then contributed styles
+				for (const markdownStyleNode of document.getElementsByClassName('markdown-style')) {
+					previewRoot.appendChild(markdownStyleNode.cloneNode(true));
+				}
+
+				previewNode = document.createElement('div');
+				previewNode.id = 'preview';
+				previewRoot.appendChild(previewNode);
+			} else {
+				previewNode = element.shadowRoot.getElementById('preview')!;
 			}
+
+			const rendered = markdownIt.render(outputInfo.text());
+			previewNode.innerHTML = rendered;
 		},
 		extendMarkdownIt: (f: (md: typeof markdownIt) => void) => {
 			f(markdownIt);