Cédric OLIVIER
121 lines
3.8 KiB
HTML
121 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>README</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
max-width: 900px;
|
|
margin: 40px auto;
|
|
padding: 0 20px;
|
|
color: #24292e;
|
|
line-height: 1.6;
|
|
}
|
|
h1, h2, h3, h4, h5, h6 {
|
|
border-bottom: 1px solid #eaecef;
|
|
padding-bottom: 0.3em;
|
|
margin-top: 1.5em;
|
|
}
|
|
code {
|
|
background: #f6f8fa;
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
font-size: 85%;
|
|
font-family: 'SFMono-Regular', Consolas, monospace;
|
|
}
|
|
pre {
|
|
background: #f6f8fa;
|
|
padding: 16px;
|
|
border-radius: 6px;
|
|
overflow: auto;
|
|
}
|
|
pre code { background: none; padding: 0; font-size: 100%; }
|
|
blockquote {
|
|
border-left: 4px solid #dfe2e5;
|
|
margin: 0;
|
|
padding: 0 1em;
|
|
color: #6a737d;
|
|
}
|
|
table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
|
|
th, td { border: 1px solid #dfe2e5; padding: 6px 13px; }
|
|
tr:nth-child(even) { background: #f6f8fa; }
|
|
img { max-width: 100%; height: auto; }
|
|
a { color: #0366d6; text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
hr { border: none; border-top: 1px solid #eaecef; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>md-render</h1>
|
|
<p>Convertisseur Markdown → HTML en ligne de commande avec prévisualisation live.</p>
|
|
<h2>Installation</h2>
|
|
<pre><code class="hljs language-bash">npm install
|
|
npm <span class="hljs-built_in">link</span> <span class="hljs-comment"># rend la commande md-render disponible globalement</span>
|
|
</code></pre><h2>Utilisation</h2>
|
|
<pre><code class="hljs language-bash"><span class="hljs-comment"># Conversion simple (génère un fichier .html)</span>
|
|
md-render README.md
|
|
|
|
<span class="hljs-comment"># Conversion vers un fichier spécifique</span>
|
|
md-render README.md -o documentation.html
|
|
|
|
<span class="hljs-comment"># Mode watch — ouvre http://localhost:3000 dans votre navigateur</span>
|
|
md-render README.md --watch
|
|
|
|
<span class="hljs-comment"># Mode watch sur un port personnalisé</span>
|
|
md-render README.md --watch --port 8080
|
|
</code></pre><h2>Options</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>Alias</th>
|
|
<th>Description</th>
|
|
<th>Défaut</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody><tr>
|
|
<td><code>--watch</code></td>
|
|
<td><code>-w</code></td>
|
|
<td>Lance le serveur avec rechargement auto</td>
|
|
<td>—</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--port <port></code></td>
|
|
<td><code>-p</code></td>
|
|
<td>Port du serveur en mode watch</td>
|
|
<td><code>3000</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--output <fichier></code></td>
|
|
<td><code>-o</code></td>
|
|
<td>Fichier HTML de sortie</td>
|
|
<td><code><input>.html</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>--help</code></td>
|
|
<td><code>-h</code></td>
|
|
<td>Affiche l'aide</td>
|
|
<td>—</td>
|
|
</tr>
|
|
</tbody></table>
|
|
<h2>Mode watch</h2>
|
|
<p>En mode <code>--watch</code>, un serveur HTTP est démarré localement. Ouvrez <code>http://localhost:3000</code>
|
|
dans votre navigateur. À chaque sauvegarde du fichier Markdown, la page se recharge automatiquement
|
|
via une connexion SSE (Server-Sent Events).</p>
|
|
<p>Les assets relatifs (images, etc.) placés dans le même répertoire que le <code>.md</code> sont servis automatiquement.</p>
|
|
<h2>Fonctionnalités</h2>
|
|
<ul>
|
|
<li>🎨 Coloration syntaxique du code (highlight.js)</li>
|
|
<li>📄 Style GitHub-like</li>
|
|
<li>🔄 Rechargement automatique en mode watch</li>
|
|
<li>🖼 Serveur de fichiers statiques pour les images locales</li>
|
|
<li>⚡ Debounce intelligent pour éviter les rechargements en rafale</li>
|
|
<li>🛡 Protection contre le path traversal</li>
|
|
</ul>
|
|
|
|
</body>
|
|
</html> |