feat: add code coloration

2025-09-06 09:53:08 +02:00
parent edf273e604
commit c2b7530d20
3 changed files with 162 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -5,6 +5,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index of /</title>
    <link rel="stylesheet" href="style.css">
+    <!-- Prism.js pour la coloration syntaxique -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
 </head>
 <body>
    <div id="page-container">
@@ -69,5 +71,8 @@
    </div>

    <script src="script.js"></script>
+    <!-- Prism.js core et langages communs -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
 </body>
 </html>
--- a/script.js
+++ b/script.js
@@ -521,9 +521,11 @@ function showPreview(fileUrl, fileName) {
            showImagePreview(fileUrl, previewContent);
            break;
        case 'text':
-        case 'code':
            showTextPreview(fileUrl, previewContent);
            break;
+        case 'code':
+            showCodePreview(fileUrl, fileName, previewContent);
+            break;
        case 'markdown':
            showMarkdownPreview(fileUrl, previewContent);
            break;
@@ -579,6 +581,104 @@ function showTextPreview(fileUrl, container) {
        });
 }

+function detectLanguageFromExtension(fileName) {
+    const extension = fileName.toLowerCase().split('.').pop();
+    
+    const languageMap = {
+        'js': 'javascript',
+        'jsx': 'jsx',
+        'ts': 'typescript',
+        'tsx': 'tsx',
+        'py': 'python',
+        'java': 'java',
+        'c': 'c',
+        'cpp': 'cpp',
+        'cxx': 'cpp',
+        'cc': 'cpp',
+        'php': 'php',
+        'rb': 'ruby',
+        'go': 'go',
+        'rs': 'rust',
+        'html': 'html',
+        'htm': 'html',
+        'css': 'css',
+        'scss': 'scss',
+        'sass': 'sass',
+        'less': 'less',
+        'json': 'json',
+        'xml': 'xml',
+        'vue': 'vue',
+        'svelte': 'svelte',
+        'sh': 'bash',
+        'bash': 'bash',
+        'zsh': 'bash',
+        'fish': 'bash',
+        'ps1': 'powershell',
+        'sql': 'sql',
+        'r': 'r',
+        'matlab': 'matlab',
+        'm': 'matlab',
+        'swift': 'swift',
+        'kt': 'kotlin',
+        'scala': 'scala',
+        'clj': 'clojure',
+        'hs': 'haskell',
+        'lua': 'lua',
+        'pl': 'perl',
+        'tex': 'latex',
+        'latex': 'latex',
+        'md': 'markdown',
+        'markdown': 'markdown',
+        'yml': 'yaml',
+        'yaml': 'yaml',
+        'toml': 'toml',
+        'ini': 'ini',
+        'conf': 'bash',
+        'config': 'bash'
+    };
+    
+    return languageMap[extension] || 'text';
+}
+
+function showCodePreview(fileUrl, fileName, container) {
+    fetch(fileUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Erreur HTTP: ${response.status}`);
+            }
+            return response.text();
+        })
+        .then(text => {
+            const language = detectLanguageFromExtension(fileName);
+            
+            const pre = document.createElement('pre');
+            const code = document.createElement('code');
+            
+            if (language !== 'text') {
+                code.className = `language-${language}`;
+            }
+            
+            code.textContent = text;
+            pre.appendChild(code);
+            
+            container.innerHTML = '';
+            container.appendChild(pre);
+            
+            // Appliquer la coloration syntaxique si Prism est disponible
+            if (window.Prism && language !== 'text') {
+                try {
+                    Prism.highlightElement(code);
+                } catch (error) {
+                    console.warn('Erreur coloration syntaxique:', error);
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Erreur chargement code:', error);
+            container.innerHTML = '<div class="preview-error">Erreur: Impossible de charger le fichier</div>';
+        });
+}
+
 function showPdfPreview(fileUrl, container) {
    const iframe = document.createElement('iframe');
    iframe.src = fileUrl;
--- a/style.css
+++ b/style.css
@@ -646,6 +646,62 @@ tr:hover {
  font-weight: bold;
 }

+/* Styles pour la coloration syntaxique */
+.preview-content pre[class*="language-"],
+.preview-content code[class*="language-"] {
+  background-color: #f8f8f8;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-family: "Consolas", "Monaco", "Lucida Console", monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.preview-content pre[class*="language-"] {
+  padding: 15px;
+  margin: 10px 0;
+  overflow: auto;
+  max-height: 600px;
+}
+
+.preview-content code[class*="language-"] {
+  padding: 2px 4px;
+}
+
+/* Ajustements pour les thèmes Prism */
+.preview-content .token.comment,
+.preview-content .token.prolog,
+.preview-content .token.doctype,
+.preview-content .token.cdata {
+  color: #6a737d;
+  font-style: italic;
+}
+
+.preview-content .token.string,
+.preview-content .token.attr-value {
+  color: #032f62;
+}
+
+.preview-content .token.keyword,
+.preview-content .token.operator {
+  color: #d73a49;
+  font-weight: bold;
+}
+
+.preview-content .token.function,
+.preview-content .token.class-name {
+  color: #6f42c1;
+}
+
+.preview-content .token.number,
+.preview-content .token.boolean {
+  color: #005cc5;
+}
+
+.preview-content .token.variable {
+  color: #e36209;
+}
+
 /* Footer */
 address {
  margin-top: 30px;