Merge pull request #16 from askorama/feat/ORM-1559-markdown-styling

fix: markdown styling and syntax highlighter theme
oramasearch · Jul 26, 2024 · 72d7421 · 72d7421
2 parents 7b957d8 + b7dde8d
commit 72d7421
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 27 deletions.
diff --git a/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx b/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx
@@ -53,41 +53,41 @@ Ready to start writing?  Either start changing stuff on the left or
 [Markdown]: http://daringfireball.net/projects/markdown/
 
 \`\`\`javascript
-  function helloWorld() {
-    console.log('Hello World!')
-  }
+function helloWorld() {
+  console.log('Hello World!')
+}
 \`\`\`
 
 \`\`\`javascript
-  function helloWorld() {
-    console.log('Hello World!')
-  }
+function helloWorld() {
+  console.log('Hello World!')
+}
 \`\`\`
 
 \`\`\`typescript
-  function helloWorld() : void {
-    console.log('Hello World!')
-  }
+function helloWorld() : void {
+  console.log('Hello World!')
+}
 \`\`\`
 
 \`\`\`cpp
-  for(int i = 0; i < 10; i++) {
-    cout << "Hello World!" << endl;
-  }
+for(int i = 0; i < 10; i++) {
+  cout << "Hello World!" << endl;
+}
 \`\`\`
 
 \`\`\`c
-  for(int i = 0; i < 10; i++) {
-    cout << "Hello World!" << endl;
-  }
+for(int i = 0; i < 10; i++) {
+  cout << "Hello World!" << endl;
+}
 \`\`\`
 
 \`\`\`java
-  class HelloWorld {
-    public static void main(String[] args) {
-      System.out.println("Hello World!");
-    }
+class HelloWorld {
+  public static void main(String[] args) {
+    System.out.println("Hello World!");
   }
+}
 \`\`\`
 `
 

diff --git a/...a-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss b/...a-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.scss
@@ -1,19 +1,57 @@
+:host {
+  color: var(--text-color-secondary, text-color('secondary'));
+}
+
+p,
+a,
+li {
+  font-size: var(--font-size-md, $font-size-md);
+  line-height: var(--font-line-height-md, $font-line-height-m);
+}
+
+ul,
+ol,
+blockquote {
+  margin: 0 0 var(--spacing-xs, $spacing-xs) var(--spacing-xs, $spacing-xs);
+  padding: 0 0 0 var(--spacing-xs, $spacing-xs);
+  padding-inline-start: var(--spacing-l, $spacing-l);
+}
+
+blockquote {
+  border-left: var(--spacing-xs, $spacing-xs) solid var(--border-color-primary, border-color('primary'));
+}
+
+p > code {
+  margin: 0 var(--spacing-xs, $spacing-xs);
+}
+
 pre > code {
   position: relative;
 }
 
-:host {
-  color: var(--text-color-secondary, text-color(secondary));
+a {
+  color: var(--text-color-primary, text-color('primary'));
+  font-weight: bold;
+  text-decoration: underline;
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.orama-markdown-pre {
+  position: relative;
 }
 
 .orama-markdown-code {
-  border-radius: 0 0 var(--radius-s, $radius-s) var(--radius-s, $radius-s);
+  border-radius: var(--radius-s, $radius-s);
 }
 
 .orama-markdown-code-title {
+  display: block;
   font-size: var(--font-size-xxs, $font-size-xxs);
-  background-color: var(--background-color-reverse, background-color(reverse));
-  color: var(--text-color-reverse, text-color(reverse));
-  padding: var(--spacing-xs, $spacing-xs) var(--spacing-m, $spacing-m);
-  border-radius: var(--radius-s, $radius-s) var(--radius-s, $radius-s) 0 0;
+  color: var(--text-color-primary, text-color('primary'));
+  padding: var(--spacing-s, $spacing-s) 0;
+  opacity: 0.5;
 }
diff --git a/...ma-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/...ma-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx
@@ -166,7 +166,7 @@ export class OramaMarkdown {
         evaluate if we need this inside our codebase or keep it in a CDN */}
         <link
           rel="stylesheet"
-          href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/night-owl.min.css"
+          href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/atom-one-dark.min.css"
         />
         <div
           ref={(ref) => {