import re
def escape_html_characters(text):
text = text.replace('<', '<')
text = text.replace('>', '>')
return text
def markdown_to_html(markdown_text):
markdown_text = escape_html_characters(markdown_text)
html_output = []
lines = markdown_text.split('
')
code_block = False
code_lang = ''
list_stack = [] # Chaque entrée est {'type': 'ul'/'ol', 'indent': int}
for line in lines:
stripped_line = line.lstrip()
# Vérification du début/fin de bloc de code
if stripped_line.startswith("```"):
if not code_block:
code_lang = stripped_line[3:].strip()
html_output.append(f"<pre><code class='{code_lang}'><p>")
code_block = True
else:
html_output.append("</p></code></pre>")
code_block = False
continue
if code_block:
html_output.append(line)
continue
# Traitement des en-têtes et des règles horizontales
if line.startswith('###'):
html_output.append(f"<h3>{line[3:].strip()}</h3>")
elif line.startswith('##'):
html_output.append(f"<h2>{line[2:].strip()}</h2>")
elif line.startswith('#'):
html_output.append(f"<h1>{line[1:].strip()}</h1>")
elif line.strip() == '---':
html_output.append("<hr>")
else:
# Vérification si c'est un élément de liste
current_indent = len(line) - len(line.lstrip(' '))
stripped_line = line.lstrip(' ')
list_type = None
content = ''
# Vérification pour un élément de liste non ordonnée
if re.match(r'^[-+*]\s+', stripped_line):
list_type = 'ul'
content = re.sub(r'^[-+*]\s+', '', stripped_line, 1).strip()
# Vérification pour un élément de liste ordonnée
elif re.match(r'^\d+\.\s+', stripped_line):
list_type = 'ol'
content = re.sub(r'^\d+\.\s+', '', stripped_line, 1).strip()
if list_type:
# Fermeture des listes plus indentées
while list_stack and list_stack[-1]['indent'] > current_indent:
html_output.append(f"</{list_stack[-1]['type']}>")
list_stack.pop()
# Vérification si la liste actuelle continue ou si une nouvelle liste commence
if list_stack:
top = list_stack[-1]
if top['indent'] == current_indent:
if top['type'] != list_type:
# Fermeture de la liste actuelle et ouverture d'un nouveau type
html_output.append(f"</{top['type']}>")
list_stack.pop()
html_output.append(f"<{list_type}>")
list_stack.append({'type': list_type, 'indent': current_indent})
else:
# Nouvelle sous-liste
html_output.append(f"<{list_type}>")
list_stack.append({'type': list_type, 'indent': current_indent})
else:
# Début d'une nouvelle liste
html_output.append(f"<{list_type}>")
list_stack.append({'type': list_type, 'indent': current_indent})
# Traitement du contenu
processed_content = re.sub(r"`(.*?)`", r"<span></span>", content)
processed_content = re.sub(r"\*\*(.*?)\*\*", r"<strong></strong>", processed_content)
processed_content = re.sub(r"'(.*?)'", r"<em></em>", processed_content)
processed_content = re.sub(r'\[(.*?)\]\((.*?)\)', r'<a href=""></a>', processed_content)
html_output.append(f"<li>{processed_content}</li>")
else:
# Ce n'est pas un élément de liste, fermeture de toutes les listes ouvertes
while list_stack:
html_output.append(f"</{list_stack.pop()['type']}>")
# Traitement comme paragraphe si non vide
if line.strip():
processed_line = re.sub(r"`(.*?)`", r"<span></span>", line)
processed_line = re.sub(r"\*\*(.*?)\*\*", r"<strong></strong>", processed_line)
processed_line = re.sub(r"'(.*?)'", r"<em></em>", processed_line)
processed_line = re.sub(r'\[(.*?)\]\((.*?)\)', r'<a href=""></a>', processed_line)
html_output.append(f"<p>{processed_line.strip()}</p>")
# Fermeture de toutes les listes restantes ouvertes
while list_stack:
html_output.append(f"</{list_stack.pop()['type']}>")
return '
'.join(html_output)
# Votre entrée Markdown
markdown_text = ''
... ici votre .md
''
# Conversion et obtention du HTML
html_code = markdown_to_html(markdown_text)
print(html_code)
Comment est développé ce site :
Alors, j'ai réalisé ce site avec l'objectif de réunir en une base solide différents exercices et cours faits en classe sur un support plus agréable et plus accessible, auquel on peut accéder à tout moment sur tout appareil. (… Plus honnêtement, je me suis ennuyé.)
Bref ! Voici la base de son fonctionnement :
Organisation :
/DocumentPrincipal/
├── home.html
├── recap_chapitre_nomDuChapitre.html
├── recap_chapitre_nomDuChapitre.html
└── /font-favicon/
├── favicon.png
├── favicon.svg
├── style.css
├── js.js
├── FiraCode-VariableFont_wght.ttf
├── Lato-Bold.ttf
├── Lato-Regular.ttf
├── Lexend-VariableFont_wght.ttf
└── /fichier+/
Convertisseur Markdown → HTML :
Markdown est un formatage de texte qui combine facilité d’écriture, d’exportation et de modifications par des algorithmes. Le code Python ci-dessous vous permet de convertir la mise en page Markdown en texte HTML qui pourra être lu par le style.css. Voici ce qui est pris en charge et par quoi il est remplacé :
Remplacements :
- < → <
- > → >
- ```python → <pre><code class='python'><p>
- ``` → </p></code></pre>
Mise en page :
- # → <h1> ... </h1>
- ## → <h2> ... </h2>
- ### → <h3> ... </h3>
- --- → <hr>
- ` ... ` → <span> ... </span>
- ' ... ' → <em> ... </em>
- - → <ul><li> ... </li></ul>
- ('1','2','3','…'). → <ol><li> ... </li></ol>
- <a href="http://...">...</a> → <a href="..."> ... </a>
La base HTML :
Une fois que votre conversion est faite, vous devez placer le nouveau code HTML dans une base déjà préconçue, que vous pouvez trouver ci-dessous :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recap</title>
<link rel="icon" href="font-favicon/favicon.png" type="image/png">
<link rel="icon" href="font-favicon/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="font-favicon/style.css">
</head>
<body>
<a href="https://nsi.stefa.org/2ACAPON/recap-cour/home.html" class="bouton_retour">
<h4 class="lien_retour">HUB</h4>
</a>
<main>
...
</main>
<br><br><br><br>
<script src="font-favicon/js.js"></script>
</body>
</html>
Par contre, si vous souhaitez faire un menu déroulant, vous devez insérer la partie du code que vous retourne le convertisseur dans cette div reliée à un script JS (js.js) qui fera fonctionner le tout.
<button type="button" class="toggle_list"><p>Tous les outils pour le JS</p></button>
<div class="content">
...
</div>
Si vous souhaitez insérer un lien de téléchargement, ci-dessous la base :
<button type="button" class="download" id=" ... "><p> ... </p></button>
Reste des fichiers :
Vous pourrez trouver ci-dessous un bouton qui vous donnera, en fichier zip, tout le reste des fichiers nécessaires () pour faire fonctionner tout cela !
Bref, merci d'avoir lu j'usquici. Si vous trouvez l'énergie, vous pouvez essayer de m'aider à compléter les cours.
À part ça, je vous dis ciao 👌.