Gato/Pena
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: coloration syntaxique via CSS classes (themeable)

Browse Source 
Remplace les styles inline syntect par des classes CSS. Le CSS est
généré côté Rust (base16-ocean.dark) et injecté au démarrage via
get_syntax_highlight_css. Les thèmes peuvent surcharger .syntax-highlighting
et les classes de tokens. Supprime le lien CDN highlight.js inutilisé.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gato
2026-06-19 15:36:08 +02:00
parent 75c85e7e0a
commit df899bd1a8
8 changed files with 107 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+1 -2
View File
@@ -6,8 +6,7 @@
<title>Pena — Markdown Viewer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Mono&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
src/main.js
+11
View File
@@ -1,8 +1,18 @@
import { showHome, openPath } from './router.js';
import { initCssModal } from './ui/css-modal.js';
const { invoke } = window.__TAURI__.core;
const win = window.__TAURI__.window.getCurrentWindow();
async function injectSyntaxCss() {
const css = await invoke('get_syntax_highlight_css');
if (!css) return;
const style = document.createElement('style');
style.id = 'pena-syntax-style';
style.textContent = css;
document.head.appendChild(style);
}
document.getElementById('titlebar').addEventListener('mousedown', (e) => {
if (e.target.closest('.titlebar-controls')) return;
if (e.buttons === 1) win.startDragging();
@@ -32,5 +42,6 @@ document.getElementById('btn-open-dir').addEventListener('click', async () => {
document.getElementById('btn-back').addEventListener('click', showHome);
await injectSyntaxCss();
await initCssModal();
showHome();
src/style.css
+2 -1
View File
@@ -451,7 +451,8 @@ body {
border-radius: 4px;
line-height: 1.4;
}
.content pre { background: #f4f4f7; padding: 20px 24px; border-radius: 6px; overflow-x: auto; margin: 16px 0; }
.content pre { padding: 20px 24px; border-radius: 6px; overflow-x: auto; margin: 16px 0; }
.content pre:not(.syntax-highlighting) { background: #f4f4f7; }
.content pre code { background: none; padding: 0; font-weight: 400; font-size: 13px; }
.content blockquote {