Archive — page conservée pour mémoire, non maintenue. Voir : Installer HedgeDoc
Tutoriel d'utilisation de HedgeDoc adapté par les CEMÉA (2023), propre à leur instance. Les syntaxes HedgeDoc (
:::,{%youtube %},=LxH…) ne sont pas rendues par Wiki.js et les illustrations d'origine ne sont plus disponibles.
¶ Tutoriel Hedgedoc
Ceci est un résumé des fonctionnalités présentées en anglais dans cette page.
¶ 
Introduction
Hedgedoc est une plateforme d'écriture collaborative, accessible à travers tous les navigateurs. Elle est basée sur la synthaxe Markdown, et la mise en forme peut être également faite à l'aide d'une barre d'outils.
Pour sélectionner le mode d'affichage utiliser les boutons (image d'origine indisponible)
Le créateur peut décider qui peut modifier, qui peut consulter ce document avec le bouton (image d'origine indisponible).
:::spoiler Afficher le tableau des droits
| Propriétaire lect/écrit | Authentifié lecture | Authentifié écriture | Invité lecture | Invité écriture | |
|---|---|---|---|---|---|
| Freely | ✔ | ✔ | ✔ | ✔ | ✔ |
| Editable | ✔ | ✔ | ✔ | ✔ | ✖ |
| Limited | ✔ | ✔ | ✔ | ✖ | ✖ |
| Locked | ✔ | ✔ | ✖ | ✔ | ✖ |
| Protected | ✔ | ✔ | ✖ | ✖ | ✖ |
| Private | ✔ | ✖ | ✖ | ✖ | ✖ |
Seul le créateur peut modifier les permissions.
:::
Plusieurs formes de visualisation du document peuvent être obtenues à l'aide du menu (image d'origine indisponible)
¶ 
Mise en forme
¶ Titres et sommaire
Il y a 6 niveaux de titres disponibles. Ils vont générer un sommaire automatique (3 premiers niveaux visibles directement).
Pour définir un titre, vous pouvez utiliser le bouton H (cliquer plusieurs fois pour obtenir les niveaux de sous-titres), ou le précéder d'un ou plusieurs # (leur nombre définira le niveau du titre).
¶ Attributs de caractère
Le texte sera en gras avec le bouton B ou entre deux doubles **,
Le texte sera en italique avec le bouton I ou entre deux *,
Le texte sera barré avec le bouton S ou entre deux doubles ~~.
Le texte sera en ++souligné++ entre deux doubles ++.
Le texte sera en exposant entre deux ^.
Le texte sera en indice entre deux ~.
Le texte sera ==surligné== entre deux doubles ==.
Pour afficher le texte en rouge, il faudra l'encadrer par des balises <span style="color: red;">texte en rouge</span>.
La mise en forme de citation se fait avec le bouton ou en la précédant d'un >, suivi d'un choix éventuel de couleur.
¶ Liens et ancres
Une adresse internet sera transformée automatiquement en lien cliquable.
Vous pouvez créer des liens à l'aide du bouton ou en tapant entre crochet le texte du lien suivi entre parenthèse de l'adresse du lien.
[color=red] [QWANT](https://qwant.com) affichera QWANT
Pour faire référence à un titre du document il suffit d'indiquer comme adresse # suivi de son nom
[Début](#-Tutoriel-Hedgedoc-) affichera Début
Pour ajouter une note de bas de page, taper entre crochets une référence puis à un autre endroit du document la même référence suivi de : et le contenu de la note.
note[1] [^1]: contenu de la note
affichera: note[1]
¶ Emojis 
et Font awesome
Pour afficher des Emojis, taper leur nom entre deux :. Par exemple 
affiche . La liste complète des emojis est disponible ici.
Pour afficher des icônes de fontawesome 4.7, il faut coller le code obtenu dans fontawesome.com. Par exemple <i class="fa fa-snowflake-o"></i> affiche : .
¶ Listes
Vous pouvez générer des listes à puces ou numérotées à l'aide des deux boutons ou en précédent les items d'un numéro suivi d'un point ou d'une *, +, -.
- Premier item
- deuxième item:
- Sous-item 1
- Sous-item 2
Mais également des cases à cocher avec le bouton ( - [ ] pour une case vide et - [x] pour une case cochée).
- A faire
- OK
¶ Tableaux
Pour créer des tableaux, il faut utiliser le bouton
ou directement encadrer le nom des colonnes par |. La dimension s'adaptera au contenu.
Une ligne de - - - apparaitra pour symboliser la séparation entre la ligne des titres et les lignes de cotenus.
Pour gérér l'alignement d'une colonne:
:- - - à gauche, :- - -: centré, - - -: à droite
Colonne1 Colonne 2 Colonne 3
¶ Encadrés
Pour faire des cadres, il faut utiliser le triple ::: associé aux mots clés success (cadre vert), danger(cadre rouge), warning(cadre jaune) et info(cadre bleu).
Lorsqu'il est associé à spoiler, il peut afficher un élément à déplier.
:::success
::: spoiler Déplier
:::danger
:::
¶ 
Intégration images, vidéos,...
Il est possible d'intégrer de nombreux types de ressources: images, sons, vidéos, pdf, graphiques, maths, partitions, ...
¶ 
Images
Pour insérer une image, utiliser le bouton ou faites glisser/déposer l'image à l'emplacement souhaité. Sinon taper .
Pour spécifier la taille image rajouter =LxH ou seulement =Lx après le nom de l'image (avec L largeur et H hauteur).
¶ Youtube et Peertube
Pour incruster une video Youtube ou Peertube il faut écrire l'identifiant de la vidéo entre {%youtube et %} ou {%peertube et %}.
Pour les vidéos Peertube, vous pouvez également copier/coller le code d'intégration comme :
<iframe title="Tu hésites à entrer en formation aux Ceméa ?"
src="https://videos.cemea.org/videos/embed/934c7a97-061f-4258-8cfc-a82cf8e72a79"
allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>
pour obtenir :
¶ Diaporamas
Pour transformer vos notes en diaporama, il faut insérer ce bloc de code en haut de votre texte :
---
type: slide
slideOptions:
transition: slide
theme: blood
---
Différentes options de transition ou thèmes sont possibles.
- transitions : none/fade/slide/convex/concave/zoom (au choix)
- theme : black/white/league/beige/sky/night/serif/simple/solarized/blood/moon (au choix)
Pour le visualiser, utiliser le "Menu" / "Mode Présentation".
Une adresse de diffusion sera générée spécialement pour le mode Diaporama.
Voir cet exemple de diaporama (lien d'origine indisponible)
¶ Fichiers PDF
Pour incruster un document PDF, il faut écrire l'adresse du fichier PDF entre {%pdf et %}.
¶ Maths
Les formules mathématiques LATEX peuvent s'afficher en les encadrants entre deux $ ou deux doubles $$.
¶ Code
Un programme informatique peut être mis en forme entre deux ` ou deux triples ``` suivi éventuellement du nom du language, = pour la numérotation des lignes
print("Hello World")
¶ 
Graphiques
Plusieurs types de graphiques peuvent être intégrés : Flow Charts, Graphviz, mermaid, sequence diagrams, vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/editor/data/barley.json"},
"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal"}
}
}
Il est possible d'intégrer une partition avec la synthaxe abc :
X:1
M:4/4
K:G
|:GABc dedB|
contenu de la note ↩︎