MarkForm

Transformez votre Markdown en pages élégantes.

Version v1.2.0 — Licence GNU GPL v3.0

MarkForm est une application HTML monopage qui convertit du texte Markdown en trois types de pages web : un site multi-pages, un tableau Kanban ou un portail de liens. Aucune inscription, aucun serveur, tout fonctionne dans votre navigateur.

---

Sommaire

1. Démarrage rapide
2. Écrire en Markdown
3. Les trois modes
4. Personnaliser avec le YAML
5. Sources Markdown supportées
6. Utiliser avec un pad CodiMD ou HedgeDoc
7. Configurer votre propre instance HedgeDoc
8. Étendre la liste des sources directes
9. Fonctionnalités avancées
10. Référence YAML complète
11. Hébergement
12. Sécurité
13. Dépendances
14. Changelog
15. Licence

---

Démarrage rapide

Ce dont vous avez besoin

• Un navigateur web (Firefox, Chrome, Edge…)
• Le fichier markform.html
• Optionnel : un pad CodiMD sur apps.education.fr ou une instance HedgeDoc personnelle

Premier essai en 3 minutes

1. Ouvrez markform.html dans votre navigateur
2. Dans la zone de texte, collez ceci :

---
mode: site
---

## Bienvenue

Ceci est ma première page MarkForm !

Vous pouvez écrire du **gras**, de l'*italique*, et ajouter des [liens](https://example.com).

## Deuxième page

Voici du contenu pour la deuxième page.

- Un élément de liste
- Un autre élément
- Un troisième

3. Cliquez sur 🔗 Générer le lien partageable
4. Votre page apparaît avec une navigation latérale et deux sections

Pour revenir au panneau de configuration, cliquez sur ← Modifier en haut de la page.

---

Écrire en Markdown

Le Markdown est une façon d'écrire du texte avec des symboles simples pour le mettre en forme. Voici les essentiels.

Titres

# Grand titre de la page (utilisé en mode Liens)
## Titre de section (crée une page, une colonne ou une catégorie)
### Sous-titre (crée une carte en mode Pad, sous-titre en mode Liens)

Important : les ## sont la structure principale de MarkForm. Chaque ## crée une nouvelle page (mode Site), colonne (mode Pad) ou catégorie (mode Liens).

Texte et mise en forme

Du texte normal, simplement écrit.

**Texte en gras** et *texte en italique*.

> Une citation apparaît avec un trait sur le côté.

Listes

- Premier élément
- Deuxième élément
- Troisième élément

1. Élément numéroté
2. Deuxième
3. Troisième

Liens

[Texte du lien](https://www.adresse.fr)

En mode Liens, ajoutez une description après :
- [Nom du site](https://www.adresse.fr) Description courte du site

Images

![Description de l'image](https://adresse.fr/photo.jpg)

Vidéos

Les vidéos YouTube, Dailymotion, Peertube et les fichiers .mp4 sont automatiquement intégrées en lecteur :

![Titre de la vidéo](https://youtube.com/watch?v=xxxxx)
![Ma vidéo](https://tube.apps.education.fr/w/xxxxx)
![Vidéo locale](https://monsite.fr/video.mp4)

Tableaux

| Colonne 1 | Colonne 2 | Colonne 3 |
|-----------|-----------|-----------|
| Cellule   | Cellule   | Cellule   |
| Cellule   | Cellule   | Cellule   |

Séparateur

---

Crée une ligne horizontale de séparation (uniquement dans le contenu, pas en début de document où il délimite le YAML).

---

Les trois modes

Mode Site

Cas d'usage : cours, tutoriels, documentation, manuels.

Chaque ## crée une nouvelle page. Une barre latérale permet de naviguer entre les pages. Des boutons Précédent/Suivant apparaissent en bas.

---
mode: site
---

## Leçon 1 : Les nombres
Contenu de la leçon...

## Leçon 2 : Les opérations
Suite du cours...

## Leçon 3 : Les problèmes
Exercices pratiques...

Mode Pad (Kanban)

Cas d'usage : organisation, planning, suivi de projets, tableau de tâches.

Chaque ## crée une colonne. Chaque ### crée une carte dans la colonne. Les cartes sont déplaçables par glisser-déposer.

---
mode: pad
---

## À faire
### Préparer le conseil
Réunion mardi 14h
### Corriger les cahiers

## En cours
### Séquence maths
Fractions — semaine 12

## Terminé
### Sortie scolaire
Organisée pour le 15 mars

Mode Liens

Cas d'usage : page d'accueil, annuaire de liens, portail de ressources, signets partagés.

Chaque ## crée une catégorie. Les liens sont écrits avec la syntaxe Markdown classique. Une barre de recherche et des filtres par catégorie apparaissent automatiquement.

---
mode: liens
colonnes: 3
---

# Ma page de liens
### Page personnalisée qui se modifie selon mes besoins

## Outils
- [Nextcloud](https://cloud.monecole.fr) Mes fichiers en ligne
- [Cahier de textes](https://cahier.monecole.fr) Devoirs et leçons

## Ressources
- [Wikipédia](https://fr.wikipedia.org) Encyclopédie en ligne
- [Dictées](https://www.orthophore.fr) Exercices d'orthographe

## Vidéos
- [Lumni](https://www.lumni.fr) Ressources éducatives
- [C'est pas sorcier](https://youtube.com/@cestpassorcier) Chaîne YouTube

Astuce : le # (titre de niveau 1) définit le grand titre de la page. Le ### (sous-titre) s'affiche en italique sous le titre.

---

Personnaliser avec le YAML

Le YAML est un bloc de réglages placé tout en haut de votre document, entre deux lignes de trois tirets ---. C'est ce qui contrôle l'apparence de votre page.

Fonctionnement dans MarkForm

1. Vous modifiez les réglages dans le panneau 🎨 Mise en forme (couleurs, colonnes, police…)
2. Le bloc YAML se met à jour automatiquement en haut de la zone de texte
3. Vous pouvez le voir en temps réel dans l'encadré « 📝 YAML à coller en haut de votre pad »
4. Copiez le contenu complet (YAML + Markdown) dans votre pad CodiMD ou HedgeDoc

Vous pouvez aussi écrire le YAML à la main si vous préférez.

Exemple

---
mode: liens
theme: dark
colonnes: 3
titres: #e67e22
police: Fredoka
espacement: a
---

Ce bloc configure : mode Liens, fond sombre, 3 colonnes, titres orange, police Fredoka, espacement aéré.

---

Sources Markdown supportées

MarkForm peut récupérer le contenu Markdown de différentes sources. Selon la source, le chargement se fait soit directement (le contenu apparaît automatiquement dans MarkForm), soit en copier-coller (un onglet s'ouvre vers le pad et vous devez copier-coller manuellement le contenu).

Tableau récapitulatif (v1.1.1)

Source	Mode	Comment ça marche
codimd.apps.education.fr	✅ Direct	Fetch automatique, le markdown apparaît tout de suite
Tout sous-domaine codimd/hedgedoc/pad de apps.education.fr	✅ Direct	Fetch automatique
hedgedoc.toutalamaison.ynh.fr	✅ Direct	Instance HedgeDoc personnelle configurée pour CORS
framapad.org (tous sous-domaines : hebdo, mensuel, annuel…)	✅ Direct	Fetch sur /p/<id>/export/txt (CORS ouvert)
Autres instances HedgeDoc/CodiMD/HackMD	⚠️ Copier-coller	Un onglet s'ouvre, faites Ctrl+A, Ctrl+C, puis collez
Autres Etherpad / board.net	⚠️ Copier-coller	Idem (CORS généralement bloqué)
Digipad (de La Digitale)	❌ Non supporté	C'est un mur multimédia, pas un éditeur Markdown

Pourquoi cette distinction ?

Pour qu'une URL puisse être chargée directement par MarkForm depuis un autre domaine, le serveur source doit autoriser explicitement les requêtes cross-origin (CORS). Les instances officielles d'apps.education.fr et de Framasoft sont configurées dans ce sens. Pour les autres serveurs, MarkForm bascule en mode "copier-coller" : il ouvre simplement un onglet vers le pad pour que vous puissiez copier le contenu manuellement.

Si vous gérez votre propre instance HedgeDoc, vous pouvez la configurer pour qu'elle apparaisse comme "directe" — voir la section Configurer votre propre instance HedgeDoc.

---

Utiliser avec un pad CodiMD ou HedgeDoc

CodiMD est un éditeur Markdown en ligne fourni par le Ministère de l'Éducation nationale. HedgeDoc en est l'évolution communautaire, que vous pouvez auto-héberger. Les deux fonctionnent de la même manière avec MarkForm.

Créer un pad

Sur CodiMD apps.education.fr :

1. Allez sur codimd.apps.education.fr
2. Connectez-vous avec vos identifiants académiques
3. Cliquez sur « Nouveau pad »
4. Écrivez votre contenu Markdown avec le bloc YAML en haut

Sur votre propre HedgeDoc (par exemple via YunoHost) :

1. Connectez-vous à votre instance
2. Créez une nouvelle note
3. Écrivez votre contenu Markdown avec le bloc YAML en haut
4. Cliquez sur « Publish » en haut à droite pour rendre la note accessible publiquement (sinon MarkForm ne pourra pas la lire)

Partager avec MarkForm

1. Copiez l'URL publiée de votre pad (forme : https://votre-instance/s/xxxxxx)
2. Dans MarkForm, collez l'URL dans le champ « Lien CodiMD, HedgeDoc, Framapad… » et cliquez 📥 Charger
3. Cliquez 🔗 Générer le lien partageable
4. Copiez le lien généré et partagez-le (mail, ENT, blog…)

Le lien partageable

Le lien ressemble à ceci :

markform.html#s=https://hedgedoc.exemple.fr/s/votre-pad

Avantage clé : quand vous modifiez votre pad, la page MarkForm se met à jour automatiquement à chaque visite. Pas besoin de regénérer le lien !

Important : les réglages d'apparence (couleurs, colonnes, police…) sont stockés dans le YAML de votre pad. Si vous changez les réglages dans le panneau de MarkForm, pensez à recopier le YAML mis à jour dans votre pad.

Contenu embarqué

Si vous n'utilisez pas de pad, le contenu Markdown est compressé directement dans l'URL. Le lien est plus long mais totalement autonome. Notez que dans ce cas, les modifications ne sont pas dynamiques : il faut regénérer le lien à chaque changement.

---

Configurer votre propre instance HedgeDoc

Si vous auto-hébergez HedgeDoc (par exemple via YunoHost) et que vous voulez que vos notes soient utilisables directement par MarkForm sans copier-coller, voici les trois étapes nécessaires.

Étape 1 — Configurer HedgeDoc (config.json)

Éditez le fichier /var/www/hedgedoc/config.json (chemin standard sur YunoHost) et ajoutez ou modifiez les paramètres suivants dans la section production :

{
  "production": {
    "allowOrigin": ["*"],
    "csp": {
      "allowFraming": true,
      "allowPDFEmbed": true
    },
    "cookiePolicy": "none",
    "protocolUseSSL": true
  }
}

Détail :

• allowOrigin: ["*"] — autorise les requêtes cross-origin depuis n'importe quel domaine.
• csp.allowFraming: true — autorise l'intégration en <iframe>.
• csp.allowPDFEmbed: true — pareil pour les PDF générés.
• cookiePolicy: "none" — sécurise la session quand le framing est ouvert.

Validez la syntaxe JSON avant de redémarrer :

sudo python3 -m json.tool /var/www/hedgedoc/config.json > /dev/null && echo "JSON OK"
sudo systemctl restart hedgedoc

Étape 2 — Configurer Nginx (sur YunoHost)

Par défaut, YunoHost ajoute un en-tête X-Frame-Options: SAMEORIGIN qui empêche le framing. Pour le neutraliser uniquement sur HedgeDoc, éditez le fichier Nginx de l'app :

sudo nano /etc/nginx/conf.d/votre-domaine.d/hedgedoc.conf

Ajoutez la directive more_clear_headers au début du bloc location / :

location / {
  more_clear_headers "X-Frame-Options";
  proxy_pass http://127.0.0.1:55030/;
  include proxy_params_with_auth;
  # ... reste de la config
}

Testez et rechargez :

sudo nginx -t
sudo systemctl reload nginx

Étape 3 — Vérifier

Testez que CORS et le framing sont bien actifs :

# Doit afficher "access-control-allow-origin: *"
curl -I -H "Origin: https://exemple.fr" \
     https://votre-hedgedoc/s/votre-note-id/download | grep -i "access-control"

# Ne doit plus afficher "x-frame-options"
curl -I https://votre-hedgedoc/s/votre-note-id | grep -i "frame"

Étape 4 — Ajouter votre instance dans MarkForm

Voir la section suivante : Étendre la liste des sources directes.

Note de sécurité : publier allowOrigin: ["*"] ouvre votre HedgeDoc à toutes les origines. Pour une instance personnelle utilisée uniquement avec MarkForm, c'est généralement acceptable. Pour plus de contrôle, vous pouvez remplacer ["*"] par une liste explicite de domaines autorisés.

---

Étendre la liste des sources directes

Si vous avez votre propre instance HedgeDoc (ou un Framapad maison) configurée pour accepter CORS, vous pouvez la déclarer dans MarkForm pour qu'elle soit reconnue comme "source directe".

Ajouter une instance HedgeDoc

Ouvrez markform.html dans un éditeur de texte et trouvez (vers la ligne 419) :

var hedgedocCorsOk=['hedgedoc.toutalamaison.ynh.fr'];

Ajoutez votre domaine entre les crochets :

var hedgedocCorsOk=['hedgedoc.toutalamaison.ynh.fr', 'mon-hedgedoc.exemple.fr'];

Ajouter une instance Framapad / Etherpad

Pareil, juste en dessous :

var framapadCorsOk=[];

Devient :

var framapadCorsOk=['mon-pad.exemple.fr'];

Vérifier qu'une instance accepte bien CORS

Avant d'ajouter une instance, testez-la :

curl -I -H "Origin: https://votre-markform.exemple.fr" \
     https://mon-instance/p/test/export/txt | grep -i "access-control"

Si vous voyez une ligne access-control-allow-origin: * (ou votre domaine en écho), l'instance est compatible et vous pouvez l'ajouter sans risque.

---

Fonctionnalités avancées

Pied de page

Insérez la ligne spéciale ---footer--- dans votre Markdown pour ajouter un pied de page :

## Dernière section
Contenu...

---footer---
Créé par M. Dupont — École des Tilleuls
[Me contacter](mailto:dupont@mail.fr)

Tout ce qui suit ---footer--- apparaît en bas de la page, centré, dans une taille réduite.

Mode dyslexique

Cliquez sur le bouton Aa Dyslexique dans le panneau de configuration, ou ajoutez dans le YAML :

dyslexic: oui

Ce mode :

• Remplace toutes les polices par OpenDyslexic
• Augmente l'espacement des lettres et des mots
• Améliore la lisibilité pour les élèves dyslexiques

Intégration de vidéos

Les vidéos sont automatiquement détectées et intégrées en lecteur responsive :

• YouTube : https://youtube.com/watch?v=ID ou https://youtu.be/ID
• Dailymotion : https://dailymotion.com/video/ID
• Peertube : https://tube.apps.education.fr/w/ID
• Fichier vidéo : https://monsite.fr/video.mp4

Utilisez la syntaxe image ![]() ou lien []() :

![Titre affiché sous la vidéo](https://youtube.com/watch?v=dQw4w9WgXcQ)

Glisser-déposer (mode Pad)

En mode Pad, les cartes sont déplaçables entre les colonnes par glisser-déposer. Cela permet de réorganiser visuellement un tableau Kanban directement depuis la page générée.

---

Référence YAML complète

Général

Clé	Valeurs	Description
mode	site, pad, liens	Mode de rendu
theme	dark	Active le mode sombre
dyslexic	oui	Active la police OpenDyslexic

Couleurs

Toutes les couleurs acceptent un code hexadécimal (ex : #e67e22).

Clé	Description
fond	Couleur de fond de la page
cartes	Couleur de fond des cartes/sections
texte	Couleur du texte dans les cartes
titres	Couleur des titres, navigation, footer
bordures	Couleur des bordures
sidebar	Couleur de fond de la barre latérale (mode Site)

Typographie

Clé	Valeurs	Description
police	Luciole, Fredoka, Merriweather, Source Serif, Lora	Police de caractères
titre	1.4rem, 1.8rem, 2.2rem, 2.8rem	Taille du titre principal (S, M, L, XL)
sous-titre	1rem, 1.15rem, 1.4rem, 1.8rem	Taille des sous-titres (S, M, L, XL)
taille	s, l	Taille du texte : petit ou grand
alignement	j, c	Justifié ou centré

Mise en page

Clé	Valeurs	Description
colonnes	1, 2, 3, 4	Nombre de colonnes
largeur	n, l, f	Étroit, large ou plein écran
espacement	s, a	Serré ou aéré
arrondi	0, 5, 10, 20	Arrondi des coins en pixels

Options

Clé	Valeurs	Description
recherche	non	Masque la barre de recherche (mode Liens)
meme-onglet	oui	Ouvre les liens dans le même onglet
numeros	oui	Numérote les sections (mode Site)

Exemple complet

---
mode: liens
theme: dark
colonnes: 3
fond: #1a1a2e
titres: #e67e22
texte: #e0e0e8
police: Fredoka
titre: 2.2rem
sous-titre: 1.4rem
espacement: a
arrondi: 16
recherche: non
---

---

Hébergement

En local

Double-cliquez simplement sur markform.html. Le fichier fonctionne de manière autonome, sans serveur.

Sur GitLab Pages (apps.education.fr)

1. Créez un dépôt sur gitlab.apps.education.fr
2. Placez markform.html à la racine et ajoutez un fichier .gitlab-ci.yml :

pages:
  stage: deploy
  script:
    - mkdir public
    - cp markform.html public/index.html
  artifacts:
    paths:
      - public

3. Votre page est accessible à https://votre-compte.gitlab.apps.education.fr/votre-projet/

Sur un serveur web

Copiez markform.html sur votre serveur. Aucune dépendance côté serveur n'est requise, seul un serveur HTTP basique suffit.

---

Sécurité

MarkForm intègre plusieurs protections contre les injections de contenu malveillant :

• DOMPurify assainit tout le HTML généré par le Markdown (bloque les balises <script>, les onerror, etc.)
• escapeHtml() protège tous les points d'insertion de contenu utilisateur (titres, noms, descriptions…)
• sanitizeUrl() bloque les protocoles dangereux (javascript:, data:, vbscript:)
• Aucune donnée n'est envoyée à un serveur — tout reste dans le navigateur

---

Dépendances

MarkForm est presque autonome : pas de framework côté serveur, pas de processus de build. Il charge cependant 4 bibliothèques JavaScript depuis le CDN public cdnjs.cloudflare.com :

• marked v12.0.2 — parser Markdown
• DOMPurify v3.1.6 — assainissement HTML
• Sortable v1.15.3 — glisser-déposer du mode Pad
• lz-string v1.5.0 — compression du contenu embarqué dans l'URL

Note : ces dépendances impliquent une connexion à cdnjs.cloudflare.com. Si vous souhaitez une autonomie totale (par exemple pour un usage hors-ligne), téléchargez ces 4 bibliothèques et remplacez les balises <script src="..."> par des chemins relatifs locaux.

---

Changelog

v1.2.0 (29 avril 2026)

• ✨ Bouton flottant « remonter en haut » ajouté en bas à droite des pages générées en modes Site et Liens. Apparaît après 300 px de scroll, scroll smooth animé au clic, suit la couleur d'accent du thème (--ui-title). Pas affiché en mode Pad.
• 🎨 SVG de flèche inline : aucune dépendance externe ajoutée.
• 📱 Adaptation mobile : taille réduite (42×42 px) sur écrans < 600 px de large.
• ♿ Accessibilité : attributs aria-label et title pour les lecteurs d'écran.

v1.1.1 (26 avril 2026)

• ✨ Activation du fetch direct pour Framapad (et tous ses sous-domaines : hebdo, mensuel, annuel…). Test réalisé : access-control-allow-origin: * confirmé sur /export/txt et /export/html.
• 🔧 Affinement de la fonction getDownloadUrl() : les autres serveurs Etherpad (non-Framapad) restent en mode copier-coller, car leur configuration CORS est variable.
• 📝 Mise à jour du tableau des sources et du texte d'aide pour refléter ce nouveau support direct.

v1.1.0 (26 avril 2026)

• ✨ Support du fetch direct pour les instances HedgeDoc personnelles compatibles CORS (liste hedgedocCorsOk extensible).
• ✨ Préparation du support direct pour Framapad / Etherpad (liste framapadCorsOk, vide par défaut).
• 📝 Refonte du texte d'aide sous le champ URL : sources directes vs copier-coller clairement distinguées.
• 📝 Nouvelle section dédiée à la configuration HedgeDoc dans le README (config.json, Nginx, vérifications).
• 📝 Mention explicite que Digipad n'est pas supporté (mur multimédia ≠ éditeur Markdown).
• 🏷️ Affichage du numéro de version dans le header de l'application.

v1.0.0

• 🎉 Version initiale.
• Modes Site, Pad (Kanban), Liens.
• Parsing YAML pour la personnalisation (couleurs, police, mise en page).
• Partage par URL compressée (LZString).
• Intégration avec CodiMD apps.education.fr (fetch direct).
• Intégration vidéos (YouTube, Dailymotion, Peertube, fichiers .mp4).
• Mode dyslexique (OpenDyslexic).
• Pied de page personnalisé (---footer---).
• Sécurité : DOMPurify, escapeHtml, sanitizeUrl.

---

Licence

MarkForm est un logiciel libre distribué sous licence GNU General Public License v3.0 (GPL-3.0).

Vous êtes libre de :

• Utiliser MarkForm pour tout usage, y compris commercial
• Copier et redistribuer le logiciel
• Modifier le code source et distribuer vos modifications

À condition de :

• Conserver la mention de licence et les droits d'auteur
• Distribuer toute version modifiée sous la même licence GPL-3.0
• Rendre le code source disponible si vous distribuez le logiciel

Le texte complet de la licence est disponible sur gnu.org/licenses/gpl-3.0.html.

---

MarkForm v1.2.0 — Transformez votre Markdown en pages élégantes.