Merge pull request #540 from juliahermak/feat/beautiful-code-markdown

feat: beautiful code markdown
Adamant-im · Nov 3, 2023 · 1e39153 · 1e39153
2 parents 4093d20 + ac06c1b
commit 1e39153
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 21 deletions.
diff --git a/src/assets/styles/components/_chat.scss b/src/assets/styles/components/_chat.scss
@@ -196,19 +196,14 @@ $scroll-bar-width: 4px;
     word-wrap: break-word;
 
     code {
-      line-height: 1rem;
-      color: #2e7eed;
       font-weight: inherit;
-      font-size: 12px;
-      padding: 8px;
-      margin-bottom: 8px;
-      tab-size: 4;
-      border-radius: 4px;
-      border-style: solid;
-      border-width: 1px;
-      border-color: rgb(224, 224, 224);
+      font-size: 14px;
+      padding: 2px 4px;
+      border-radius: 6px;
       overflow-x: auto;
       max-width: 100%;
+      tab-size: 4;
+      line-height: 24px;
     }
 
     code:before {
@@ -236,15 +231,12 @@ $scroll-bar-width: 4px;
       padding: 8px;
       margin-bottom: 8px;
       tab-size: 4;
-      border-radius: 4px;
-      border-style: solid;
-      border-width: 1px;
+      border-radius: 6px;
       overflow-x: auto;
       max-width: 100%;
-      border-color: rgb(224, 224, 224);
 
-      code:before {
-        content: '';
+      code {
+        padding: 0px;
       }
     }
   }
@@ -444,6 +436,12 @@ $scroll-bar-width: 4px;
         color: map-get($blue, 'base');
       }
 
+      code {
+        background-color: map-get($grey, 'lighten-4');
+        color: map-get($grey, 'darken-3');
+        border-color: map-get($grey, 'lighten-2');
+      }
+
       pre {
         background-color: map-get($grey, 'lighten-4');
         color: map-get($grey, 'darken-3');
@@ -537,10 +535,20 @@ $scroll-bar-width: 4px;
       a {
         color: map-get($blue, 'lighten-2');
       }
+
+      code {
+        color: map-get($shades, 'white');
+        border-color: map-get($grey, 'darken-2');
+        background-color: map-get($adm-colors, 'secondary2-slightly-transparent');
+      }
       pre {
-        background-color: map-get($grey, 'darken-4');
         color: inherit;
         border-color: map-get($grey, 'darken-2');
+        background-color: map-get($adm-colors, 'secondary2-slightly-transparent');
+
+        code {
+          background-color: transparent;
+        }
       }
     }
 

diff --git a/src/lib/markdown.js b/src/lib/markdown.js
@@ -56,11 +56,8 @@ export function renderMarkdown (text = '') {
  * @returns {string} resulting clear text of the first line
  */
 export function removeFormats (text = '') {
-  // get first line
-  const line = /^([^\n]*)\n?/.exec(text)[1]
-
   const node = document.createElement('div')
-  node.innerHTML = marked(DOMPurify.sanitize(line), { renderer })
+  node.innerHTML = marked(DOMPurify.sanitize(text), { renderer })
 
   return node.textContent || node.innerText || ''
 }