diff --git a/src/releaseNote.ts b/src/releaseNote.ts
index 5079556a..7e7b35b6 100644
--- 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 = `
+
+
+
+
+ Gitpod Release Note
+
+
+
+ ${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 {
}
}
}
-}
\ No newline at end of file
+}
+
+// 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);
+}
+
+`;