Changelog css support

gitpod-io · Jul 14, 2022 · a11c8d4 · a11c8d4
1 parent e3ad31e
commit a11c8d4
Showing 1 changed file with 155 additions and 2 deletions.
diff --git a/src/releaseNote.ts b/src/releaseNote.ts
@@ -99,7 +99,20 @@ class ReleaseNotePanel {
 		}
 		const mdContent = await this.loadChangelog(date);
 		const html = await vscode.commands.executeCommand('markdown.api.render', mdContent) as string;
-		this.panel.webview.html = html;
+		this.panel.webview.html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gitpod Release Note</title>
+    <style>
+        ${DEFAULT_MARKDOWN_STYLES}
+    </style>
+</head>
+<body>
+    ${html}
+</body>
+</html>`;
 		if (!this.lastRead || date > this.lastRead) {
 			await this.context.globalState.update(LAST_READ_RELEASE_DATE, date);
 			this.lastRead = date;
@@ -161,4 +174,144 @@ class ReleaseNotePanel {
 			}
 		}
 	}
-}
+}
+
+// Align with https://github.com/gitpod-io/openvscode-server/blob/494f7eba3615344ee634e6bec0b20a1903e5881d/src/vs/workbench/contrib/markdown/browser/markdownDocumentRenderer.ts#L14
+export const DEFAULT_MARKDOWN_STYLES = `
+body {
+	padding: 10px 20px;
+	line-height: 22px;
+	max-width: 882px;
+	margin: 0 auto;
+}
+
+body *:last-child {
+	margin-bottom: 0;
+}
+
+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 {
+	padding-bottom: 0.3em;
+	line-height: 1.2;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+}
+
+h1, h2, h3 {
+	font-weight: normal;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+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-width: 1px;
+	border-top-style: solid;
+}
+
+blockquote {
+	margin: 0 7px 0 5px;
+	padding: 0 16px 0 10px;
+	border-left-width: 5px;
+	border-left-style: solid;
+}
+
+code {
+	font-family: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+}
+
+pre code {
+	font-family: var(--vscode-editor-font-family);
+	font-weight: var(--vscode-editor-font-weight);
+	font-size: var(--vscode-editor-font-size);
+	line-height: 1.5;
+}
+
+code > div {
+	padding: 16px;
+	border-radius: 3px;
+	overflow: auto;
+}
+
+.monaco-tokenized-source {
+	white-space: pre;
+}
+
+/** Theming */
+
+.vscode-light code > div {
+	background-color: rgba(220, 220, 220, 0.4);
+}
+
+.vscode-dark code > div {
+	background-color: rgba(10, 10, 10, 0.4);
+}
+
+.vscode-high-contrast code > div {
+	background-color: var(--vscode-textCodeBlock-background);
+}
+
+.vscode-high-contrast h1 {
+	border-color: rgb(0, 0, 0);
+}
+
+.vscode-light table > thead > tr > th {
+	border-color: rgba(0, 0, 0, 0.69);
+}
+
+.vscode-dark table > thead > tr > th {
+	border-color: rgba(255, 255, 255, 0.69);
+}
+
+.vscode-light h1,
+.vscode-light hr,
+.vscode-light table > tbody > tr + tr > td {
+	border-color: rgba(0, 0, 0, 0.18);
+}
+
+.vscode-dark h1,
+.vscode-dark hr,
+.vscode-dark table > tbody > tr + tr > td {
+	border-color: rgba(255, 255, 255, 0.18);
+}
+
+`;