feat(lsp): syntax-highlight code in the code-hints documentation popup

Run completion documentation through highlight.js (same path as the hover
popup) so fenced code blocks render as colored code instead of flat
monospace. Extract the theme-aware hljs token colours into a shared
.lsp-hover-quickview/.lsp-hint-doc-popup rule used by both popups.

Author: abose

src/languageTools/DefaultProviders.js

@@ -57,6 +57,30 @@ define(function (require, exports, module) {
         }
     }
 
+    // Syntax-highlight fenced code blocks (the signature/examples in completion docs) with the
+    // globally available highlight.js, so they read like code instead of flat monospace. Theme-aware
+    // token colours live in src/styles/brackets.less (.lsp-hint-doc-popup, shared with the hover).
+    function _highlightCode(html) {
+        var hljs = (typeof Phoenix !== "undefined") && Phoenix.libs && Phoenix.libs.hljs;
+        if (!hljs) {
+            return html;
+        }
+        var $wrap = $("<div>").html(html);
+        $wrap.find("pre > code").each(function () {
+            var $code = $(this);
+            var match = ($code.attr("class") || "").match(/language-([\w-]+)/);
+            var lang = match && match[1];
+            if (lang && hljs.getLanguage(lang)) {
+                try {
+                    $code.html(hljs.highlight($code.text(), { language: lang }).value).addClass("hljs");
+                } catch (e) {
+                    // leave the block unhighlighted on any hljs error
+                }
+            }
+        });
+        return $wrap.html();
+    }
+
     function _docToHtml(documentation) {
         if (!documentation) {
             return "";
@@ -66,7 +90,7 @@ define(function (require, exports, module) {
             return "";
         }
         try {
-            return marked.parse(md);
+            return _highlightCode(marked.parse(md));
         } catch (e) {
             return _.escape(md);
         }

src/styles/brackets.less

@@ -2269,28 +2269,8 @@ a, img {
         }
     }
 
-    // highlight.js token colours for the signature block. The app's global hljs theme is
-    // github-dark (locked, for the always-dark sidebar); override it within the hover so the
-    // signature reads well on the light theme too. The chip background follows the editor theme,
-    // so we use a GitHub-light palette in light mode and a GitHub-dark palette in dark mode.
-    pre code.hljs { background: none; }
-    .hljs-keyword, .hljs-literal, .hljs-doctag, .hljs-meta .hljs-keyword { color: #cf222e; }
-    .hljs-string, .hljs-regexp, .hljs-meta-string { color: #0a3069; }
-    .hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section { color: #6639ba; }
-    .hljs-built_in, .hljs-type, .hljs-class .hljs-title { color: #953800; }
-    .hljs-number, .hljs-symbol, .hljs-bullet { color: #0550ae; }
-    .hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-params { color: @bc-text-emphasized; }
-    .hljs-comment, .hljs-quote, .hljs-meta { color: #6e7781; }
-
-    .dark & {
-        .hljs-keyword, .hljs-literal, .hljs-doctag, .hljs-meta .hljs-keyword { color: #ff7b72; }
-        .hljs-string, .hljs-regexp, .hljs-meta-string { color: #a5d6ff; }
-        .hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section { color: #d2a8ff; }
-        .hljs-built_in, .hljs-type, .hljs-class .hljs-title { color: #ffa657; }
-        .hljs-number, .hljs-symbol, .hljs-bullet { color: #79c0ff; }
-        .hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-params { color: @dark-bc-text-emphasized; }
-        .hljs-comment, .hljs-quote, .hljs-meta { color: #8b949e; }
-    }
+    // hljs token colours for the signature block are shared with the code-hint doc popup -
+    // see the `.lsp-hover-quickview, .lsp-hint-doc-popup` rule below.
 
     // Inline code: parameter names, types, identifiers.
     code {
@@ -2433,6 +2413,31 @@ a, img {
 }
 
 // LSP code-hint documentation popup (shown beside the code hint list)
+// Shared highlight.js token colours for both LSP popups (hover signature + code-hint docs). The
+// app's global hljs theme is github-dark (locked, for the always-dark sidebar); these override it
+// so highlighted code reads well on the light theme too - GitHub-light palette in light mode,
+// GitHub-dark in dark mode. `&` is the popup selector, so `.dark &` scopes both correctly.
+.lsp-hover-quickview, .lsp-hint-doc-popup {
+    pre code.hljs { background: none; }
+    .hljs-keyword, .hljs-literal, .hljs-doctag, .hljs-meta .hljs-keyword { color: #cf222e; }
+    .hljs-string, .hljs-regexp, .hljs-meta-string { color: #0a3069; }
+    .hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section { color: #6639ba; }
+    .hljs-built_in, .hljs-type, .hljs-class .hljs-title { color: #953800; }
+    .hljs-number, .hljs-symbol, .hljs-bullet { color: #0550ae; }
+    .hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-params { color: @bc-text-emphasized; }
+    .hljs-comment, .hljs-quote, .hljs-meta { color: #6e7781; }
+
+    .dark & {
+        .hljs-keyword, .hljs-literal, .hljs-doctag, .hljs-meta .hljs-keyword { color: #ff7b72; }
+        .hljs-string, .hljs-regexp, .hljs-meta-string { color: #a5d6ff; }
+        .hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-section { color: #d2a8ff; }
+        .hljs-built_in, .hljs-type, .hljs-class .hljs-title { color: #ffa657; }
+        .hljs-number, .hljs-symbol, .hljs-bullet { color: #79c0ff; }
+        .hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-params { color: @dark-bc-text-emphasized; }
+        .hljs-comment, .hljs-quote, .hljs-meta { color: #8b949e; }
+    }
+}
+
 .lsp-hint-doc-popup {
     display: none;
     position: fixed;