refactor: code component for better visibility

apps/website/src/styles.scss

@@ -16,33 +16,3 @@
 .dark .base {
   background-image: url('/assets/images/looper-dark.svg');
 }
-
-* {
-  scrollbar-color: #d7d7d7 #fafafa;
-
-  .dark & {
-    scrollbar-color: #333 #080e29;
-  }
-}
-
-/* Chrome, Edge, and Safari */
-
-*::-webkit-scrollbar-track {
-  background: white;
-  border-radius: 5px;
-
-  .dark & {
-    background: #011627;
-  }
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: white;
-  border-radius: 14px;
-  border: 3px solid white;
-
-  .dark & {
-    background-color: #011627;
-    border: 3px solid #011627;
-  }
-}

libs/shared/ui/src/lib/code/code.component.ts

@@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common';
 
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { bootstrapCopy, bootstrapCheck } from '@ng-icons/bootstrap-icons';
-import { bundledLanguages } from 'shiki/langs';
 import { codeToHtml } from 'shiki';
 import { WINDOW_TOKEN } from '@valerymelou/common/browser';
 
@@ -31,6 +30,16 @@ export class CodeComponent {
   @Input() language!: string;
   highlightedCode!: SafeHtml;
 
+  private languages = [
+    'javascript',
+    'typescript',
+    'html',
+    'css',
+    'scss',
+    'python',
+    'rust',
+    'json',
+  ];
   private _code!: string;
   copied = false;
 
@@ -52,7 +61,7 @@ export class CodeComponent {
     this.language =
       this.language ?? this.code.split('\n')[0].replace('```', '');
 
-    if (this.language in bundledLanguages) {
+    if (this.languages.includes(this.language)) {
       this._code = this.code.replace('```' + this.language + '\n', '');
     } else {
       this.language = 'javascript';
@@ -61,7 +70,7 @@ export class CodeComponent {
     codeToHtml(this.code, {
       lang: this.language,
       themes: {
-        light: 'catppuccin-latte',
+        light: 'slack-ochin',
         dark: 'material-theme-ocean',
       },
       transformers: [