feat: add code coloration
All checks were successful
Deploy MinIO Explorer / deploy (push) Successful in 47s
All checks were successful
Deploy MinIO Explorer / deploy (push) Successful in 47s
This commit is contained in:
@@ -5,6 +5,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Index of /</title>
|
<title>Index of /</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="page-container">
|
<div id="page-container">
|
||||||
@@ -69,5 +71,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
102
script.js
102
script.js
@@ -521,9 +521,11 @@ function showPreview(fileUrl, fileName) {
|
|||||||
showImagePreview(fileUrl, previewContent);
|
showImagePreview(fileUrl, previewContent);
|
||||||
break;
|
break;
|
||||||
case 'text':
|
case 'text':
|
||||||
case 'code':
|
|
||||||
showTextPreview(fileUrl, previewContent);
|
showTextPreview(fileUrl, previewContent);
|
||||||
break;
|
break;
|
||||||
|
case 'code':
|
||||||
|
showCodePreview(fileUrl, fileName, previewContent);
|
||||||
|
break;
|
||||||
case 'markdown':
|
case 'markdown':
|
||||||
showMarkdownPreview(fileUrl, previewContent);
|
showMarkdownPreview(fileUrl, previewContent);
|
||||||
break;
|
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) {
|
function showPdfPreview(fileUrl, container) {
|
||||||
const iframe = document.createElement('iframe');
|
const iframe = document.createElement('iframe');
|
||||||
iframe.src = fileUrl;
|
iframe.src = fileUrl;
|
||||||
|
|||||||
56
style.css
56
style.css
@@ -646,6 +646,62 @@ tr:hover {
|
|||||||
font-weight: bold;
|
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 */
|
/* Footer */
|
||||||
address {
|
address {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
|||||||
Reference in New Issue
Block a user