---
# System prepended metadata

title: TUTO HackMD
tags: [TUTO_Outils]

---

# TUTO HackMD

Je vous laisse regarder en mode "éditer et voir" pour voir ce que donne à droite ce qui est écrit à gauche.

Les # permettent de définir les différents niveaux de titre.

## Voici un autre sous-titre
### Et encore un
#### Cela permet aussi d'avoir un sommaire qui se crée automatiquement jusqu'au 3e titre (###)
:arrow_left: regarder le sommaire est à gauche

avec les : on peut ajouter des émoticones :+1: 
il suffit de mettre ":" et de taper le mot que l'on cherche (c'est en anglais  par contre) 
 


## Mise en page
1) On peut modifier la mise en page des titres et sous titres avec ça : 
<style>
    h1{
        color: white;
        background-color: darkblue;
        text-align:center
    } 
    h2 {
        color: darkblue;
        background-color: lightblue;
        text-align:center
    }
    h3,h4 {
        color: darkblue
    }
    
   p:hover{
        color: blue
    }
</style>

h1 correspond au titre de niveau 1, et ainsi de suite
on peut donc changer la couleur du texte (color), le fond (background-color), l'alignement (text-align)
p:hover permet de changer la couleur de la police lorsque l'on passe la souris sur le texte

2) On peut aussi modifier la mise en page du texte directement
- Par exemple pour ++souligné++ on met le texte entre ++ et ++
- Pour ==surligné== entre == ==
- Pour mettre en **gras** entre ** ** ou en cliquant sur B
- Pour mettre en *italique* entre * * ou en cliquant sur *I*
- Pour ~~barrer~~ le texte, entre ~~ ~~ ou en cliquant sur le S barré



## On peut faire des encadrés
En utilisant ": : :" on peut réaliser des encadrés

**1) Encadrés colorés**
:::success 
avec success on affiche un encadré vert
:::

:::info
info = encadré bleu
:::

:::warning
warning = encadré jaune
:::

:::danger
danger = encadré rouge
:::

**2) Texte caché**
"spoiler" permet de cacher se qu'on écrit dans "Détails" : il faut alors cliquer dessus pour afficher le texte
:::spoiler
texte caché
:::



## D'autres options
### Cases à cocher
- [ ] avec un "-" suivi de crochets "[" "]" on crée ces cases à cocher

### Liens 
En tapant [] on peut insérer un lien
Par exemple vers le site de l'insee : 
[nom de mon lien](https://insee.fr) 

### Créer un tableau
En cliquant en haut sur l'image du tableau "Insert table"



| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text     | Text     | Text     |

### Insérer une ligne horizontale
En cliquant en haut sur _ ou en écrivant 3 fois "_"


---

---

## Sommaire détaillé
Ecrire TOC entre [] permet d'insérer un sommaire : 
[TOC]



## Pleins d'autres possibilités
Il y a certainement plein d'autres choses à faire avec HackMD, je vous laisse tester et ajouter ces possibilités dans ce tutoriel si vous le souhaitez ! 

:::danger
Dernière chose : penser à ajouter un tag pour pouvoir classer plus facilement les différents html créés.
Pour cela taper ###### tags et mettre entre 'le nom du tag' ou en choisir un déjà existant
:::

###### tags: `TUTOS`
