diff --git a/index.html b/index.html index ee300d2..6ebb7b4 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,8 @@ Index of / + +
@@ -69,5 +71,8 @@
+ + + \ No newline at end of file diff --git a/script.js b/script.js index db6fc4f..0e7f957 100644 --- 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 = '
Erreur: Impossible de charger le fichier
'; + }); +} + function showPdfPreview(fileUrl, container) { const iframe = document.createElement('iframe'); iframe.src = fileUrl; diff --git a/style.css b/style.css index 1935c51..6a95bb5 100644 --- 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;