Fix styling for webkit documentation (emacs-lsp#645)

zeronone · web-flow · commit 177c31e98234 · 2021-08-02T00:05:21.000-03:00
diff --git a/lsp-ui-doc.el b/lsp-ui-doc.el
@@ -113,6 +113,11 @@ This only takes effect when `lsp-ui-doc-position' is 'top or 'bottom."
   :type 'integer
   :group 'lsp-ui-doc)
 
+(defcustom lsp-ui-doc-webkit-max-width-px 600
+  "Maximum width in pixels for the webkit frame."
+  :type 'integer
+  :group 'lsp-ui-doc)
+
 (defcustom lsp-ui-doc-max-height 13
   "Maximum number of lines in the frame."
   :type 'integer
@@ -305,7 +310,9 @@ Because some variables are buffer local.")
           (markdown-hr-display-char nil))
      (cond
       (lsp-ui-doc-use-webkit
-       (if (and language (not (string= "text" language)))
+       (if (and language
+                (not (string= "text" language))
+                (not (string= lsp/markup-kind-markdown language)))
            (format "```%s\n%s\n```" language string)
          string))
       ;; For other programming languages
@@ -364,9 +371,16 @@ We don't extract the string that `lps-line' is already displaying."
         (xwidget-webkit-mode)
         (xwidget-webkit-goto-uri (xwidget-at 1)
                                  lsp-ui-doc-webkit-client-path)
+        (lsp-ui-doc--webkit-set-width)
         (lsp-ui-doc--webkit-set-background)
         (lsp-ui-doc--webkit-set-foreground)))))
 
+(defun lsp-ui-doc--webkit-set-width ()
+  "Set webkit document max-width CSS property."
+  (lsp-ui-doc--webkit-execute-script
+   (format "document.documentElement.style.setProperty('--webkit-max-width-px', %d + 'px');"
+           lsp-ui-doc-webkit-max-width-px)))
+
 (defun lsp-ui-doc--webkit-set-background ()
   "Set background color of the WebKit widget."
   (lsp-ui-doc--webkit-execute-script
diff --git a/lsp-ui-doc.html b/lsp-ui-doc.html
@@ -7,13 +7,22 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
     <style>
+
+     :root {
+       --webkit-max-width-px: 600px;
+     }
+
      .markdown-body {
        box-sizing: border-box;
-       min-width: 400px;
-       max-width: 600px;
+       min-width: var(--webkit-max-width-px);
+       max-width: var(--webkit-max-width-px);
        margin: 0 auto;
        padding: 10px;
      }
+
+     .markdown-body pre code {
+       white-space: pre-wrap;
+     }
     </style>
   </head>
   <body>
