# La Colorisation syntaxique de code en Markdown
La colorisation syntaxique est un outil permettant d'améliorer la lisibilité de votre code dans les documents Markdown.
Voici comment elle peut être appliquée à différents langages de programmation tels que LaTeX, Python, HTML, CSS et JavaScript.
## LaTeX
LaTeX, un traitement de texte souvent utilisé pour la rédaction de documents scientifiques.
Voici un exemple de code LaTeX :
Ce code :
<pre>
<code>
```latex
\documentclass{article}
\begin{document}
\title{Titre}
\author{Auteur}
\maketitle
\end{document}
```
</code>
</pre>
Donne, ce résultat :
```latex
\documentclass{article}
\begin{document}
\title{Titre}
\author{Auteur}
\maketitle
\end{document}
```
## Python
Python est un langage de programmation utilisé pour une grande variété de tâches (du développement web à la science des données).
Voici un exemple simple de code Python (en commençant par <code>```python</code>) :
```python
def factorielle(n):
if n == 0:
return 1
else:
return n * factorielle(n-1)
print(factorielle(5)) # Affiche 120
```
## HTML
Le HTML est le langage de balisage standard pour la création de pages Web.
Voici un exemple simple de code HTML (en commençant par <code>```html</code>) :
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Titre</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Ceci est un exemple de page HTML.</p>
</body>
</html>
```
## CSS
Le CSS est utilisé pour styliser les pages web. Voici un exemple de code CSS (en commençant par <code>```css</code>) :
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
```
## JavaScript
JavaScript est un langage de programmation utilisé pour ajouter de l'interactivité aux pages web.
Voici un exemple de code JavaScript (en commençant par <code>```javascript</code>) :
```javascript
function saluer() {
alert('Bonjour tout le monde!');
}
document.getElementById('boutonSaluer').addEventListener('click', saluer);
```
## Conclusion
La colorisation syntaxique est un excellent moyen de rendre votre code plus lisible et engageant.
En utilisant la syntaxe appropriée dans vos fichiers Markdown, vous pouvez présenter votre code d'une manière qui met en évidence la structure et les éléments clés de chaque langage.
<style>
html {
background-color: #f2f2f2; /* Gris clair */
margin: 0;
padding: 0;
}
/* Style pour le corps de la page */
body {
font-family: Arial, sans-serif;
margin: 0 auto;
padding: 0;
max-width: 900px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
/* Style pour le titre principal */
h1 {
color: #003f5c; /* bleu foncé */
position: relative;
font-size: 2.75rem;
text-align: center;
}
h1::before {
content: "";
position: absolute;
bottom: -0.1em;
left: 0;
right: 0;
height: 0.05em;
background-color: #9eb6d7;
}
/* Style pour le titre secondaire */
h2 {
font-size: 2.25rem;
color: #2f4b7c;
position: relative;
}
h2::before {
content: "";
position: absolute;
bottom: -0.1em;
left: 0;
right: 0;
height: 0.025em;
background-color: #a5b6c4;
}
h3 {
font-size: 1.75rem;
color: #665191;
}
h4 {
font-size: 1.5rem;
color: #665191;
}
h5 {
font-size: 1.3rem;
color: #665191;
}
/* Style pour le paragraphe */
p {
font-size: 1.5rem;
line-height: 1.5;
margin-bottom: 1rem;
}
/* Style pour le texte en gras */
strong {
color: #800000;
}
/* Style pour le texte en italique */
i {
font-style: italic;
color: darkblue;
}
/* Style pour les images */
img {
max-width: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: block;
margin: auto;
}
blockquote {
font-style: italic;
font-size: 1.2rem;
margin: 1rem 0;
padding: 1rem;
background-color: #f9f9f9;
border-left: 4px solid #ccc;
border-left: 4px solid #ccc;
}
/* Style pour le code en ligne */
code {
font-family: "Courier New", monospace;
font-size: 1.1rem;
background-color: #f9f9f9;
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
/* Style pour le code en bloc */
pre {
font-family: "Courier New", monospace;
font-size: 1.1rem;
background-color: #f9f9f9;
padding: 1rem;
white-space: pre-wrap;
}
/* Style pour les liens */
a {
color: #007bff;
text-decoration: none;
}
/* Style pour les liens visités */
a:visited {
color: #6610f2;
}
/* Style pour les titres de liens */
a:hover, a:focus {
color: #007bff;
text-decoration: underline;
}
/* Style pour les listes */
ul, ol {
font-size: 1.5rem;
line-height: 1.2;
margin-bottom: 1rem;
}
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Media query pour les téléphones */
@media only screen and (max-width: 600px) {
body {
padding: 0.5rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2.37rem;
}
h4 {
font-size: 2.23rem;
}
h5 {
font-size: 2.10rem;
}
h6 {
font-size: 2rem;
}
p {
font-size: 1.75rem;
}
ul, ol {
font-size: 1.75rem; /* Nouvelle taille de police pour les listes sur les téléphones */
}
img {
max-width: 100%;
}
}
</style>