Skip to content

7. Le fichier de configuration du convertisseur Gemini 3

Le fichier de configuration [config.json] rassemble les informations qui peuvent changer d’un document à l’autre. Il commence ainsi :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
"mkdocs": {
    "site_name": "Convertir un document Word ou ODT vers un site statique HTML à l'aide de l'IA Gemini",
    "site_url": "https://stahe.github.io/word-odt-vers-html-janv-2026/",
    "site_description": "Convertir un document Word ou ODT vers un site statique HTML à l'aide de l'IA Gemini",
    "site_author": "Serge Tahé",
    "repo_url": "https://github.com/stahe/word-odt-vers-html-janv-2026",
    "repo_name": "GitHub",
    "use_directory_urls": false,
    "theme": {
      "name": "material",
      "custom_dir": "overrides",
      "features": [
        "navigation.sections",
        "navigation.indexes",
        "navigation.expand",
        "toc.integrate",
        "navigation.top"
      ],
      "palette": [
        {
          "media": "(prefers-color-scheme: light)",
          "scheme": "default",
          "primary": "teal",
          "accent": "purple",
          "toggle": {
            "icon": "material/brightness-7",
            "name": "Passer au mode sombre"
          }
        },
        {
          "media": "(prefers-color-scheme: dark)",
          "scheme": "slate",
          "primary": "teal",
          "accent": "purple",
          "toggle": {
            "icon": "material/brightness-4",
            "name": "Passer au mode clair"
          }
        }
      ]
    },
    "markdown_extensions": [
      "admonition",
      "attr_list",
      "pymdownx.superfences",
      "pymdownx.mark",
      {
        "pymdownx.highlight": {
          "anchor_linenums": true,
          "linenums": true
        }
      }
    ],
    "extra_javascript": [
      "javascripts/focus.js"
    ],
    "extra_css": [
      "stylesheets/focus.css"
    ]
  },
  "footer": "{% block footer %}\n  <div class=\"md-footer-meta md-typeset\">\n    <div class=\"md-footer-meta__inner\">\n\n      <div>\n        <a href=\"https://tahe.developpez.com\" target=\"_blank\">\n          https://tahe.developpez.com\n        </a>\n        <br>\n        Ce cours-tutoriel écrit par <strong>Serge Tahé</strong> est mis à disposition du public selon les termes de la\n        <em>Licence Creative Commons Attribution – Pas d’Utilisation Commerciale –\n        Partage dans les Mêmes Conditions 3.0 non transposé</em>.\n      </div>\n\n    </div>\n  </div>\n{% endblock %}",
  "extra": {
    "analytics": {
      "provider": "google",
      "property": "G-XXXXXXXX"
    }
  },
  • lignes 1-67 : configuration pour la génération du fichier [mkdocs.yml]. Ce fichier est utilisé par le script [build] qui convertit le site MkDocs produit par le script [convert] en site statique HTML. Ce fichier est produit par le script [convert] ;
  • ligne 2 : le nom que vous voulez donner à votre site ;
  • ligne 3 : l’URL où sera déployé votre site, ici une URL GitHub ;
  • ligne 4 : la description du site. J’ai repris ici le nom du site ;
  • ligne 5 : le propriétaire du site ;
  • ligne 6 : le dépôt GitHub sur lequel a été déployé le site HTML. Nous y revenons plus loin ;
  • ligne 7 : le nom de ce dépôt ;
  • ligne 8 : une ligne importante. Si elle est absente, lorsqu’on clique sur un élément de la table des matières, c’est le dossier de la page HTML qui est affiché et non le document HTML lui-même ;
  • lignes 9-18 : le thème du site MkDocs ;
  • ligne 10 : c’est Gemini lui-même qui m’a conseillé le thème [material] ;
  • ligne 11 : cette ligne dit à MkDocs que certains éléments dont il a besoin seront dans un dossier [overrides].
  • C’est le convertisseur qui va créer lui-même ce dossier. Il va y mettre deux fichiers :
    • [footer.html] qui sera le bas de page des documents HTML affichés ;
    • [analytics.html] utilisé pour faire le suivi Google Analytics du site HTML ;

C’est Gemini qui a fixé le contenu de ces fichiers suite à mes prompts ;

  • ligne 16 : cette ligne permet d’avoir la table des matières dans une unique colonne à gauche de l’écran. En son absence, MkDocs utilise deux colonnes pour afficher la table des matières :
    • à gauche, les chapitres de niveau Titre 1 ;
    • à droite : les sous-chapitres du chapitre sélectionné à gauche ;
  • lignes 21-28 : configure les éléments visuels du site MkDocs ;
  • lignes 23-24 : définissent les couleurs du site ;
  • lignes 25-28 : configurent une icône dans la barre supérieure de chaque page qui permet de passer en mode sombre ;
  • lignes 31-39 : même chose que les lignes 21-28 mais lorsque l’utilisateur a sélectionné le mode sombre ;
  • lignes 42-52 : les extensions au langage [MarkDown] utilisé dans les pages MkDocs. Un site MkDocs n’est pas un site HTML. C’est une étape intermédiaire ou les documents du site MkDocs sont écrit avec le langage MarkDown. C’est Gemini qui a généré ce code suite à certains de mes prompts ;
  • lignes 54-59 : j’ai demandé à Gemini d’inclure dans la barre supérieure du site MkDocs généré une icône pour montrer / cacher la table des matières. C’est le script javascript [focus.js] associé à la feuille de style [focus.css] qui assure ce rôle. Les deux fichiers sont générés par Gemini ;
  • ligne 61 : le bas de page des documents MkDocs / HTML affichés. C’est là que vous pouvez customiser votre bas de page ;
  • ligne 62-67 : la configuration pour assurer le suivi du site par Google Analytics ;

Le fichier [config.json] se poursuit de la façon suivante :

 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
"code": {
    "style_keywords": [
      "code"
    ],
    "default_language": "text",
    "detection_rules": {
      "csharp": [
        "using",
        "Console.WriteLine",
        "public static void Main",
        "WebMethod",
        "TryParse",
        "EventArgs",
        "String.Format",
        "System.Web.Services"
      ],
      "java": [
        "System.out.println",
        "public static void main(String",
        "package",
        "JUnitTest",
        "Class.forName",
        "PreparedStatement",
        "private static void",
        "private void"
      ],
      "html": [
        "<html>",
        "</div>",
        "<body>",
        "<script>",
        "href=",
        "<span>",
        "<p>",
        "<h2>",
        "<form",
        "<table"
      ],
      "sql": [
        "SELECT",
        "INSERT INTO",
        "UPDATE",
        "DELETE FROM",
        "WHERE"
      ],
      "python": [
        "def",
        "import",
        "print(",
        "from"
      ],
      "xml": [
        "<?xml",
        "<project",
        "<version>",
        "<configuration>",
        "<build>",
        "<dependency>"
      ],
      "javascript": [
        "use strict",
        "console.log",
        "let",
        "constructor",
        "async",
        "export"
      ],
      "php": [
        "<?php",
        "declare",
        "require"
      ],
      "vbscript": [
        "Option",
        "Dim",
        "Explicit"
      ]
    }
  },
  • lignes 68-146 : la configuration pour que le convertisseur :
    • détecte bien les blocs de code ;
    • reconnaisse le langage qui est dedans ;
  • lignes 69-71 : les blocs de code sont repérés par leurs styles. Dans ce tableau mettez des mots clés qu’on peut trouver dans le style de vos blocs de code. Ainsi dans le prompt initial, j’avais indiqué les styles des blocs de code : [Source Code numéroté résultats, Source Code]. [code] est un mot clé qu’on retrouve dans les deux styles et dans le document je n’ai aucun autre style ayant ce mot clé. Donc dans ce cas particulier, la ligne 70 suffit ;
  • ligne 72 : lorsque le convertisseur n’arrive pas à détecter le langage du bloc de code, il mettra ‘text’. C’est un marqueur MkDocs qui indique la présence de code sans coloration syntaxique ;
  • lignes 73-145 : pour chaque langage rencontré, on a mis des mots clés pour aider le convertisseur à les reconnaître. Vous pouvez ajouter d’autres langages ou d’autres mots clés à un langage donné. C’est là où il faut aller si vous découvrez que le convertisseur n’a pas reconnu un langage. On peut trouver un même mot clé dans plusieurs langages. Le convertisseur sélectionne le langage qui a le plus de mots clés détectés ;

La fin du fichier [config.json] est la suivante :

147
148
149
150
  "files_to_copy": [
    "googlexxxxx.html",
    "robots.txt"
  ]
  • lignes 147-150 : le nom des fichiers que le convertisseur doit copier à la racine du site MkDocs. Ces deux fichiers sont nécessaires au suivi du site par Google Analytics ;
https://tahe.developpez.com
Ce cours-tutoriel écrit par Serge Tahé est mis à disposition du public selon les termes de la Licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 3.0 non transposé.