diff --git a/plugin/core/views.py b/plugin/core/views.py
index 115d70ceb..2f2bec8ca 100644
--- a/plugin/core/views.py
+++ b/plugin/core/views.py
@@ -980,39 +980,33 @@ def _format_diagnostic_related_info(
     )
 
 
-def _with_color(text: str, hexcolor: str) -> str:
-    return '<span style="color: {};">{}</span>'.format(hexcolor, text2html(text))
+def _html_element(name: str, text: str, class_name: Optional[str] = None, escape: bool = True) -> str:
+    return '<{0}{2}>{1}</{0}>'.format(
+        name,
+        text2html(text) if escape else text,
+        ' class="{}"'.format(text2html(class_name)) if class_name else ''
+    )
 
 
 def format_diagnostic_for_html(config: ClientConfig, diagnostic: Diagnostic, base_dir: Optional[str] = None) -> str:
-    formatted = [
-        '<pre class="',
-        DIAGNOSTIC_SEVERITY[diagnostic_severity(diagnostic) - 1][1],
-        '">',
-        text2html(diagnostic["message"])
-    ]
+    html = _html_element('span', diagnostic["message"])
     code = diagnostic.get("code")
     source = diagnostic.get("source")
     if source or code is not None:
-        formatted.append(" ")
-    if source:
-        formatted.append(_with_color(source, "color(var(--foreground) alpha(0.6))"))
-    if code is not None:
-        formatted.append(_with_color("(", "color(var(--foreground) alpha(0.6))"))
-        code_description = diagnostic.get("codeDescription")
-        if code_description:
-            formatted.append(make_link(code_description["href"], str(code)))
-        else:
-            formatted.append(_with_color(str(code), "color(var(--foreground) alpha(0.6))"))
-        formatted.append(_with_color(")", "color(var(--foreground) alpha(0.6))"))
+        meta_info = ""
+        if source:
+            meta_info += text2html(source)
+        if code is not None:
+            code_description = diagnostic.get("codeDescription")
+            meta_info += "({})".format(
+                make_link(code_description["href"], str(code)) if code_description else text2html(str(code)))
+        html += " " + _html_element("span", meta_info, class_name="color-muted", escape=False)
     related_infos = diagnostic.get("relatedInformation")
     if related_infos:
-        formatted.append('<pre class="related_info">')
-        formatted.append("<br>".join(_format_diagnostic_related_info(config, info, base_dir)
-                                     for info in related_infos))
-        formatted.append("</pre>")
-    formatted.append("</pre>")
-    return "".join(formatted)
+        info = "<br>".join(_format_diagnostic_related_info(config, info, base_dir) for info in related_infos)
+        html += '<br>' + _html_element("pre", info, class_name="related_info", escape=False)
+    severity_class = DIAGNOSTIC_SEVERITY[diagnostic_severity(diagnostic) - 1][1]
+    return _html_element("pre", html, class_name=severity_class, escape=False)
 
 
 def format_code_actions_for_quick_panel(
diff --git a/plugin/goto_diagnostic.py b/plugin/goto_diagnostic.py
index 20522d01b..60c4849be 100644
--- a/plugin/goto_diagnostic.py
+++ b/plugin/goto_diagnostic.py
@@ -282,7 +282,7 @@ def preview(self, value: Optional[Tuple[int, Diagnostic]]) -> Union[str, sublime
         if scheme == "file":
             self._preview = open_location(session, self._get_location(diagnostic), flags=sublime.TRANSIENT)
             base_dir = project_base_dir(map(Path, self.window.folders()), Path(path))
-        return diagnostic_html(self.view, session.config, truncate_message(diagnostic), base_dir)
+        return diagnostic_html(session.config, truncate_message(diagnostic), base_dir)
 
     def _get_location(self, diagnostic: Diagnostic) -> Location:
         return diagnostic_location(self.parsed_uri, diagnostic)
@@ -301,8 +301,7 @@ def open_location(session: Session, location: Location, flags: int = 0, group: i
     return session.window.open_file(file_name, flags=flags | sublime.ENCODED_POSITION, group=group)
 
 
-def diagnostic_html(view: sublime.View, config: ClientConfig, diagnostic: Diagnostic,
-                    base_dir: Optional[Path]) -> sublime.Html:
+def diagnostic_html(config: ClientConfig, diagnostic: Diagnostic, base_dir: Optional[Path]) -> sublime.Html:
     content = format_diagnostic_for_html(
         config, truncate_message(diagnostic), None if base_dir is None else str(base_dir))
     return sublime.Html('<style>{}</style><div class="diagnostics {}">{}</div>'.format(
diff --git a/popups.css b/popups.css
index f838a57b8..592044102 100644
--- a/popups.css
+++ b/popups.css
@@ -23,7 +23,7 @@
     border-radius: 0;
 }
 .color-muted {
-    color: color(var(--foreground) alpha(0.50));
+    color: color(var(--foreground) alpha(0.6));
 }
 .diagnostics {
     margin-bottom: 0.5rem;