Mémento typographique de SPIP

Transcription

Mémento typographique de SPIP
Mémento typographique de SPIP Avec plugins : Crayons, Couteau Suisse, Enluminures typographiques V3 Ce tableau rappelle brièvement les méthodes à utiliser pendant l'écriture d'un article pour ajouter des titres, du texte en gras, en italique, etc..., sans avoir à connaître HTML. L'utilisation du HTML reste néanmoins possible, et nécessaire pour les cas plus complexes.
Icône B I Fonctionnalités Code dans le texte Explications Renvoi à la ligne _ Texte… Trait de soulignement + espace pour envoi à la ligne simple Paragraphe Ligne vide Laisser une ligne vide pour séparer deux paragraphes Trait de séparation ­­­­ Centrer [|Paragraphe centré |] Emphase forte {{texte en gras }} Emphase légère {texte en italique} Petites capitales <sc>Petites capitales </sc> Texte barré <del>Texte </del> Texte souligné Trait dessus Entrer une ligne contenant quatre petits tirets (au moins). Aligne le paragraphe au centre du document Le texte entre doubles accolades apparaîtra en gras. Le texte entre simples accolades est affiché en italique. Astuce: pour avoir du texte en gras et en italique, mettre trois accolades en insérant une espace (pour faire 1+2), et en respectant la symétrie. Ex: { {{ texte en gras et en italique }} } Mets le texte en petites capitales. surtout utilisé pour les noms propres. Le texte apparaît barré. <souligne>Texte </souligne> Le texte est souligné par dessous. <dessus>Texte </dessus> Le texte est souligné par dessus. Texte clignotant <clignote>Texte </clignote> Le texte clignote pour attirer l'attention. Fond fluo <sur fluo>Texte</sur fluo> Le texte apparaît sur un fond fluo jaune. Fond gris <sur gr is>Texte</sur gr is> Le texte apparaît sur un fond gris. Intertitre {{{Texte du titre }}} Intertitre 2 {{{**Texte du titre }}} Sous­sous­titre de l'article Intertitre 3 {{{***Texte du titre }}} Sous­sous­sous­titre de l'article À droite [/Paragraphe à droite /] Aligne le paragraphe à droite du document Encadrer en bleu [(Paragraphe encadré )] Ajoute un cadre effet relief avec fond bleu autour du paragraphe Texte rouge [*Texte *] Mettre le texte en évidence couleur rouge Texte bleu [**Texte *] Mettre le texte en évidence couleur bleue Exposant <sup>Texte </sup> Mettre le texte en exposant Indice <sub>Texte </sub> Citer un message <quote>Texte </quote> Mettre le texte en indice Ajoute un trait vertical pointillé et décalle le texte vers la gauche Permet d'insérer quelques caractères difficiles à réaliser avec le clavier : car. accentués, guillemets, etc. Sous­titre de l'article. Caractères spéciaux <cadr e> Code dans un cadre Texte non modifié encadré... </cadr e> <code> Code Texte non modifié... </code> <poesie> Poésie Sur un arbre perché… </poesie> Ajoute un cadre avec fond gris autour du paragraphe. Le texte apparaît tel qu'il est dans l'espace privé sans mise en forme (code HTML, texte Spip, code informatique…). Le texte apparaît tel qu'il est dans l'espace privé sans mise en forme, sans cadre (code HTML, texte Spip, code informatique…). Permet de mettre en forme un poème : chaque retour de ligne sera respecté dans le rendu final. Icône Fonctionnalités Code dans le texte ­# premier élément Liste numérotée ­# deuxième élément ­# etc. ­* premier élément Indenter une liste ­* deuxième élément ­* etc. Désindenter une liste Lien hypertexte
[texte­>URL] Lien hypertexte vers un article [texte­>n°d'article] Lien vers une rubrique [texte­>rubXX] Lien vers une brève [texte­>brXX] Lien complet [texte|bulle{lg}­>URL] Note de bas de page n° automatique [[texte de la note]] Note de bas de page avec lettres ou n° imposés [[<X>texte de la note]] Séparateur de pages ++++ Texte en couleur F Fond en couleur Glossaire Wikipédia Faire un tableau Pour renvoyer vers un article du site, il suffit de donner le numéro de l'article. Par exemple, en supposant que l'article 12 donne la liste des contacts : [nous contacter­>12] Où XX est le numéro de la rubrique. Ex : [voyez notre agenda­>rub3] <onglets>Titre 1 Placez votre texte ici ++++Titre 2 Texte dans des onglets Placez votre 2éme texte ici ++++Titre 3 Placez votre 3ème texte ici </onglets> T Explications Le petit tiret au tout début de la ligne suivi d'un dièse indique que la ligne est un élément d'une liste numérotée. Pour imbriquer des listes numérotées, ajoutez encore des dièses derrière le petit tiret. Le petit tiret au tout début de la ligne suivi d'une étoile indique que la ligne est un élément d'une liste avec puce. Pour indenter des listes à puce, ajoutez encore des étoiles derrière le petit tiret. Supprime un petit tiret et une étoile au début de chaque ligne de la liste. Mise en page modifiée ! Mettre le texte et l'URL entre crochets, séparé par un tiret + une flèche. Le texte devient une zone cliquable, et renverra le lecteur sur la page web indiquée par « URL ». Ex : [le site de SPIP­>http://www.spip.org ] Où XX est le numéro de la brève. Ex : [Annonce de l'AG­>br25] Permet d'ajouter le texte de la bulle qui apparaît lorsque la souris passe sur le lien, ainsi que le code de langue de la page de destination (fr, en, us, de, etc.) Le texte entre doubles crochets droits apparaîtra en bas de la page, et sera remplacé par un numéro généré automatiquement. Le texte entre doubles crochets apparaîtra en bas de page, et sera remplacé par le numéro ou la lettre x que l'on désire indiqué entre « < > ». Ces 4 + placés entre 2 paragraphes permet de séparer un long texte en 2 ou plusieurs pages. Voici ce que cela donne : dans cet exemple 3 onglets sont créés. Choix entre 35 couleurs proposées pour le texte. Par exemple : marron Choix entre 35 couleurs proposées pour le fond. Par exemple [fond ver t]Texte [/fond ver t] : vert Permet de réaliser un lien automatique vers un article de [?terme] Wikipédia correspondant au mot "terme". Pour faire un tableau simple, il suffit de séparer les | aaa | bbb | ccc | colonnes par la barre verticale. | xxx | yyy | zzz | Avec cette méthode seules des cellules d'une seule ligne sont possibles. Pour faire des tableaux plus complexes, utiliser le langage HTML. [mar r on]Texte [/mar r on]