Generate DOM for markdown links in help text

lighthouse-core/report/v2/report-renderer.js

@@ -107,8 +107,8 @@ window.ReportRenderer = class ReportRenderer {
 
     const column = element.appendChild(this._createElement('div', 'lighthouse-score__text'));
     column.appendChild(this._createElement('div', 'lighthouse-score__title')).textContent = title;
-    column.appendChild(
-      this._createElement('div', 'lighthouse-score__description')).textContent = description;
+    column.appendChild(this._createElement('div', 'lighthouse-score__description'))
+          .appendChild(this._convertMarkdownLinksToElement(description));
 
     return element;
   }
@@ -130,6 +130,36 @@ window.ReportRenderer = class ReportRenderer {
     }
   }
 
+  /**
+   * @param {string} text
+   * @return {!Element}
+   */
+  _convertMarkdownLinksToElement(text) {
+    const element = this._createElement('span');
+
+    // Split on markdown links (e.g. [some link](https://...)).
+    const parts = text.split(/(\[(.*?)\]\((https?:\/\/.*?)\))/g);
+
+    while (parts.length) {
+      // Remove the same number of elements as there are capture groups.
+      // eslint-disable-next-line no-unused-vars
+      const [preambleText, fullMarkdownLink, linkText, linkHref] = parts.splice(0, 4);
+      element.appendChild(document.createTextNode(preambleText));
+
+      // Append link if there are any.
+      if (linkText && linkHref) {
+        const a = this._createElement('a');
+        a.rel = 'noopener';
+        a.target = '_blank';
+        a.href = linkHref;
+        a.textContent = linkText;
+        element.appendChild(a);
+      }
+    }
+
+    return element;
+  }
+
   /**
    * @param {!DetailsJSON} text
    * @return {!Element}