Passer au contenu principal

Markdown dans un fichier .html

<!DOCTYPE html>
<html>
<head>
	<title>Exemple de Markdown en HTML avec markdown-it</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.1/markdown-it.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"></script>
	<style>
	blockquote {
    border-left: 5px solid #ccc;
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 1em;
	}
	</style>
</head>
<body>
	<div id="markdown-content" style="display: none;">
# Titre principal

## Titre secondaire

Voici un paragraphe avec *texte en italique* et **texte en gras**.

> Citation

$$\displaystyle\int_a^b\frac{1}{x}\mathrm{d}x=ln(b)-ln(a)$$

Test d'une équation en ligne \\(E=mc^2\\)
</div>
	
	<div id="rendered-content"></div>
	
	<script>
		var md = window.markdownit({
			breaks: true, // Pour permettre le retour à la ligne avec un seul saut de ligne
			typographer: true // Pour convertir automatiquement les guillemets et tirets en typographie française
		});
		var markdownText = document.getElementById("markdown-content").textContent;
		var html = md.render(markdownText);
		document.getElementById("rendered-content").innerHTML = html;
		MathJax.typesetPromise().then(() => { // Pour rafraîchir MathJax après la génération du HTML
		    MathJax.typeset();
		});
	</script>
</body>
</html>