Adds more styling to markdown elements (#5904)

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -64,6 +64,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
           padding: 8px;
           max-width: 1024px;
         }
+        ha-markdown {
+          padding: 16px;
+        }
       `,
     ];
   }

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -630,14 +630,10 @@ class HassioAddonInfo extends LitElement {
         .right {
           float: right;
         }
-        ha-markdown img {
-          max-width: 100%;
-        }
         protection-enable mwc-button {
           --mdc-theme-primary: white;
         }
-        .description a,
+        .description a {
-        ha-markdown a {
           color: var(--primary-color);
         }
         .red {
@@ -675,6 +671,9 @@ class HassioAddonInfo extends LitElement {
           text-decoration: underline;
           cursor: pointer;
         }
+        ha-markdown {
+          padding: 16px;
+        }
       `,
     ];
   }

hassio/src/dialogs/markdown/dialog-hassio-markdown.ts

@@ -90,6 +90,9 @@ class HassioMarkdownDialog extends LitElement {
             color: var(--text-primary-color);
             background-color: var(--primary-color);
           }
+          ha-markdown {
+            padding: 16px;
+          }
         }
       `,
     ];

src/components/ha-markdown-element.ts

@@ -0,0 +1,71 @@
+import { customElement, property, UpdatingElement } from "lit-element";
+import { fireEvent } from "../common/dom/fire_event";
+import { renderMarkdown } from "../resources/render-markdown";
+
+@customElement("ha-markdown-element")
+class HaMarkdownElement extends UpdatingElement {
+  @property() public content?;
+
+  @property({ type: Boolean }) public allowSvg = false;
+
+  @property({ type: Boolean }) public breaks = false;
+
+  protected update(changedProps) {
+    super.update(changedProps);
+    if (this.content !== undefined) {
+    	this._render();
+    }
+  }
+
+  private async _render() {
+    this.innerHTML = await renderMarkdown(
+      this.content,
+      {
+        breaks: this.breaks,
+        gfm: true,
+        tables: true,
+      },
+      {
+        allowSvg: this.allowSvg,
+      }
+    );
+
+    this._resize();
+
+    const walker = document.createTreeWalker(
+      this,
+      1 /* SHOW_ELEMENT */,
+      null,
+      false
+    );
+
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+
+      // Open external links in a new window
+      if (
+        node instanceof HTMLAnchorElement &&
+        node.host !== document.location.host
+      ) {
+        node.target = "_blank";
+        node.rel = "noreferrer";
+
+        // protect referrer on external links and deny window.opener access for security reasons
+        // (see https://mathiasbynens.github.io/rel-noopener/)
+        node.rel = "noreferrer noopener";
+
+        // Fire a resize event when images loaded to notify content resized
+      } else if (node instanceof HTMLImageElement) {
+        node.addEventListener("load", this._resize);
+      }
+    }
+  }
+
+  private _resize = () => fireEvent(this, "iron-resize");
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-markdown-element": HaMarkdownElement;
+  }
+}

src/components/ha-markdown.ts

@@ -1,65 +1,80 @@
-import { customElement, property, UpdatingElement } from "lit-element";
+import {
-import { fireEvent } from "../common/dom/fire_event";
+  css,
-import { renderMarkdown } from "../resources/render-markdown";
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+
+import "./ha-markdown-element";
 
 @customElement("ha-markdown")
-class HaMarkdown extends UpdatingElement {
+class HaMarkdown extends LitElement {
-  @property() public content = "";
+  @property() public content?;
 
   @property({ type: Boolean }) public allowSvg = false;
 
   @property({ type: Boolean }) public breaks = false;
 
-  protected update(changedProps) {
+  protected render(): TemplateResult {
-    super.update(changedProps);
+    if (!this.content) {
-    this._render();
+      return html``;
-  }
-
-  private async _render() {
-    this.innerHTML = await renderMarkdown(
-      this.content,
-      {
-        breaks: this.breaks,
-        gfm: true,
-        tables: true,
-      },
-      {
-        allowSvg: this.allowSvg,
-      }
-    );
-
-    this._resize();
-
-    const walker = document.createTreeWalker(
-      this,
-      1 /* SHOW_ELEMENT */,
-      null,
-      false
-    );
-
-    while (walker.nextNode()) {
-      const node = walker.currentNode;
-
-      // Open external links in a new window
-      if (
-        node instanceof HTMLAnchorElement &&
-        node.host !== document.location.host
-      ) {
-        node.target = "_blank";
-        node.rel = "noreferrer";
-
-        // protect referrer on external links and deny window.opener access for security reasons
-        // (see https://mathiasbynens.github.io/rel-noopener/)
-        node.rel = "noreferrer noopener";
-
-        // Fire a resize event when images loaded to notify content resized
-      } else if (node instanceof HTMLImageElement) {
-        node.addEventListener("load", this._resize);
-      }
     }
+
+    return html`<ha-markdown-element
+      .content=${this.content}
+      .allowSvg=${this.allowSvg}
+      .breaks=${this.breaks}
+    ></ha-markdown-element>`;
   }
 
-  private _resize = () => fireEvent(this, "iron-resize");
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+      }
+      ha-markdown-element {
+        -ms-user-select: text;
+        -webkit-user-select: text;
+        -moz-user-select: text;
+      }
+      ha-markdown-element > *:first-child {
+        margin-top: 0;
+      }
+      ha-markdown-element > *:last-child {
+        margin-bottom: 0;
+      }
+      ha-markdown-element a {
+        color: var(--primary-color);
+      }
+      ha-markdown-element img {
+        max-width: 100%;
+      }
+      ha-markdown-element code,
+      pre {
+        background-color: var(--markdown-code-background-color, #f6f8fa);
+        border-radius: 3px;
+      }
+      ha-markdown-element code {
+        font-size: 85%;
+        padding: 0.2em 0.4em;
+      }
+      ha-markdown-element pre code {
+        padding: 0;
+      }
+      ha-markdown-element pre {
+        padding: 16px;
+        overflow: auto;
+        line-height: 1.45;
+      }
+      ha-markdown-element h2 {
+        font-size: 1.5em !important;
+        font-weight: bold !important;
+      }
+    `;
+  }
 }
 
 declare global {

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -80,9 +80,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       <ha-card .header="${this._config.title}">
         <ha-markdown
           breaks
-          class="markdown ${classMap({
+          class=${classMap({
             "no-header": !this._config.title,
-          })}"
+          })}
           .content="${this._content}"
         ></ha-markdown>
       </ha-card>
@@ -162,27 +162,11 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
   static get styles(): CSSResult {
     return css`
       ha-markdown {
-        display: block;
         padding: 0 16px 16px;
-        -ms-user-select: initial;
-        -webkit-user-select: initial;
-        -moz-user-select: initial;
       }
-      .markdown.no-header {
+      ha-markdown.no-header {
         padding-top: 16px;
       }
-      ha-markdown > *:first-child {
-        margin-top: 0;
-      }
-      ha-markdown > *:last-child {
-        margin-bottom: 0;
-      }
-      ha-markdown a {
-        color: var(--primary-color);
-      }
-      ha-markdown img {
-        max-width: 100%;
-      }
     `;
   }
 }