Pour faciliter la mise en page des documents publiés avec SPIP, le système propose un certain nombre de « raccourcis SPIP » destinés :
–  à simplifier l’utilisation par des utilisateurs ne connaissant pas le HTML ;
–  à faciliter le traitement automatique de la mise en page.

Source : https://www.spip.net/aide/?aide=raccourcis#contenu-aide

Par conséquent naturellement vous pouvez toujours utiliser le code HTML dans vos documents SPIP, mais nous vous conseillons d’utiliser de préférence ces quelques raccourcis SPIP (peu nombreux), qui sont beaucoup plus faciles à mémoriser et plus particulièrement permettent au système certaines opérations automatisées.

Les raccourcis typographiques simples de SPIP

Dans un premier temps, nous présentons ici les raccourcis typographiques les plus courants et les plus simples. Pour les utilisateurs qui souhaiteraient affiner encore le contrôle de la mise en forme de leurs textes, nous présenterons des versions plus complexes de ces raccourcis.

N.B. Les raccourcis simples répondent déjà largement à la grande majorité des besoins, et permettent de publier en ligne presque aussi simplement que l’on écrit un mail.

Typographie française automatique

SPIP respecte automatiquement les principales règles d’espacement de la typographie française – ainsi des espaces insécables sont ajoutées devant les caractères « :», « ; », « ! », « ? » -, et place des espaces insécables avant et après les guillemets « à la française ».

(Note : cette fonctionnalité n’est activée que sur les sites dont la langue principale est le français.)

Créer des paragraphes

Pour créer des paragraphes, il suffit de laisser une ligne vide, un peu comment on sépare les paragraphes dans un email (on « saute » une ligne).

Le fait de simplement « revenir à la ligne » (retour-chariot) sans séparer les deux paragraphes par une ligne vide ne suffit pas pour provoquer un changement de paragraphe (cela ne provoque même pas un retour à la ligne).

Vous pouvez laisser plusieurs lignes vides à la suite sans que cela modifie la présentation.

Insérer une puce

On peut insérer une puce en début de ligne dans SPIP : il suffit de revenir à la ligne et de commencer la nouvelle ligne avec un tiret (« – »).

Notez : ici un simple retour à la ligne suffit (on peut faire des énumérations dans le même paragraphe) ; mais si l’on « saute » une ligne avant la ligne commençant par un tiret, une ligne vide est affichée avant l’énumération.

Par exemple,

- Qu'est-ce que cela peut faire que je lutte pour la mauvaise cause puisque je suis de bonne foi?- Et qu'est-ce que ça peut faire que je sois de mauvaise foi puisque c'est pour la bonne cause. (Jacques Prévert)

sera affiché ainsi :

–  Qu’est-ce que cela peut faire que je lutte pour la mauvaise cause puisque je suis de bonne foi ?
–  Et qu’est-ce que ça peut faire que je sois de mauvaise foi puisque c’est pour la bonne cause. (Jacques Prévert)

On notera qu’il s’agit bien d’insérer une puce et non de créer une liste (pour créer des listes voir)

Gras et italique

On indique simplement du texte en italique en le plaçant entre des accolades simples : « ...du texte {en italique} en... ».

On indique du texte en gras en le plaçant entre des accolades doubles : « ...du texte {{en gras}} en... ».

Intertitres

Les intertitres sont des titres à l’intérieur d’un texte permettant d’en indiquer la structure. Dans SPIP, on les indique très simplement en les plaçant entre des accolades triples : « {{{Un titre de partie}}} » affichera le texte en gras et centré :

Un titre de partie

Trait de séparation horizontal

Il est très simple d’insérer un trait de séparation horizontal sur toute la largeur du texte : il suffit de placer une ligne ne contenant qu’une succession d’au moins quatre tirets, ainsi :

----

donne :

Les liens hypertextes

On fabriquera facilement un lien hypertexte avec le code suivant :

SPIP est une initiative du [minirézo->http://www.minirezo.net/].

devient :

SPIP est une initiative du minirézo.

(Mnémotechnique : le tiret suivi d’un chevron dessine une sorte de flèche qui indique que le texte du lien (avant la flèche) « pointe vers » une adresse.)

L’adresse du lien peut être une adresse absolue (commençant, comme ici, par http://), une adresse relative (vers une autre page du même site), un lien vers un document utilisant un protocole de l’internet (ftp://…), une adresse email (« [->minirezo@rezo.net] »)…

Application spécifique : vous pouvez afficher en toutes lettres un lien cliquable sous la forme d’une adresse URL, en n’indiquant rien avant la « flèche ». Par exemple :

[->https://www.mirobolus.fr/utiliser-les-raccourcis-typographiques/]

affiche :

https://www.mirobolus.fr/utiliser-les-raccourcis-typographiques/

Notez que, dans le cas des URL très longues, l’affichage est tronqué (pour éviter de dégrader votre interface graphique), mais le lien hypertexte pointe vers la bonne adresse.

Il est possible de préciser la langue de la page vers laquelle le lien pointe, ce que les navigateurs afficheront à leur convenance. Pour cela, il faut mettre le code-langue entre accolades.

[Un site en français{fr}->httpS:///www.adresse.tld]

Cela est particulièrement recommandé lorsque la page de destination n’est pas dans la même langue que votre texte.

Si l’on veut donner beaucoup d’informations sur le lien sans allonger excessivement la zone cliquable, on peut provoquer l’apparition d’une info-bulle en plaçant avant la flèche le signe | suivi du texte souhaité :

[voir ici|Ce lien vous expliquera tout ce qu'il faut savoir->https:///www.adresse.tld]

affichera voir ici, le reste du texte n’apparaissant qu’au survol.

Liens hypertextes à l’intérieur du site

Ce même système de liens hypertextes facilite, de plus, la création de liens à l’intérieur de votre site sous SPIP. La seule subtilité consiste à repérer le numéro de l’article, de la rubrique, ou de la brève vers laquelle vous voulez mener votre lien hypertexte :  lorsque vous « visitez », dans l’espace privé, un article, une brève ou une rubrique, la colonne de gauche contient un pavé indiquant, en gros caractères, ce numéro.

C’est ce numéro que vous allez indiquer dans le lien hypertexte :

• Lien vers l’article 342 (quatre possibilités) :
  lien vers [l'article->342]
  lien vers [l'article->art342]
  lien vers [l'article->article 342]
  Application spécifique : [->art342] (on n’a rien indiqué avant la « flèche ») affichera automatiquement le titre de l’article 342 avec un lien vers cet article.

• Lien vers la rubrique 12 :
  lien vers [la rubrique->rub12]
  lien vers [la rubrique->rubrique 12]

• Lien vers la brève 65 :
  lien vers [la brève->br65]
  lien vers [la brève->breve 65]
  lien vers [la brève->brève 65]

• Auteurs, mots-clés, sites, images, documents :
  lien vers [un auteur->aut13] ou [le même auteur->auteur13]
  lien vers [un mot->mot32]
  lien vers [un site syndiqué->site1]
  lien vers [un document joint->doc17] ou [le même document->document17]
  lien vers [une image->img13] ou [la même image->image13]
  

Application spécifique : on peut, là aussi, ne rien spécifier avant la « flèche » ([->aut13]…). SPIP insérera automatiquement les informations nécessaires. Dans le cas d’un document joint ou d’une image, si l’on a indiqué un titre manuellement, c’est ce titre qui sera affiché ; sinon c’est le nom du fichier lui-même qui sera utilisé.

Les raccourcis pour mentionner la langue et créer une info-bulle, expliqués pour les liens externes, fonctionnent également pour les liens internes.

Notes de bas de page

Une note de bas de page est, habituellement, signalée par un numéro placé à l’intérieur du texte, numéro repris en bas de page et proposant un complément d’information.

Dans SPIP, cette fonctionnalité (assez lourde à gérer manuellement en HTML) est automatisée : les notes sont numérotées par SPIP, qui gère également des liens hypertextes à l’intérieur du document pour passer directement de l’appel de note au texte de la note correspondante, et vice-versa.

Une note de bas de page est indiquée, dans SPIP, entre doubles crochets : « Une note[[Voici un complément d'information.]] de bas de page. » sera affiché sous la forme : « Une note [1] de bas de page. »

Citer un extrait (de forum)

Il est souvent pratique, dans un forum de discussion, de citer un extrait du message auquel on est en train de répondre. Pour homogénéiser la présentation de telles citations, SPIP propose le raccourci <quote>...</quote>.

Par exemple :

<quote>C'est drôlement bien, SPIP.</quote>Kikou, je suis bien d'accord :-)

donne :

C’est drôlement bien, SPIP.

Kikou, je suis bien d’accord 🙂

Fonctionnalités plus complètes

Les raccourcis qui suivent offrent des fonctionnalités plus puissantes et d’un usage plus spécifique. Si cela est votre premier contact avec les raccourcis de SPIP, il est sans doute inutile que vous tentiez de les apprendre par cœur dès maintenant. Il vous suffit de savoir qu’ils existent ; lorsque vous en aurez réellement besoin, revenez sur cette page, il sera alors beaucoup plus facile pour vous de mémoriser des raccourcis dont vous avez réellement l’utilité.

Tableaux

Pour réaliser des tableaux très simples dans SPIP, il suffit de faire des lignes dont les « cases » sont séparées par le symbole « | » (pipe, un trait vertical), lignes commençant et se terminant par des traits verticaux. Il est impératif de laisser des lignes vides avant et après ce tableau.

Par exemple, le tableau :

se code ainsi :

| {{Nom}} | {{Prénom}} | {{Age}} || Marso | Ben | 23 ans || Capitaine | | non connu || Philant | Philippe | 46 ans || Cadoc | Bébé | 4 mois |

Remarquez que toutes les entrées de la première ligne sont placées en gras. SPIP identifie ainsi qu’il s’agit d’une page d’entête, et lui attribue une présentation différente des autres lignes (fond de couleur différente). La présence d’une telle ligne n’est pas obligatoire.

On peut aussi ajouter une légende et un résumé à la table. Ces deux informations sont optionnelles mais sont très importantes pour rendre la table accessible aux mal-voyants, le résumé donnant une meilleure idée du contenu de la table.
Ces informations sont spécifiées entre double trait vertical avant la table comme ceci :

||Légende|Résumé||| {{Nom}} | {{Date de naissance}} | {{Ville}} || Jacques | 5/10/1970 | Paris || Claire | 12/2/1975 | Belfort || Martin | 1/31/1957 | Nice || Marie | 23/12/1948 | Perpignan |

et apparaitront comme cela :

On peut ne pas spécifier l’une ou l’autre des informations, mais il faut bien penser à mettre un trait vertical simple devant le résumé si vous ne spécifiez que celui-ci : || | résumé ||

Il est également possible de fusionner une case avec d’autres, en réduisant son contenu à |<| pour la fusionner avec la case qui la précède horizontalement ; ou à |^| pour la fusionner avec la case qui la précède verticalement.

||Tableau avec fusion| Raccourci de fusion||| {{Colonne 1}} | {{Colonne 2}} | {{Colonne 3}} || Ligne 1 | L1C2 et L1C3 |<|| Ligne 2 | L2C2 et L3C2|L2C3|| Ligne 3 |^| L3C3 |

donnera

Fabriquer des listes ou des énumérations

–  Un simple retour à la ligne s’obtient en tapant _ (le trait de soulignement ou underscore) au début de la ligne, suivi d’une espace.

N.B. En typographie classique, le simple retour à la ligne est très rare (limité essentiellement à la poésie). On le confond souvent avec le changement de paragraphe tel qu’il est affiché sur les documents imprimés (sans espacement vertical entre les paragraphes), alors que, par défaut, les butineurs Web insèrent un espacement entre les paragraphes. Beaucoup d’utilisateurs cherchent à reproduire cette caractéristique de l’imprimé (pas d’espacement vertical) en insérant de simples retours à la ligne entre ce qu’ils considèrent être des paragraphes ; cela est un erreur qui risque de nuire à la facilité de maintenance et d’évolution de leur site. La solution consiste à définir, dans les squelettes, une feuille de style (CSS) décrivant le comportement des paragraphes (c’est-à-dire, selon les choix, pas d’espacement vertical entre les paragraphes, indentation de la première ligne…).

–  On peut faire des énumérations imbriquées en ajoutant des étoiles après le tiret d’énumération.

Ainsi :

-* Ton cheval est:-** alezan;-** bai;-** noir;-* mais mon lapin est:-** blanc;-*** angora; -*** ou à poil ras.

donne :

• Ton cheval est :
  • alezan ;
  • bai ;
  • noir ;
• mais mon lapin est :
  • blanc ;
    • angora ;
    • ou à poil ras.

–  Enfin, on peut faire des listes numérotées en utilisant le # à la place de l’étoile :

-# premier-# deuxieme-# troisieme

donnera :

1. premier
2. deuxième
3. troisième

Les liens hypertextes vers un glossaire externe

Vous pouvez en outre créer très rapidement un lien hypertexte vers la définition d’un terme dans un glossaire externe ; pour un terme donné, il suffit d’insérer au sein de votre texte le raccourci [?terme].

Ainsi le code suivant : « {À la recherche du temps perdu} est l'œuvre majeure de [?Marcel Proust] » donnera à l’affichage : « À la recherche du temps perdu est l’œuvre majeure de Marcel Proust

». Pensez à cliquer sur le lien pour vérifier que le terme entré (nom propre ou nom commun) est correctement orthographié, et qu’il pointe sur une destination valide.

Le glossaire externe prédéfini est Wikipedia qui impose certaines conventions sur les titres. Cette encyclopédie multilingue écrite sur un mode coopératif est ouverte à tous les contributeurs via Internet ; prenez le temps de la connaître et d’y contribuer afin d’enrichir ce fonds de savoir partagé.

Vous pouvez aussi référencer un autre glossaire en plaçant après le terme le signe # suivi du nom G du glossaire. SPIP appliquera alors la fonction glossaire_G sur le terme pour obtenir le lien à insérer. Cette fonction aura été placée dans le fichier mes_options.php. Si le nom G se termine par des chiffres, ceux-ci seront préalablement retirés de ce nom, et formeront le deuxième argument de la fonction, ce qui est très utile pour un glossaire divisé en sections. On écrira donc :

[?read#man2]

pour indiquer que l’on référence l’explication du terme read dans la section 2 du glossaire nommé man.

Les raccourcis pour mentionner la langue et créer une info-bulle, expliqués pour les liens externes, fonctionnent également pour les glossaires.

Des ancres nommées

Vous pouvez définir des « ancres HTML » afin de pouvoir construire un lien direct vers un point donné au milieu d’une page d’un site SPIP. Il suffit d’introduire le raccourci :

[direct<-]

et cela créera une ancre de nom direct. Ainsi, s’il s’agit, par exemple, de l’article 3723, l’URL http://monsite/spip.php?page=article.php&id_article=3723#direct conduira directement à l’endroit de l’article où est situé cette ancre.

Il est à noter que les ancres sont compatibles avec les liens hypertexte à l’intérieur du site. Ainsi, le raccourci « [ce point précis->art123#precis] » conduira vers l’ancre nommée « precis » défini dans l’article 123.

Des notes non automatiques

Dans la plupart des cas, le système de notes automatiques indiqué ci-dessus suffit amplement. Cependant, vous pouvez gérer les notes d’une manière non automatique en « forçant » le choix du numéro ou de la mention affichée pour réaliser le lien.

Le principe général consiste à indiquer votre choix de la mention utilisée entre chevrons au début de la note :

Une note «forcée»[[<xxx> Le texte de la note.]]

Sur ce principe :

vous pouvez utiliser les notes numérotées automatiques[[En plaçant le texte de la note entre crochets.]],- mais aussi forcer la numérotation de la note[[<23> En indiquant le numéro de la note entre les symboles «<» et «>».]],- utiliser des notes sous forme d'astérisques [[<*> En plaçant simplement une astérisque entre les symboles «<» et «>».]],- fabriquer des notes sans références (non numérotées); attention, de telles notes ne présentent plus de lien entre la note et l'appel de note[[<> En n'indiquant rien entre les symboles «<» et «>».]],- donner un nom (en toutes lettres) à une note; cet usage est très répandu pour les références bibliographiques[[<Rab> François Rabelais.]];- rappeler une note déjà existante[[<23>]] en indiquant le numéro de cette note entre les symboles «<» et «>» et en laissant vide le reste de la note.

donne :

vous pouvez utiliser les notes numérotées automatiques [2],
–  mais aussi forcer la numérotation de la note [23],
–  utiliser des notes sous forme d’astérisques [*],
–  fabriquer des notes sans références (non numérotées) ; attention, de telles notes ne présentent plus de lien entre la note et l’appel de note,
–  donner un nom (en toutes lettres) à une note ; cet usage est très répandu pour les références bibliographiques [Rab] ;
–  rappeler une note déjà existante [23] en indiquant le numéro de cette note entre les symboles « < » et « > ». et en laissant vide le reste de la note.

Court-circuiter les raccourcis SPIP

Dans certains cas, il peut être utile d’indiquer à SPIP que certaines parties d’un document ne doivent pas être « traitées » par le filtre des raccourcis typographiques : vous ne voulez pas corriger la typographie, vous devez afficher du code source (par exemple en PHP, JavaScript…)…

Le code de ce raccourci est :

<HTML>texte à ne pas transformer; attention!</HTML>

ce qui donne :

texte à ne pas transformer; attention!

(ici, notez l’absence d’espaces avant le point-virgule et le point d’exclamation).

Afficher du code informatique

Certains utilisateurs de SPIP veulent parfois afficher du code informatique dans leurs pages. Le raccourci <code>...</code> est là pour ça.

Exemple :

<code><?php     // ceci est du langage php      echo "bonjour";</code>

donne

<?php     // ceci est du langage php      echo "bonjour";

Il existe un autre raccourci pour publier des extraits de code informatique de plusieurs lignes : <cadre>...</cadre>. Cela place le code dans un « formulaire » (ceci est souvent utilisé sur la présente page). L’avantage de cette méthode est de faciliter grandement le copier-coller à partir de votre page Web : il suffit de placer le curseur à l’intérieur du code, de faire « tout sélectionner » (ctrl-A) pour pouvoir copier directement le code. De plus sur de nombreux butineurs, ce cadre permet de bien restituer les tabulations en début de ligne.

Voici un exemple :

class Texte {
	var 
type = 'texte';
	var 
texte;
}

 class Champ {
	var 
type = 'champ';
	var 
nom_champ, 
id_champ;
	var 
cond_avant, 
cond_apres; // tableaux d'objets
	var 
fonctions;
}

Pour en savoir plus : Retrouvez la rubrique d’aide de Spip en suivant ce lien.