Quand vous éditez le corps d'un article dans TinaCMS, vous utilisez un éditeur de texte riche : titres, listes, liens et citations se comportent comme dans n'importe quel traitement de texte. En coulisses, TinaCMS enregistre ce contenu en Markdown (ou MDX) dans le fichier, donc ce que vous écrivez reste portable et lisible en dehors du CMS. Cet article sert à la fois de référence pour le formatage disponible et de démonstration de son rendu sur ce site.

Titres

Le corps de texte supporte six niveaux de titre, de <h1> à <h6>. Utilisez-les pour donner une vraie structure à vos articles longs, que lecteurs et moteurs de recherche pourront suivre.

H1

H2

H3

H4

H5

H6

Texte de paragraphe

Le texte courant est le format par défaut. TinaCMS le stocke en paragraphes Markdown, et cette démo les affiche via les styles typographiques définis dans global.css, pour rester lisible en thème clair comme en thème sombre. Gardez vos paragraphes ciblés : une seule idée par paragraphe se lit bien mieux à l'écran qu'un mur de texte.

Vous pouvez marquer des mots en italique, gras, ou en code en ligne sans quitter l'éditeur, et TinaCMS écrit le Markdown correspondant.

Liens

Les liens relient les articles de cette série entre eux. Un lien vers la documentation TinaCMS ressemble à n'importe quel mot dans une phrase, mais emmène le lecteur quelque part d'utile.

Citations

Utilisez une citation pour mettre en avant une phrase ou un aparté par rapport au texte environnant.

Le contenu est le héros. L'interface doit s'effacer pour que l'écriture porte la page. Vous pouvez aussi utiliser la syntaxe Markdown à l'intérieur d'une citation.

Listes

Les listes ordonnées conviennent bien aux étapes :

Définir une collection dans le schéma TinaCMS.
Ajouter les champs dont votre contenu a besoin.
Éditer le contenu dans le panneau latéral et enregistrer.

Les listes non ordonnées conviennent bien aux ensembles de points liés :

Markdown pour la portabilité
Un éditeur de texte riche pour le confort
Git pour l'historique

Les listes peuvent s'imbriquer quand la structure l'exige :

Types de contenu
- Articles
- Pages
Assets
- Images
- Documents

Blocs de code

Les blocs de code délimités gardent les articles techniques précis, et TinaCMS conserve l'indication de langage pour que la coloration syntaxique fonctionne :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Exemple de document HTML5</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Tableaux

Les tableaux se rendent à partir du Markdown standard, pratique pour de petites comparaisons :

Stocké en	Édité en	Vit dans
Markdown	Texte riche	Git
MDX	Texte riche	Git
JSON	Formulaire structuré	Git

Composants intégrés

MDX permet à un corps d'article de faire appel à de vrais composants. Cette démo en embarque un — une intégration YouTube définie dans src/components/mdx/YouTubeEmbed.astro et enregistrée comme template sur le champ body du blog. Les rédacteurs l'insèrent depuis la barre d'outils de l'éditeur de texte riche ; le rendu monte le vrai composant Astro :

Ajoutez vos propres composants en suivant le même schéma en trois étapes (fichier .astro, template .template.ts, puis enregistrement à la fois dans le tableau templates du schéma et dans la table components du rendu). Tout ce qu'Astro peut afficher est possible.

Voilà l'étendue complète du formatage disponible dans un corps d'article. Écrivez comme cela vous semble naturel dans l'éditeur ; TinaCMS se charge de le transformer en Markdown propre jusque dans votre dépôt.

Écrire en Markdown et MDX avec TinaCMS