feat: coloration syntaxique locale via themes/default.css

Suppression de la dépendance CDN highlight.js. Le CSS github-dark est maintenant dans themes/default.css, lu au démarrage et injecté dans chaque page HTML générée. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-19 15:53:31 +02:00
parent 85f62bf842
commit bcf647976c
2 changed files with 127 additions and 1 deletions
@@ -4,6 +4,11 @@ const { marked } = require('marked');
 const { markedHighlight } = require('marked-highlight');
 const hljs = require('highlight.js');

+const SYNTAX_CSS = fs.readFileSync(
+  path.join(__dirname, '..', 'themes', 'default.css'),
+  'utf-8'
+);
+
 marked.use(markedHighlight({
  langPrefix: 'hljs language-',
  highlight(code, lang) {
@@ -444,7 +449,7 @@ function htmlShell({ title, sidebar, body, watchMode }) {
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto+Mono&display=swap">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+  <style>${SYNTAX_CSS}</style>
  <style>${STYLES}</style>${noSidebarStyle}
 </head>
 <body>
@@ -0,0 +1,121 @@
+/*
+ * Thème de coloration syntaxique — GitHub Dark
+ * Source : highlight.js/styles/github-dark
+ *
+ * Classes générées par marked-highlight avec langPrefix: 'hljs language-'
+ * Personnaliser ce fichier pour changer les couleurs du code dans MarkdownRender.
+ */
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+
+/* Mots-clés, types, variables de langage */
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: #ff7b72;
+}
+
+/* Noms de fonctions et de classes */
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: #d2a8ff;
+}
+
+/* Constantes, attributs, opérateurs, nombres */
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  color: #79c0ff;
+}
+
+/* Chaînes */
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  color: #a5d6ff;
+}
+
+/* Built-ins, symboles */
+.hljs-built_in,
+.hljs-symbol {
+  color: #ffa657;
+}
+
+/* Commentaires */
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  color: #8b949e;
+}
+
+/* Balises HTML / sélecteurs */
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  color: #7ee787;
+}
+
+/* Substitutions */
+.hljs-subst {
+  color: #c9d1d9;
+}
+
+/* Titres markdown */
+.hljs-section {
+  color: #1f6feb;
+  font-weight: bold;
+}
+
+/* Listes markdown */
+.hljs-bullet {
+  color: #f2cc60;
+}
+
+/* Italique / gras markdown */
+.hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+
+.hljs-strong {
+  color: #c9d1d9;
+  font-weight: bold;
+}
+
+/* Diff */
+.hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+
+.hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}