feat: add syntax highlighting and code block styling with theme support

2025-10-21 08:34:46 -04:00
parent 062d743481
commit d788c9d267
75 changed files with 4783 additions and 830 deletions
@@ -15,23 +15,23 @@ export interface PreviewData {
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div 
-      class="preview-card bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-4 max-w-md overflow-hidden"
+      class="preview-card bg-card dark:bg-card rounded-2xl shadow-xl border border-border dark:border-border p-4 max-w-md overflow-hidden"
      (mouseenter)="mouseEnter.emit()"
      (mouseleave)="mouseLeave.emit()">
      
-      <h2 class="font-bold text-lg mb-2 text-gray-900 dark:text-gray-100 truncate">
+      <h2 class="font-bold text-lg mb-2 text-main dark:text-gray-100 truncate">
        {{ previewData().title }}
      </h2>
      
      <div 
-        class="prose prose-sm dark:prose-invert max-w-none line-clamp-5 text-gray-700 dark:text-gray-300"
+        class="prose prose-sm dark:prose-invert max-w-none line-clamp-5 text-main dark:text-main"
        [innerHTML]="sanitizedExcerpt()">
      </div>
      
      <div class="mt-3 flex justify-end">
        <button 
          (click)="openNote.emit()"
-          class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+          class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors p-1 rounded hover:bg-surface1 dark:hover:bg-surface2"
          aria-label="Ouvrir la note">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />